表单元素用于获取用户的输入数据。
表单元素总汇:
form 表示HTML表单
input 用来表示用户输入数据的控件
textarea 表示可以输入多行文本的控件
select 表示用来提供一组固定的选项
option 表示提供一个选项
optgroup 表示一组关联的option元素
button 表示可用来提交或重置的表单按钮,或一般按钮
datalist 定义一组供给用户的建议值
fieldset 表示一组表单元素
legend 表示fieldset元素的说明性标签
label 表示表单元素的说明标签
output 表示计算结果
<form>标签:
表示一个表单。
action属性表示表单提交的页面,默认提交到本页面。
method属性表示表单的请求方式,有POST和GET两种,默认后者。
name属性用来设置表单的名称,以便程序调用。
target属性用来设置表单提交的目标,如属性值为_blank则提交时会新建一个窗口。
autocomplete属性设置浏览器记住用户输入的数据,实现自动完成表单,默认为on。
novalidate设置是否执行客户端数据有效性检查。
<input>标签:
用于添加输入框。
autofocus属性默认将光标悬停在输入框里。
disabled属性禁用input,使它不可写。
autocomplete对单独的这个input设置是否记住用户输入的数据,而不是去看<form>标签的autocomplete属性。
type属性表示input元素的类型。
value属性表示输入框中的值,当写上它的值时框中将以它的值做默认值(用户后面写进去的值会更新value值)。
form属性让表单外的元素和指定的表单挂钩提交。这首先要对<form>标签设置一个全局属性id的值,然后要做挂钩的元素设置form这个属性具有和<form>标签的id相同的值,就可以和那个表单挂钩提交了。
<label>标签:
用于给表单的某一个标签添加说明。
如用<label>标签将<input>标签包含起来后,①点击input前的名称也可以进行输入,②可以利用<label>进行CSS样式的设置,③
如果<label>只包含了<input>前面的文字,还想实现上面那些功能的话,就要给<input>一个全局属性id,然后给label的for属性具有与它相同的值,这样它们就挂钩起来了。
<fieldset>标签:
用于对表单进行编组。如可能有用户数据组,问答组,密码组等,表单数据很多的时候就有必要进行编组。
name属性给分组定义一个名称。
form属性让表单外的分组与表单挂钩。
disabled属性禁用分组内的全部表单。
<legend>标签:
用于添加分组说明,直接作为<fieldset>标签的子标签就可以。
<button>标签:
用于添加一个输入按钮。
type属性表示按钮的用途,默认值为submit表示提交,还有reset属性表示重置,button表示普通的按钮(要配合JavaScript进行特殊事件的触发才有用途)。
type属性为submit时,将会具有下面这些额外的属性:
form 指定按钮关联的表单。
formaction 覆盖form元素的action属性。
formenctype 覆盖form元素的enctype属性。
formmethod 覆盖form元素的method属性。
formtarget 覆盖form元素的target属性。
formnovalidate 覆盖form元素的novalidate属性。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>表单元素 其一</title>
<meta charset="utf-8">
</head>
<body>
<form method="get" action="http://www.baidu.com" target="_blank" autocomplete="on" id="register">
<fieldset>
<legend>注册分组</legend>
<label for="myname">
用户名:
</label>
<input name="user" autofocus id="myname">
<br>
<label>
电子邮件:<input name="email" form="register">
</label>
</fieldset>
<button type="submit" formaction="http://www.sogou.com">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
<!-- 电子邮件:<input name="email" form="register"> -->
</body>
</html>
运行结果:
按下提交后: