HTML 表单和输入

HTML <form> 标签

定义和用法：

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

提示和注释

注释：form 元素是块级元素，其前后会产生折行。

属性：

1.  accept-charset 属性       语法：<form accept-charset="value">

定义和用法：规定服务器用哪种字符集处理表单数据。

值：服务器可处理的一个或多个字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。

常用值：

UTF-8 - Unicode 字符编码

ISO-8859-1 - 拉丁字母表的字符编码

gb2312 - 简体中文字符集

理论上讲，可使用任何字符编码，但没有浏览器可以理解所有的编码。字符编码使用得越广泛，浏        览器对其支持越好。

例子：

<form action="demo_form.asp" accept-charset="ISO-8859-1">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

2.  action 属性    语法：<form action="value">

定义和用法:必需的 action 属性规定当提交表单时，向何处发送表单数据。

值：URL     向何处发送表单数据。

可能的值：

• 绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
• 相对 URL - 指向站点内的文件（比如 src="example.htm"）

例子：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

3.  autocomplete 属性 （  HTML5的新属性 ）   语法：<form autocomplete="on/off">

定义和用法:

autocomplete 属性规定表单是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

提示：在某些浏览器中，您可能需要手动启用自动完成功能。

属性值：

on      默认，规定启用自动完成功能。

off      规定禁用自动完成功能。

例子：

<form action="/example/html5/demo_form.asp" method="get" 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>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>

4.  enctype 属性     语法：<form enctype="value">

定义和用法：

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

属性值：

application/x-www-form-urlencoded           在发送前编码所有字符（默认）

multipart/form-data                                 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain                                               空格转换为 "+" 加号，但不对特殊字符编码。

例子:

<form action="/example/html/form_action.asp" method="get" enctype="text/plain">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

5. method 属性   语法：<form method="get/post">

定义和用法：

method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。

表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。

method 属性

浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。

如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。

POST 还是 GET？

如果表单处理服务器既支持 POST 方法又支持 GET 方法，那么你该选择哪种方法呢？下面是有关这方面的一些规律：

• 如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。

• 一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。

• 如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 GET 方法。如果采用 POST 方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。

• 如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。

• 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。

例子：

 <form action="form_action.asp" method="get">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
   <input type="submit" value="Submit" />
 </form>

6. name 属性     语法：<form name="value">

定义和用法:

name 属性规定表单的名称。

form 元素的 name 属性提供了一种在脚本中引用表单的方法。

属性值：

name        表单的名称

例子：

 <form action="form_action.asp" method="get" name="myForm">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
   <input type="button" onclick="formSubmit()" value="Send form data!" />
 </form>

7.  novalidate 属性  （HTML5中的新属性）   语法：<form novalidate="novalidate">

定义和用法：

novalidate 属性规定当提交表单时不对其进行验证。

如果使用该属性，则表单不会验证表单的输入。

注释：novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text, search, url,          telephone, email, password, date pickers, range 以及 color。

例子：

 <form action="demo_form.asp" novalidate="novalidate">
   E-mail: <input type="email" name="user_email" />
   <input type="submit" />
 </form>

8. target 属性    语法：<form target="value">

定义和用法：

target 属性规定在何处打开 action URL。

兼容性注释

在 HTML 4.01 中，不赞成使用 form 元素的 target 属性；在 XHTML 1.0 Strict DTD 中，不支持该属性。

属性值：

_blank    在新窗口中打开

_self       默认。在相同的框架中打开。

_parent   在父框架集中打开。

_top       在整个窗口中打开。

framename      在指定的框架中打开。

例子：

 <form action="form_action.asp" method="get" target="_blank">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
   <input type="submit" value="Submit" />
 </form>

HTML <input> 标签

定义和用法：

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性：

1. accept 属性    语法：<input accept="value"/>

定义和用法：

accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

提示：请避免使用该属性。应该在服务器端验证文件上传。

属性值：MIME_type     用逗号隔开的MIME类型列表。

例子：

<form action="demo_form.asp">
  <input type="file" name="pic" accept="image/*">
  <input type="submit">
</form>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 input 标签的 accept 属性。</p>

2. alt 属性   语法：<input alt="value"/>

定义和用法：

alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。

alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。

注释：即使 alt 属性不是必需的属性，但是当输入类型为 image 时，仍然应该设置该属性。如果不使用该属性，就有可能对文本浏览器或非可视的浏览器造成使用障碍。

浏览器支持

除了 Safari，所有主流的浏览器都支持 "alt" 属性。

