HTML5学习（三）

一、表单

语法

<form method="" action="">
	...<!-- 各种表单元素 -->
</form> 

二、十七个表单元素

1、文本框：

<input type="text" />

2、密码框：

<input type="password" />

3、单选框：

<input type="radio"  name="gen" value="男"/>男
<input type="radio"  name="gen" value="女"/>女

4、使用场景：多个选项最多只能选择一项

备注：
1、多个选项只选其中一项时，每个单选框的name值必须一致
2、必须要有value值
3、若某个选项为默认选中时，需要给该项添加checked属性：

<input type="radio"  name="gen" value="男" checked/>男

5、复选框：

<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球

6、使用场景：多个选项可以选择多个

备注：
1、多个选项可以多选时，每个单选框的name值必须一致
2、必须要有value值
3、若某个选项为默认选中时，需要给该项添加checked属性：

<input type="checkbox" name="hobby" value="羽毛球" checked />羽毛球

7、文件域：

<input type="file" />

8、邮件框：

<input type="email" />

备注：若输入内容，当提交表单时，会自动校验内容是否符合邮箱格式

9、地址框：

<input type="url" />

备注：
若输入内容，当提交表单时，会自动校验内容是否符合url地址格式
url地址需要包含http://或https://

10、数字框：

<input type="number" />

备注：
只能输入数字以及表示数字的符号，比如小数点，+ -

11、滑块：

<input type="range" />

使用场景：进度展示、长度展示

12、下拉列表：

<select>
	<option value="选项一">选项一</option>
	<option value="选项二">选项二</option>
	...
	<option value="选项N">选项N</option>
</select>

使用场景：多个选项组合为一个结果时，使用下拉列表，如：年月日、地址、级联菜单等联合选项

备注：
<select>标签中必须要有作为选项，否则是空下拉列表

标签必须要有value属性，中间必须要写文本值，且value值要与文本值一致 若下拉列表中某项默认被选中，需要在该项(option)中添加selected属性：

<select>
	<option value="选项一">选项一</option>
	<option value="选项二" selected>选项二</option>
	...
	<option value="选项N">选项N</option>
</select>

13、日期框：

年月日：

<input type="date" />

年月日时分秒

<input type="datetime-local" />

14、文本域：

<textarea></textarea>

三、按钮

1、普通按钮：

<input type="button" value="提交"/>

备注：必须要有value值，否则按钮无提示
图片按钮：

<input type="image" src=""/>

备注：
图片按钮必须要有src值，否则按钮不显示图片
图片按钮自带提交表单的效果

2、提交按钮：

<input type="submit"/>

备注：
若不写value值，默认显示为“提交”
具有提交表单的效果

3、提交按钮：

<input type="reset"/>

备注：
若不写value值，默认显示为“重置”
点击重置按钮会将表单内容恢复到初识状态

4、搜索框：

<input type="search"/>

5、表单元素的属性：

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中
min	type为number、range时，表示输入/显示最小值
max	type为number、range时，表示输入/显示最大值
step	type为number、range时，表示在加减值时的步进量

6、标注：lable

增强鼠标的可用性、自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>
<input type="radio" name="gender" value="男" id="male"/>男

表单的高级应用

7、隐藏域：

<input type="hidden" value=""/>

备注：
不会显示在页面上

8、只读：readonly

所有的输入内容以及日期元素可用，若单选框没有默认选项时也可生效

<input name="name" type="text" value="张三"  readonly>

9、禁用：disabled

所有表单元素都可生效

<input type="submit "  disabled   value="保存" >

10、表单的初级验证

提示语：placeholder

<input type="text" placeholder="请输入用户名"/>

备注：
可以描述文本框期待用户输入何种内容 提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等输入类型表单元素、textarea标签也可适用

11、必填/必选：required

规定文本框填写内容不能为空，否则不允许用户提交表单

<input type="text" required/>

备注：
当提交表单时，会验证含有required属性的表单元素，检查是否有内容，若无则不能提交
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

12、正则表达式：patten

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text"  pattern="^1[35789]\d{9}" /><!-- 要求只能输入手机号 -->

四、代码示例

<!-- 表单元素 -->
		<form>

		</form>
		<!-- method:提交请求的方式；action:表示将数据发送到一个地方； -->
		<form method="POST" action="">
			<p>名字：<input name="name" type="text" /></p>
			<p>密码：<input name="pass" type="password" /></p>
		</form>
		<form method="POST" action="">
			<!-- name名字；type样式；value提示字符；maxlength最大输入长度；size输入框长度；placeholder提示语； -->
			<p>名字：<input name="name" type="text" value="" maxlength="" size="" placeholder="请输入"/></p>
			<p>密码：<input name="pass" type="password" value="" maxlength="" size="" /></p>
		</form>
		<!-- 单选框 -->
		<p>
			<a>性别：</a>
			&emsp;
			<!-- name名字；type样式；value提交服务器内容；checked默认选择； -->
			<input name="sex" type="radio" value="男" checked />男
			&emsp;
			<input name="sex" type="radio" value="女" />女
		</p>
		<!-- 复选框 -->
		<p>
			<a>性别：</a>
			&emsp;
			<input name="sex" type="checkbox" value="男" />男
			&emsp;
			<input name="sex" type="checkbox" value="女" />女
		</p>
		<!-- 表签 -->
		<p>
			<a>性别：</a>
			&emsp;
			<input name="sex" id="man" type="radio" value="男" />
			<label for="man">男</label>
			&emsp;
			<input name="sex" id="woman" type="radio" value="女" />
			<label for="woman">女</label>
		</p>
		<!-- 文件域 -->
		<form method="POST" enctype="multipart/form-data">
			<p>
				<input name="" id="" type="file" />
				<input name="" id="" type="submit" value="上传" />
			</p>
		</form>
		<!-- 关于按钮 -->
		<input type="button" name="" value="普通按钮" />
		<input type="reset" name="" value="重置按钮" />
		<input type="submit" name="" value="提交按钮" />
		<input type="image" src="" value="图片按钮" />
		<br />
		<!-- 其他的一些typpe -->
		<p>
			<!-- 邮箱 -->
			<input type="email" name="" />
		</p>
		<p>
			<!-- 网址 -->
			<input type="url" name="" />
		</p>
		<p>
			<!-- 数字 -->
			<input type="number" name="" step="2" min="1" max="1772" value="2" />
		</p>
		<p>
			<!-- 滑块 -->
			<input type="range" name="" min="2" max="10" value="6" />
		</p>
		<p>
			<!-- 搜索框 -->
			<input type="search" name="search" />
			<input type="button" name="search"/>
		</p>
		<!-- 下拉列表 -->
		<p>
			<select name="" size="5">
				<option value="" selected>990</option>
				<option value="">997</option>
			</select>
			<select name="">
				<option value="">990</option>
				<option value="" selected>997</option>
			</select>
		</p>
		<!-- 时间 -->
		<p>
			<input type="date" name="" value=""/>
			<input type="datetime" name="" value=""/>
			<input type="datetime-local" name="" value=""/>
		</p>
		<!-- 多行文本域 -->
		<p>
			<textarea name="" cols="40" rows="5"></textarea>
		</p>
		<p>
			<input type="hidden" value="" name=""/>
		</p>
		<p>
			<input name="" type="text" />
		</p>
		<p>
			<!-- 只读 -->
			<input name="" type="text" readonly/>
			<!-- 禁用 -->
			<input type="text" disabled/>
			<!-- 必填 -->
			<input type="text" required/>
		</p>