表单允许我们发送和接收来自web页面的数据,表单的用途有:网站和论坛登录;注册信息;基于web的电子邮件;在线问卷调查等。
所有表单元素(如输入框和按钮)必须位于表单标记内。在大多数情况下,表单必须设置name、action属性。
用于为表单创建简单的文本输入字段,但也是许多其他表单输入类型的基础,使用type属性来指定不同类型。
按钮与表单输入字段类似,但有自己的一组属性:
下拉列表,也称为组合框,允许从项目列表中进行选择。
option标记定义选择列表中的每一项,并且必须出现在select标记中。选择项的文本必须出现在选项标记之间。
浏览器显示的内容如下所示:
例
带有两个输入字段和相关标记的简单 HTML 表单:
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
浏览器支持
目前大多数浏览器支持 <label> 标签。
标签定义及使用说明
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
提示和注释
提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
HTML 4.01 与 HTML5之间的差异
"form" 属性是 HTML5 的新属性。
属性
New:HTML5 新属性。
属性 | 值 | 描述 |
---|---|---|
for | element_id | 规定 label 与哪个表单元素绑定。 |
formNew | form_id | 规定 label 字段所属的一个或多个表单。 |
全局属性
<label> 标签支持全局属性,查看完整属性表 HTML全局属性。
事件属性
<label> 标签支持所有 HTML事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
编写HTML5页面时,我们很多时候都需要用到表单属性,那么HTML5作为一个新晋IT界红人,HTML5表单属性有哪些呢?今天先来分享一下其中的<form> / <input> autocomplete 属性、<input> autofocus 属性、<input> form 属性以及<input> formaction 属性。
<form> / <input> autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
实例
HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
提示:某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
<form> novalidate 属性
novalidate 属性的一个boolean 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
实例
无需验证提交的表单数据
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<input> autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时,域自动地获得焦点。
实例
让 "First name" input 输入域在页面载入时自动聚焦:
First name:<input type="text" name="fname" autofocus>
<input> form 属性
form 属性规定输入域所属的一个或多个表单。
提示:如需引用一个以上的表单,请使用空格分隔的列表。
实例
位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
<input> formaction 属性
The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖<form> 元素中的action属性.
注意: The formaction 属性用于 type="submit" 和 type="image".
实例
以下HTMLform表单包含了两个不同地址的提交按钮:
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo-admin.php"
value="Submit as admin">
</form>
了解更多计算机相关知识,可登陆北大青鸟广州新嘉华官网查看,或联系在线值班老师了解详情。
*请认真填写需求信息,我们会在24小时内与您取得联系。