【HTML5学习笔记】10：表单元素其一

来源：互联网发布：江苏域名备案编辑：程序博客网时间：2024/05/19 00:39

表单元素用于获取用户的输入数据。

表单元素总汇：

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>

运行结果：

按下提交后：

1 0

【HTML5学习笔记】10：表单元素 其一

【HTML5学习笔记】10：表单元素其一