HTML 表单和输入<form><input>

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>

HTML 表单和输入<form><input>的更多相关文章

AngularJS（五）：表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
[Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
HTML（五）列表，区块，布局，表单和输入
HTML 列表无序列表 Coffee Tea Milk 默认是圆点,也可以圆圈正方形有序列表 Coffee Tea Milk Coffee Tea Milk 默认是用数字排序大写字母小写字 ...
深入浅出ExtJS 第四章表单与输入控件
4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...
HTML 表单和输入
HTML 表单表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons).复选框(checkboxes)等等 ...
HTML表单与输入实例
解释HTML 表单用于搜集不同类型的用户输入.HTML 表单包含表单元素.表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等.<input> 元素<input ...
Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
[转]React表单无法输入原因----约束性和非约束性组件
转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
16Vue 表单的输入绑定
基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. 它会根据控件类型自动选取正确的 ...

随机推荐

js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
PHP之初识PHP(1)
酸菜记之初识PHP 这是我从零基础了解PHP开始学习的笔记,共同学习,有不对之处,望指出共同学习. 一.初了解PHP PHP 是超文本预处理语言 php HyperText Preprocesso ...
Web Service简介内部资料请勿转载谢谢合作
1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...
JAVA 多线程学习总结
新手一枚,Java学习中,把自己学习多线程的知识总结一下,梳理下知识,方便日后查阅,高手莫进. 本文的主要内容: [1] 实现线程的两种方法 [2] 线程的启动与 ...
ProcessBuilder 、Runtime和Process 的区别
1.版本原因 ProcessBuilder是从java1.5加进来的,而exec系列方法是从1.0开始就有的,后续版本不断的重载这个方法,到了1.5已经有6个之多. 2.ProcessBuilder. ...
hibernate联合主键注解方式
转载自https://my.oschina.net/yotoo/blog/265571 方法一:主键类用@Embeddable,pojo类仍然用@Entity但是引用主键类的对象用@Id 主键pojo ...
遗传算法在JobShop中的应用研究（part 5：解码）
解码操作是整个遗传算法最重要的一步,在这步里面我们利用配置文件中的信息将染色体解码成一个有向无环图. 在介绍解码操作之前我们先来看一下配置文件,在part1绪论中我们已经介绍了一个车间调度问题的基本信 ...
Linux命令:screen
①杀死detached状态的会话: $ screen -X -S [session # you want to kill] quit
Jenkins + maven + Git+selenium
1.在Jenkins中配置Maven与Git 1)在系统管理>管理插件>可选插件页面分别下载Git plugin 与 Maven Integration plugin插件,安装完成后再已 ...
Stl源码剖析读书笔记之Alloc细节
阅读基础: Foo *pf = new Foo; 执行了两个步骤: 1)::operator new 向系统申请内存. 2) 调用Foo::Foo()构造函数构造实例. ==> 申请内存,构造 ...

HTML 表单和输入<form><input>

HTML 表单和输入<form><input>的更多相关文章

随机推荐

热门专题