HTML5知识点3

HTML5知识点3

3.表单标签

表单在HTML5中,标签用于用户创建表单,以实现用户信息的收集和传递。

语法：
<form action="URL地址" method="提交方式">
<!-- 各种表单控件>
</form>

3.1.1 表单的属性

action和method属于标签的两个常用属性,其提交方式有两种，一种是post方法，另一种是get方法。
它们的特点：(1)使用post方法提交表单的方式不会改变浏览器地址栏的状态，表单数据也不会被显示在地址栏中。
(2)使用get方法提交表单的方式，浏览器地址栏的状态会发生改变，该方法会将表单提交的数据在URL中清晰的显示出来。
post方法安全性高于get方法，为了避免数据泄露,建议尽量常用post方法提交表单数据。

3.1.2< input>标签的常用属性及其格式

属性	属性值	说明
	text	定义单行输入字段，用户可在其中输入文本。
	password	定义密码字段。字符被掩码。
	radio	定义单选按钮
	checkbox	定义复选框
	button	定义可单击按钮
	submit	定义提交按钮，把表单数据送到服务器
type	reset	定义重置按钮。会清除所有数据
	file	定义输入字段和浏览按钮，供文件上传
	email	定义输入Email地址的文本框
	url	定义输入URL地址的文本框
	number	输入文本的文本框
	range	输入包含一定范围内的数值的文本框
	search	输入搜索关键字的文本框
name	自定义	指定表单控件的名称
value	自定义	指定表单控件的初始值
size	像素	指定表单控件的初始宽度
maxlength	number	指定输入之段中的字符的最大长度
checked	checked	指定按钮首次加载时应当被选中

3.1.3列表框和多行文本框

列表框用于提供一组数据项，它是通过标签和标签实现的。标签用于显示提供用户选择的列表框，而每个选项是由标签标示的，因此标签必须至少包含一个标签。

<select name="指定列表名称">
	<option value="可选项的值" selected="selected">北京</option>
	<option value="可选项的值">......</option>
	<option value="可选项的值">......</option>
	......
</select>	

数字

number类型的属性

属性	属性值	描述
max	number	最大值
min	number	最小值
value	number	默认值
stpe	number	合法数字间隔

滑块

range类型的属性

属性	属性值	描述
max	number	最大值
min	number	最小值
value	number	默认值
stpe	number	合法数字间隔

3.1.4多行文本域

在表单中，除使用type属性定义不同的控件之外，还有两个其他常用的表单控件，即列表框和多文本域，下面对这两个表单控件进行详细讲解。

 语法：<textarea name="textarea" cols="显示的宽度" rows=“显示的行数”>
 文本内容 
 </textarea>

3.1.5表单验证

在表单注册或者登录时，通常会发现系统会自动验证用户输入的内容是否正确，除了可以使用（JavaScript）代码实现表单验证外，HTML5也提供了几个属性来验证表单。

3.1.6 placeholder属性

placeholder属性用于input类型的文本框提供一种提示。当文本框为空时，提示语显示；当在文本框中输入内容时，提示语消失。placeholder属性适用的input类型有text，search，url，email和passw。

3.1.7required属性

required属性用于规定在输入框中填写的内容不能为空，否则不允许用户提交表单。
该属性使用的input类型有text，password，email，search，url，number，checkbox，radio，file等

3.1.8pattern属性

pattern属性用于验证在input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。
该类型使用得input类型有text，password，email，search，uel等。

3.2文章总结

标签用于为用户创建表单，已实现用户信息的收集和传递，表单标签要在它的范围内才有效。 method提交方法有两种，一种是post方法，另一种是get方法。 标签用于收集用户信息，该标签根据不同的type属性值会对应不同的输入类型。 标签常用的type属性值有text（文本框），password（密码框），radio（单选按钮），>>checkbox（复选框），button（普通按钮），submit（提交按钮），reset（重置按钮），file（文件域），email（邮箱），url（网址），number（数字），range（滑块），search（搜索框）。 将type属性值设为hidden隐藏烈性即可创建隐藏域。 readonly属性设置为hidden隐藏类型即可创建隐藏域。 readonly属性和disabled属性表示单元元素的只读和禁用。 使用 标签的for属性结合表单元素的id属性控制鼠标单击标注的文本内容时，浏览器会自动将焦点>转移到该标注相关的表单元素上。 实现表单验证的属性有placeholder，required，pattern。