整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html基础必备-表单标记,前端小白一看就会

表单允许我们发送和接收来自web页面的数据,表单的用途有:网站和论坛登录;注册信息;基于web的电子邮件;在线问卷调查等。

表单 - <form> ... </form>

所有表单元素(如输入框和按钮)必须位于表单标记内。在大多数情况下,表单必须设置name、action属性。

  • name=“?” - 标识表单的唯一名称,由操作脚本使用。
  • action=“url” - 提交时处理表单数据的脚本的地址(url)。在某些情况下,不需要操作URL,而是由web页面的JavaScript函数处理表单数据。
  • method=“?” - 向操作脚本传送数据时使用的请求方法,post或get。例如,post用于提交用户注册的表单数据,get用于搜索或必须取得返回信息的表单。

输入字段 - <input>

用于为表单创建简单的文本输入字段,但也是许多其他表单输入类型的基础,使用type属性来指定不同类型。

  • name=“?” - 输入字段被操作脚本使用时使用的唯一名称。
  • type=“?” - 输入字段有几种类型,文本text、密码password、复选框checkbox、单选框radio、文件file、图像image、隐藏hidden都是最常见的。
  • value=“?” - 输入字段在首次加载时显示的初始值或数据。
  • size=“?” - 输入字段的大小或宽度,通常以数字字符宽度而不是像素定义。
  • maxlength=“?” - 输入字段的最大长度,例如输入的最大字符数。
  • checked - 与复选框类型和单选框类型一起使用,默认设置为已选中。

按钮 - <button>

按钮与表单输入字段类似,但有自己的一组属性:

  • name=“?” - 按钮中操作脚本中的唯一名称。
  • type=“?” - 按钮类型(submit或reset),提交submit还是重置reset。
  • value=“?” - 按钮上显示的文本,例如“确定”或“提交”。
  • size=“?” - 按钮的长度(或宽度)。

选择列表 - <select> ... </select>

下拉列表,也称为组合框,允许从项目列表中进行选择。

  • name=“?” - 选择列表的名称
  • size=“?”-选择列表的最小宽度,通常不需要,因为列表项的大小决定列表大小。
  • multiple - 允许用户从列表中选择多个项目,默认为选。

选择项 - <option> </option>

option标记定义选择列表中的每一项,并且必须出现在select标记中。选择项的文本必须出现在选项标记之间。

  • value=“?” - 该值是在选择项被选中的情况下发送到操作脚本的数据。注意,这不是在列表中显示的文本
  • selected - 设置选择列表显示时的默认选项。
  • 文本区域 - <textarea></textarea>
  • 文本区域允许输入大量文本,并允许指定输入框的高度与,不像input标记只能有固定高度。
  • name=“?” - 文本区域的唯一名称。
  • rows=“?”-文本区域行数,定义文本区域的垂直大小。
  • cols=“?”-文本区域水平大小,即列数,定义为字符数。

例子

浏览器显示的内容如下所示:

带有两个输入字段和相关标记的简单 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 新属性。

属性描述
forelement_id规定 label 与哪个表单元素绑定。
formNewform_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>

了解更多计算机相关知识,可登陆北大青鸟广州新嘉华官网查看,或联系在线值班老师了解详情。