例子：

 <form action="form_action.asp" method="get">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
   <input type="image" src="submit.jpg" alt="Submit" align="right" />
 </form>

3. autocomplete 属性    （HTML5中的新属性）   语法：<input autocomplete="on/off"/>

定义和用法：

autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

提示：在某些浏览器中，您可能需要手动启用自动完成功能。

属性值：  on    默认。规定启用自动完成功能。

off    规定禁用自动完成功能。

例子：

 <form action="demo_form.asp" method="get" 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>

4.  autofocus 属性   （HTML5中的新属性）   语法：<input autofocus="autofocus"/>

定义和用法：

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

如果使用该属性，则 input 元素会获得焦点。

例子：

 <form action="demo_form.asp">
   First name:<input type="text" name="fname" autofocus="autofocus" /><br />
   Last name: <input type="text" name="lname" /><br />
   <input type="submit" />
 </form>

5.  checked 属性   语法：<input checked="checked"/>

定义和用法：

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

例子：

 <form action="form_action.asp" method="get">
 <input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car
 </form>

6. disabled 属性    语法：<input disabled=" disabled"/>

定义和用法:

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 <input type="hidden"> 一起使用。

例子：

 <form action="form_action.asp" method="get">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" disabled="disabled" /></p>
   <input type="submit" value="Submit" />
 </form>

7.form 属性   （HTML5中的新属性）  语法：<input form="id"/>

定义和用法：

form 属性规定 input 元素所属的一个或多个表单。

form 属性的值必须是其所属表单的 id。

如需引用一个以上的表单，请使用空格分隔的列表。

例子：

 <body>

 <form action="/example/html5/demo_form.asp" method="get" id="form1">
 First name: <input type="text" name="fname" /><br />
 <input type="submit" value="提交" />
 </form>

 <p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>

 Last name: <input type="text" name="lname" form="form1" />

 </body>

8.   formaction 属性   （HTML5中的新属性）  语法：<input formaction="URL"/>

定义和用法：

formaction 属性覆盖 form 元素的 action 属性。

该属性适用于 type="submit" 以及 type="image"。

例子：

 <form action="/example/html5/demo_form.asp" method="get">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 <input type="submit" value="提交" /><br />
 <input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理员身份提交" />
 </form>

9.  formenctype 属性   （HTML5中的新属性）  语法：<input formenctype="value"/>

定义和用法：

formenctype 属性覆盖 form 元素的 enctype 属性。

该属性与 type="submit" 和 type="image" 配合使用。

属性值：

application/x-www-form-urlencoded            在发送前对所有字符进行编码（默认）。

multipart/form-data                                   不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

text/plain                                                  将空格转换为 "+" 符号，但不编码特殊字符。

例子：

 <form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname" /><br />
   <input type="submit" value="Submit" />
   <input type="submit" formenctype="multipart/form-data" value="Submit" />
 </form>

10. formmethod 属性   （HTML5中的新属性）  语法：<input formmethod="get|post"/>

定义和用法：

formmethod 属性覆盖 form 元素的 method 属性。

可以通过以下方式发送 form-data ：

• 以 URL 变量 (使用 method="get") 的形式来发送
• 以 HTTP post (使用 method="post") 的形式来发送

该属性与 type="submit" 以及 type="image" 配合使用。

例子：

 <form action="demo_form.asp" method="get">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 <input type="submit" value="Submit" />
 <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
 </form>

11.  formnovalidate 属性  （HTML5中的新属性）  语法：<input formnovalidate="formnovalidate"/>

定义和用法：

formnovalidate 属性覆盖 form 元素的 novalidate 属性。

如果使用该属性，则提交表单时按钮不会执行验证过程。

该属性适用于 <form> 以及以下类型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。

例子：

 <form action="demo_form.asp" method="get">
 E-mail: <input type="email" name="userid" /><br />
 <input type="submit" value="Submit" /><br />
 <input type="submit" formnovalidate="formnovalidate" value="Submit" />
 </form>

