前端:完整简单详细的注册页面讲解
成品总效果如下:
需要其他修饰网页可以加入自己的创意
讲解:
不知道基础语法的宝可以看看我先前发的一些内容
注意点:
1,密码需要用type="password"属性,使密码不会被显示。如下:
密 码<input type="password" name="password"><br><br>
2,光标最开始默认定位在用户名框(autofocus定位)。如下:
用户名<input type="text" name="username" autofocus><br><br>
3,性别选择是单选,type="radio"属性用于单选,name="gender"属性用于区分同一个类别,value可以不要。如下:
请选择你的性别:<input type="radio" value="nan" name="gender">男
<input type="radio" value="nv" name="gender">女<br><br>
4,爱好设置属于多选,type="checkbox"属性用于多选,name="hobby"属性用于区分同一个类别,可以和上面的name="gender"属性区别开来如下:
请选择你的爱好:<input type="checkbox" value="duo" name="hobby">足球<input type="checkbox" value="duo" name="hobby">篮球<input type="checkbox" value="duo" name="hobby">LOL<input type="checkbox" value="duo" name="hobby">韩剧<input type="checkbox" value="duo" name="hobby">王者荣耀
5,邮箱设置,type="email"属性专门用于设置邮箱类型,placeholder="请输入你的邮箱"属性用于文本框里的提示,required属性是设置不能为空,当邮箱这一项不填时不能提交,如下:
邮箱:<input type="email" placeholder="请输入你的邮箱" required><br><br>
6,用户头像,type="file"属性就可以了,如下:
用户头像:<input type="file"><br><br>
7,家庭住址栏选项,需要在select标签里面嵌套一个option标签,option标签里面写需要填的地址选项,如下:
家庭住址:<select><option>西安</option><option>永川</option><option>万州</option></select><br><br>
8,收获地址栏选项,同样的需要在select标签里面嵌套一个option标签,option标签里面写需要填的地址选项。multiple="multiple"属性是不将选项折叠起来,上一个没有写这个属性就折叠了。selected="selected"属性是默认选择属性,disabled属性是不能更改的选项,可以用于在这里作为提示。
你的收获地址是:<select multiple="multiple" ><option disabled>你的收获地址是:</option><option selected="selected">西安</option><option>永川</option><option>万州</option></select><br><br>
9,大文本框,textarea标签用于写大文本的标签,如建议反馈等。如下:
<textarea cols="20" rows="10">建议或者意见
</textarea><br>
10,颜色选择项,type="color"属性就可以了,专门可以选择颜色。
你喜欢的颜色:<input type="color">
11,注册时间,type="datetime-local"属性用于选择日期的属性
注册时间:<input type="datetime-local"><br>
12,重置和注册按钮,type="submit"属性专门用于提交,type=“reset"属性专门用于重置的按钮。value=”"属性用于提示。
<input type="submit" value="注册">
<input type="reset" value="重置">
然后就OK了,个别属性没有介绍到可以看看以前发的内容。
源代码:
喜欢点一个赞吧,3Q~
<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><form align="center" action="123.html" method="post">用户名<input type="text" name="username" autofocus><br><br>密 码<input type="password" name="password"><br><br>请选择你的性别:<input type="radio" value="nan" name="gender">男<input type="radio" value="nv" name="gender">女<br><br>请选择你的爱好:<input type="checkbox" value="duo" name="hobby">足球<input type="checkbox" value="duo" name="hobby">篮球<input type="checkbox" value="duo" name="hobby">LOL<input type="checkbox" value="duo" name="hobby">韩剧<input type="checkbox" value="duo" name="hobby">王者荣耀邮箱:<input type="email" placeholder="请输入你的邮箱" required><br><br>用户头像:<input type="file"><br><br>家庭住址:<select><option>西安</option><option>永川</option><option>万州</option></select><br><br>你的收获地址是:<select multiple="multiple" ><option disabled>你的收获地址是:</option><option selected="selected">西安</option><option>永川</option><option>万州</option></select><br><br><textarea cols="20" rows="10">建议或者意见</textarea><br>你喜欢的颜色:<input type="color">注册时间:<input type="datetime-local"><br><input type="submit" value="注册"><input type="reset" value="重置"></form>
</body>
</html>
前端:完整简单详细的注册页面讲解相关推荐
- 小白教程——Windows下用PHP写一个简单的登录注册页面(二)
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
- 前端开发学习--登录和注册页面设计(html和css,可完成两个页面点击切换)
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
- 简单的css注册页面
注册界面 <style>.form{width: 70%;position: absolute;top: 10%;left: 25%;}.tree{position: relative;t ...
- H5创建一个简单的qq注册页面
该图就是最终要完成的效果,简单分析一下改图的整体结构,以及需要用到的标签及属性.这里我是直接创建一个表单,然后在表单中创建一个十行一列的表格.以下为最终效果的代码 <!DOCTYPE html& ...
- python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
- JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结 一.环境准备与开发工具 二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
- 使用HTML写一个完整的注册页面
在上一篇博客中,我简单地写了怎样通过使用HTML写一个简单的跳转登录页面,but,TMD太丑了,于是突发奇想+天马行空不如写一个完整注册页面和流程,呵呵,不废话直接上代码. 首先是第一个页面testl ...
- php nodejs 前台,NodeJS之前端注册页面
本文主要给大家介绍了NodeJS之前端注册页面的相关知识,文中通过示例代码介绍的非常详细,对大家学习具有一定的参考学习价值,希望能帮助到大家. app.js文件为://应用程序的启动入口文件 //加载 ...
- web前端如何做注册页面
1.首先,设计整个页面: 代码片段如下: <div class="width100 marT15 content_news_list"><div class=&q ...
最新文章
- Nodejs扩展,实现消息弹窗
- css修改span位置_简历完善,CSS布局与定位,笔记
- jquery_datatables
- 祝贺自己的博客又一个关键字排名上去了
- 毕设题目:Matlab人脸识别
- 基线、底线、顶线、中线
- 【Unifying Motion Deblurring and Frame Interpolation with Events】阅读笔记
- python爬虫爬取豆瓣图书
- 打印表格留标题怎么设置_打印Excel表格时每页都打印标题行的设置方法
- 数据挖掘期末复习速成大法 华南农业大学
- iTunes 备份损坏的解决办法
- Qt 设置Widget背景图片并实现透明度的三种方式
- setting中的各种设置
- 用 C语言的写出几个小程序
- 【快速统计面积周长】封闭图形快速面积求和CAD插件【LSP】
- 蓝桥杯31天冲刺之十一 [java]
- 汉王E典笔——一扫就翻译的笔
- 网络工具nc的常见功能和用法
- 关于12代Intel处理器性能偏向于小核心的问题解决办法,以及安卓模拟器多开卡的问题。
- Django开发中经常出现的问题
热门文章
- shell---sed语句练习
- vc中DC资源的正确利用
- 主流多媒体制作软件一览
- 合肥工业大学计算机考研试题,2016年合肥工业大学计算机考研真题及答案
- 嵌入式实践——烟雾产生器
- 三星手机摔一下,就花屏啦!!
- 解决org.json.JSONException: A JSONObject text must begin with '{' at character 1 of {
- 如何在程序中解析获取word文档(docx格式)的文本内容
- 为什么需要自动化测试?自动化有哪些优势?
- C#播放背景音乐的五种方法