表单是网页上用来收集用户信息的区域,由文本域、复选框、单选框、菜单、文件址域、按钮等表单元素组成。
<form>
标签用于创建一个表单,其基本语法如下所示:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
在上面的语法中,
name属性用来区分一个网页中的多个表单;
action属性用于指定接受并处理表单数据的服务器url地址;
method属性用于设置表单数据的提交方式,其取值可以为get/post,默认为get。
method属性详解——W3school
HTML5新增的表单属性
(1)autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能,所谓“自动完成”是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表里,以实现自动完成输入。
autocomplete属性有2个值,具体如下:
on 表单有自动完成功能
off 表单无自动完成功能
(2)novalidate属性
novalidate属性用于指定在提交表单时取消对表单进行有效的检查。
为表单设置该属性时,可以关闭整个表单的验证,这样可以使form内的所有表单控件不被验证。
常用标签:
<input>
标签
表单中最核心的就是<input>
标签,使用<input>
标签可以在表单中定义输入框、单选按钮、复选框、重置按钮等。
表单中最为核心的就是<input>
标签,使用<input>
标签可以定义文本输入框、单选按钮、复选框、重置按钮,其基本语法如下:
<input type="控件类型"/>
在上面语法中,type属性为最基本的属性,取值有多种,用来指定不同的控件类型,除type属性外,还可以定义很多其它属性,常用属性如name、value、size等。
<textarea>
标签用于定义多行文本框,可以通过cols和rows属性来规定文本区域内可见的列数和行数,具体的尺寸可以通过width和height来设置。
<textarea row="" cols="">这里是文本</textarea>
属性 | 允许取值 | 取值说明 |
---|---|---|
name | 由用户定义 | 控件的名称 |
readonly | readonly | 该控件内容为只读(不能编辑修改) |
disabled | disabled | 第一次加载页面时禁用该控件(显示为灰色) |
maxlength | 正整数 | 控件允许输入的最多字符数 |
autofocus | autofocus | 指定页面加载后是否自动获取焦点 |
placeholder | 字符串 | 为input类型的输入框提供一种提示 |
required | required | 规定输入框填写的内容不能为空 |
cols | number | 规定文本区的可见宽度 |
rows | number | 规定文本区内的可见行数 |
<label>
标签
<label>
标签用于为<input>
标签定义标注(标记),当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
<lable>
标签具体用法如下案例:
<label>
标签的for属性值应当与相关标签的id属性相同。
页面效果图:
单击“女”字,单选按钮同样被选中,这就是<label>
标签与<input>
标签绑定的作用。
<select>
标签
<select>
标签可创建单选或多选菜单,其语法格式具体如下:
<select>
标签中的<option>
标签用于定义列表中的可用选项。
<select>
标签的常用属性。
<datalist>
标签
<datalist>
标签用于定义输入域的选项列表,即与<input>
标签配合定义<input>
标签可能的值。
列表通过<datalist>
标签内的<option>
标签创建,可以使用<input>
标签的list属性引用<datalist>
标签的id属性,具体用法如下:
页面效果图:
<keygen>
标签
<keygen>
标签是密钥对生成器(key-pair-generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。具体用法如下:
<output>
标签
<output>
标签用于定义不同类型的输出,如脚本输出的示例代码如下:
onforminput属性的值对应脚本的方法名。