12. formtarget 属性  (HTML5中的新属性）  语法：<input formtarget="value"/>

定义和用法:

formtarget 属性覆盖 form 元素的 target 属性。

该属性与 type="submit" 以及 type="image" 配合使用。

注释：HTML5 不支持框架和框架集。现在，parent, top 和 framename 值大多用于 iframe。

例子：

 带有两个提交按钮的表单，会提交到不同的目标窗口：
 <form action="demo_form.asp" method="get">
   First name: <input type="text" name="fname" /><br />
   Last name: <input type="text" name="lname" /><br />
 <input type="submit" value="Submit" />
 <input type="submit" formtarget="_blank" value="Submit" />
 </form>

13. height 属性 （HTML5中的新属性）  语法：<input height="pixels|%"/>

定义和用法：

height 属性只适用于 <input type="image">，它规定 image input 的高度。

提示：为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。

例子：

 <form action="demo_form.asp" method="get">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/>
 </form>

14.  list 属性  （HTML5中的新属性）  语法：  <input list="datalist-id"/>

定义和用法：

list 属性引用数据列表，其中包含输入字段的预定义选项。

例子：

 <form action="demo_form.asp">
 Webpage: <input type="url" list="url_list" name="link" />
 <datalist id="url_list">
 <option label="W3Schools" value="http://www.w3schools.com" />
 <option label="Google" value="http://www.google.com" />
 <option label="Microsoft" value="http://www.microsoft.com" />
 </datalist>
 <input type="submit" />
 </form>

15. max 属性  （HTML5中的新属性）   语法：<input max="number|date"/>

定义和用法：

max 属性规定输入字段所允许的最大值。

提示：max 属性与 min 属性配合使用，可创建合法值范围。

注释：max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

属性值;  number      数字值。规定输入字段允许的最大值。

date         日期。规定输入字段允许的最大值。

例子：

 <form action="/example/html5/demo_form.asp" method="get">
 Points: <input type="number" name="points" min="0" max="10" />
 <input type="submit" />
 </form>

16.  maxlength 属性    语法：<input maxlength="value"/>

定义和用法：

maxlength 属性规定输入字段的最大长度，以字符个数计。

maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

例子：

 <form action="form_action.asp" method="get">
   <p>Name: <input type="text" name="fullname" maxlength="85" /></p>
   <p>Email: <input type="text" name="email" maxlength="55" /></p>
   <input type="submit" value="Submit" />
 </form>

17. min 属性    （HTML5中的新属性）  语法：<input min="number|date"/>

定义和用法：

min 属性规定输入字段所允许的最小值。

提示：min 属性与 max 属性配合使用，可创建合法值范围。

注释：max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

例子：

 Points: <input type="number" name="points" min="0" max="10" />

18. multiple 属性   （HTML5中的新属性）    语法:<input multiple="multiple"/>

定义和用法：

multiple 属性规定输入字段可选择多个值。

如果使用该属性，则字段可接受多个值。

注释：multiple 属性使用欧冠与以下 <input> 类型：email 和 file。

例子：

 <form action="demo_form.asp" method="get">
   Select images: <input type="file" name="img" multiple="multiple" />
   <input type="submit" />
 </form>
 <p>请尝试在浏览文件时选取一个以上的文件。</p>

19. name 属性    语法：<input name="value"/>

定义和用法：

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

例子：

 <form action="/example/html/form_action.asp" method="get">
   <p>Name: <input type="text" name="fullname" /></p>
   <p>Email: <input type="text" name="email" /></p>
   <input type="submit" value="Submit" />
 </form>

20. pattern 属性  （HTML5中的新属性）  语法：<input pattern="regexp"/>

定义和用法：

pattern 属性规定用于验证输入字段的模式。

模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。

注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。

提示：请使用标准的 "title" 属性来描述模式。

例子：

Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
  title="Three letter country code" />

21.  placeholder 属性  （HTML5中的新属性）  语法：<input placeholder="text"/>

定义和用法：

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

例子：

 <form action="demo_form.asp" method="get">
   <input type="search" name="user_search" placeholder="Search W3School" />
   <input type="submit" />
 </form>

22. readonly 属性   语法：<input readonly="readonly"/>

定义和用法：

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

例子：

 <form action="form_action.asp" method="get">
   Name:<input type="text" name="email" />
   Country:<input type="text" name="country" value="China" readonly="readonly" />
   <input type="submit" value="Submit" />
 </form>

23.  required 属性  （HTML5中的新属性）   语法：<input required="required"/>

定义和用法：

required 属性规定必需在提交之前填写输入字段。

如果使用该属性，则字段是必填（或必选）的。

注释：required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

例子：

 <form action="/example/html5/demo_form.asp" method="get">
 Name: <input type="text" name="usr_name" required="required" />
 <input type="submit" value="提交" />
 </form>

24.  size 属性   语法：<input size="value"/>

定义和用法：

size 属性规定输入字段的宽度。

对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。

兼容性提示

由于 size 属性是一个可视化的设计属性，我们推荐您使用 CSS 来代替它。

CSS 语法：<input style="width:100px" />

例子;

 <form action="/example/html/form_action.asp" method="get">
   <p>Email: <input type="text" name="email" style="width:150px" /></p>
   <p>PIN: <input type="text" name="pin" maxlength="18" style="width:50px" /></p>
   <input type="submit" value="Submit" />
 </form>

25.  src 属性   语法：<input src="URL"/>

定义和用法：

src 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。

src 属性必须与 <input type="image"> 同时使用。

例子：

 <form action="form_action.asp" method="get">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
   <input type="image" src="submit.jpg" alt="Submit" align="right" />
 </form>

26. step 属性  （HTML5中的新属性）   语法：<input step="number"/>

定义和用法:

step 属性规定输入字段的合法数字间隔（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）。

提示：step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。

注释：step、max 以及 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

例子：

 <form action="/example/html5/demo_form.asp" method="get">
 <input type="number" name="points" step="3" />
 <input type="submit" />
 </form>

27. type 属性   语法：<input type="value">

定义和用法：

type 属性规定 input 元素的类型。

属性值：

 button     定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

例子：

 <script type="text/javascript">
   function msg()
   {
   alert("Hello world!");
   }
 </script>
 </head>
 <body>

 <form>
 <input type="button" value="Click me" onclick="msg()" />
 </form>

checkbox   定义复选框。

例子：复选框允许用户在一定数目的选择中选取一个或多个选项。

 <form action="/example/html/form_action.asp" method="get">
 <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
 <input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
 <input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />
 <input type="submit" value="Submit" />
 </form>

file        定义输入字段和 "浏览"按钮，供文件上传。

例子：用于文件上传。

 <form>
 <input type="file" name="pic" accept="image/gif" />
 </form>

 <p><b>注释：</b>出于安全方面的考虑，本例不允许用户上传文件。</p>

  hidden     定义隐藏的输入字段。

例子：隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

 <form action="/example/html/form_action.asp" method="get">
   Email: <input type="text" name="email" /><br />
   <input type="hidden" name="country" value="China" />
   <input type="submit" value="Submit" />
 </form>

image     定义图像形式的提交按钮。

例子：必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。

 <form action="/example/html/form_action.asp" method="get">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
   <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
 </form>

password    定义密码字段。该字段中的字符被掩码。

例子：密码字段中的字符会被掩码（显示为星号或原点）。

 <form action="/example/html/form_action.asp" method="get">
   Email: <input type="text" name="email" /><br />
   Password: <input type="password" name="pwd" maxlength="8" /><br />
   <input type="submit" value="Submit" />
 </form>

radio        定义单选按钮。

例子：单选按钮允许用户选取给定数目的选择中的一个选项。

 <form action="/example/html/form_action.asp" method="get">
   <input type="radio" name="sex" value="male" /> Male<br />
   <input type="radio" name="sex" value="female" /> Female<br />
   <input type="submit" value="Submit" />
 </form>

reset      定义重置按钮。重置按钮会清除表单中的所有数据。

例子：

 <form action="/example/html/form_action.asp" method="get">
   Email: <input type="text" name="email" /><br />
   Pin: <input type="text" name="pin" maxlength="4" /><br />
   <input type="reset" value="Reset" />
   <input type="submit" value="Submit" />
 </form>

submit    定义提交按钮。提交按钮会把表单数据发送到服务器。

例子：

 <form action="/example/html/form_action.asp" method="get">
   <p>Email: <input type="text" name="email" /></p>
   <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
   <input type="submit" value="Submit" />
 </form>

text     定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

 <form action="/example/html/form_action.asp" method="get">
   <p>Email: <input type="text" name="email" /></p>
   <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
   <input type="submit" value="Submit" />
 </form>

28.  value 属性   语法：<input value="value"/>

定义和用法：

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

• type="button", "reset", "submit" - 定义按钮上的显示的文本
• type="text", "password", "hidden" - 定义输入字段的初始值
• type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file"> 一同使用。

例子：

 <form action="/example/html/form_action.asp" method="get">
   First name: <input type="text" name="fname" value="George" /><br />
   Last name: <input type="text" name="lname" value="Bush" /><br />
   <input type="submit" value="Submit form" />
 </form>

29.  width 属性   （HTML5中的新属性）   语法：<input width="pixels|%"/>

定义和用法：

width 属性只适用于 <input type="image">，它规定 image input 的宽度。

提示：为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。

例子：

 <form action="demo_form.asp" method="get">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/>
 </form>