HTML简单注册界面

## **HTML5实现登录界面**

	
		
		
	
	
		

		
				// accept详细写法： accept = "image/png,image/jpg,image/gif"
				

			

				
用户名：
				

			
			
			

			
密码：
				

			
			

				
性别：
				

					男
					女 
				
			
			

				
爱好
				

					篮球
					足球
					羽毛球
				
				

			
			

				
来自哪个城市
				

					
					宁津
					天津
					北京
					
				
			
			

				
大头照

			
			

				
自我介绍
				

			
			

				
 
				

			
		
		
	

input:文本输入框

	标签	标签的详细解释
用户名密码	< input type = “text” />	文本框：text表示可以输入文本
性别：	< input type = “radio” /> 、label标签	单选按钮：在 HTML 表单中，radio表示单选按钮， < input type = “radio” /> 每出现一次，一个 Radio 对象就会被创建。label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。注意，一个label只能关联一个表单控件。（通俗来说，就是选择性别时，点击文字就可以选中该选项）
爱好：	< input type=“checkbox”/ >	多选按钮：可以选择多项
来自哪个城市：	< select >< option value=“宁津”>宁津< /option >< /select >	下拉菜单：一个option代表一个下拉菜单选择项
大头照	< input type = “file” accept=“image/*,” value = “选择文件” />	上传文件：file代表上传文件，可以用value设置上传按钮的值，上传按钮默认会显示“未选择文件”；通过改变accept中的值改变上传文件的类型，*代表这一类型的所有格式，比如image有jpg、gif、png等。audio:录音、image:图像、video：视频
自我介绍：	< textarea >< /textarea >	多行文本：可以输入多行文本
重置：	< input type=“reset” value=“重置” />	重置：重置的前提是将重置的部分用form表单包起来
提交数据：	< input type=“submit” vaule = “提交数据”/>	提交数据：将所有数据判断并提交

语法：< input type=“元素类型名称”/ >
常用的元素类型type:
text:单行文本框 (用户名)
textarea:多行文本框
password:密码文本框
submit:提交按钮
image:图片按钮
reset:重置按钮，重设表单内容。
button:普通按钮
hidden:隐藏元素
checkbox:复选框
file:文件域
select:列表框

补充：

层级关系显示

        
            
                太原 
                平遥
            
            
                石家庄
                邯郸
            

        

placeholder、required、pattern、value：

< input type="text"
	required="required" 
	placeholder="用户名不能为空" 
	value = "aaa"
	pattern="[A-Za-z]{3}"/>

required表示此文本框是必填项，否则无法提交。
placeholder占位文本，在输入框给用户提示。
value表示文本框的默认值，当有默认之后placeholder则不显示
pattern表示输入内容组成，"[A-Za-z]{3}"(正则表达式)表示由A到Z,a到z的三位字母组成。

type = color|time|date|email|number

		

			颜色：
			
			

			时间：
			
			

			日期：
			
			

			
			邮箱：
			
			

			电话：
			
			

			数字：