参考：

目录：

　　HTML 表单用于搜集不同类型的用户输入。

1、<form> 元素

　　HTML 表单用于收集用户输入。

　　<form> 元素定义 HTML 表单。

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

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

　　表单还可以包含 menus、textarea、fieldset、legend 和 label 元素（<label>元素一般与<input type="radio">和<input type="checkbox">结合使用较多）。

<label>元素举例：

　　<label>标签是<input>的描述，它本身不会有特殊效果，但它和其它<input>标签使用可以提升用户的使用体验，用户不用非得点    击到按钮，而是点击文字即可选中，如“记住密码”，<label>和<input>进行了关联，但是提交的依然是value的值，<label>中的内容不会被提交（通过<label>标签的for属性指向<input>标签的id来进行关联）。

 <html>

     <body>

         <p>请点击文本标记之一，就可以触发相关控件：</p>

         <form>

             <label for="male">Male</label>

             <input type="radio" name="sex" id="male" />

             <br />

             <label for="female">Female</label>

             <input type="radio" name="sex" id="female" />

         </form>

     </body>

 </html>

<legend>元素举例（通常和<fieldset>元素结合使用）：

 <form>

     <fieldset>

         <legend>Student Information</legend>

             Name: <input type="text" name="Name">

             <br />

             Sex:

                 <label for="boy1">boy</label>

                 <input type="radio" name="Sex" id="boy1">

                 <label for="girl1">girl</label>

                 <input type="radio" name="Sex" id="girl1">

     </fieldset>

 </form>

　　输出结果：

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

　　<form>表单元素属性：

属性 值 描述
accept MIME_type HTML 5 中不支持。
accept-charset charset_list 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete⭐
  • on
  • off
 规定是否启用表单的自动完成功能。
enctype 见说明

规定在发送表单数据之前如何对其进行编码（如X进制）。

enctype 属性可能的值：

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

method

（见本文第2节说明）
  • get（默认的提交方式）
  • post
 规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate⭐ novalidate 如果使用该属性，则提交表单时不进行验证。
target                                           
  • _blank
  • _self
  • _parent
  • _top
  • framename                                        
 规定在何处打开 acti                                                                                                

　　HTML <form> 元素，已设置所有可能的属性，实例：

 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

 ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

 　　<!--form elements-->

 </form>

　　输出结果：略。

1.1 <input> 元素（输入属性）

（1）属性包括

　　value 属性：value 属性规定输入字段的初始值：

 <form action="">

     First name:<br>

     <input type="text" name="firstname" value="John">

     <br>

     Last name:<br>

     <input type="text" name="lastname">

 </form>

　　readonly 属性：readonly 属性规定输入字段为只读（不能修改），readonly 属性不需要值。它等同于 readonly="readonly"。：

 <form action="">

     First name:<br>

     <input type="text" name="firstname" value="John" readonly>

     <br>

     Last name:<br>

     <input type="text" name="lastname">

 </form>

　　输出结果：

First name:
 
Last name:

　　disabled 属性：disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。disabled 属性不需要值。它等同于 disabled="disabled"。

 <form action="">

     First name:<br>

     <input type="text" name="firstname" value ="John" disabled>

     <br>

     Last name:<br>

     <input type="text" name="lastname">

 </form>

　　输出结果：

First name:
 
Last name:

　　size 属性：size 属性规定输入字段的尺寸（以字符计）：

 <form action="">

     First name:<br>

     <input type="text" name="firstname" value ="John" size="40">

     <br>

     Last name:<br>

     <input type="text" name="lastname">

 </form>

　　输出结果：

First name:
 
Last name:

　　maxlength 属性：maxlength 属性规定输入字段允许的最大长度。如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

　　注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

 <form action="">

     First name:<br>

     <input type="text" name="firstname" maxlength="10">

     <br>

     Last name:<br>

     <input type="text" name="lastname">

 </form>

　　输出结果：

First name:
 
Last name:

　　image属性（这种方式使用的不多，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="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>

 </form>

 <p><b>注释：</b>默认地，image 输入类型会发生点击图像按钮时的 X 和 Y 坐标。</p>

　　输出结果：

First name: 
Last name:

注释：默认地，image 输入类型会发生点击图像按钮时的 X 和 Y 坐标。

（2）HTML5 <input>元素属性

属性 值 描述
accept mime_type 规定通过文件上传来提交的文件的类型。
align
  • left
  • right
  • top
  • middle
  • bottom
 不赞成使用。规定图像输入的对齐方式。
alt text 定义图像输入的替代文本。
autocomplete⭐
  • on
  • off
 规定是否使用输入字段的自动完成功能。
autofocus⭐ autofocus

规定输入字段在页面加载时是否获得焦点。

（不适用于 type="hidden"）
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form⭐ formname 规定输入字段所属的一个或多个表单。
formaction⭐ URL

覆盖表单的 action 属性。

（适用于 type="submit" 和 type="image"）
formenctype⭐ 见注释

覆盖表单的 enctype 属性。

（适用于 type="submit" 和 type="image"）
formmethod⭐
  • get
  • post

覆盖表单的 method 属性。

（适用于 type="submit" 和 type="image"）
formnovalidate⭐ formnovalidate

覆盖表单的 novalidate 属性。

如果使用该属性，则提交表单时不进行验证。
formtarget⭐
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 target 属性。

（适用于 type="submit" 和 type="image"）
height⭐
  • pixels
  • %
 定义 input 字段的高度。（适用于 type="image"）
list⭐ datalist-id 引用包含输入字段的预定义选项的 datalist 。
max⭐
  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用，来创建合法值的范围。
maxlength⭐ number 规定输入字段中的字符的最大长度。
min⭐
  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用，来创建合法值的范围。
multiple⭐ multiple 如果使用该属性，则允许一个以上的值。
name⭐ field_name 定义 input 元素的名称。
pattern⭐ regexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder⭐ text 规定帮助用户填写输入字段的提示。
readonly⭐ readonly 规定输入字段为只读。
required⭐ required 指示输入字段的值是必需的。
size⭐ number_of_char 定义输入字段的宽度。
src⭐ URL 定义以提交按钮形式显示的图像的 URL。
step⭐ number 规定输入字的的合法数字间隔。
type⭐
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset（清空输入的内容）
  • submit
  • text
  • 增加类型如下所示

规定 input 元素的类型。

注意file类型使用（1、<form>表单的method属性（见本文第2节说明）值要是post，不受大小限制；2、要加enctype="multipart/form-data"属性，即说明文件以二进制方式显示、传输）：

 <form  method="post" enctype="multipart/form-data">

     <input type="file" name="fileField" />

     <input type="submit" value="上传" />

 </form>
value value 规定 input 元素的值。
width⭐                                                          
  • pixels
  • %                                                                         
 定义 input 字段的宽度。（适用于 type="image"）                                             

增加：<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）

　　<input> 元素是最重要的表单元素。

　　<input> 元素有很多形态，根据不同的 type 属性。

　　这是本章中使用的类型：

类型 描述
text（默认） 定义常规文本输入。在<form>表单元素中，<input type="text">和<input>是相同的效果
radio 定义单选按钮输入（选择多个选择之一）
submit                                   定义提交按钮（提交表单）                                                                                                                                                                                                                                             

　　增加类型：password：password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

　　增加类型：checkbox：定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。

　　增加类型：button：定义按钮。

　　增加类型：image

HTML5 输入类型

　　HTML5 增加了多个新的输入类型type属性：

  • color：用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现输入字段中。
  • date：用于应该包含日期的输入字段。根据浏览器支持，日期选择器会出现输入字段中。
  • datetime：允许用户选择日期和时间（有时区）。根据浏览器支持，日期选择器会出现输入字段中。
  • datetime-local：允许用户选择日期和时间（无时区）。
  • email：用于应该包含电子邮件地址的输入字段。
  • month：允许用户选择月份和年份。
  • number：用于应该包含数字值的输入字段。您能够对数字做出限制。根据浏览器支持，限制可应用到输入字段。
  • range：用于应该包含一定范围内的值的输入字段。根据浏览器支持，输入字段能够显示为滑块控件。
  • search：用于搜索字段（搜索字段的表现类似常规文本字段）。
  • tel：用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。
  • time：允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现输入字段中。
  • url：用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。
  • week：允许用户选择周和年。根据浏览器支持，日期选择器会出现输入字段中。

　　注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

　　HTML5 为 <input> 增加了如下属性：

  • autocomplete：autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。
  • autofocus：autofocus 属性是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
  • form：form 属性规定 <input> 元素所属的一个或多个表单。提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
  • formaction：formaction 属性规定当提交表单时处理该输入控件的文件的 URL。formaction 属性覆盖 <form> 元素的 action 属性。formaction 属性适用于 type="submit" 以及 type="image"。
  • formenctype：formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。formenctype 属性覆盖 <form> 元素的 enctype 属性。formenctype 属性适用于 type="submit" 以及 type="image"。
  • formmethod：formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。formmethod 属性覆盖 <form> 元素的 method 属性。formmethod 属性适用于 type="submit" 以及 type="image"。
  • formnovalidate：novalidate 属性是布尔属性。如果设置，则规定在提交表单时不对 <input> 元素进行验证。formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。formnovalidate 属性可用于 type="submit"。
  • formtarget：formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。formtarget 属性会覆盖 <form> 元素的 target 属性。formtarget 属性可与 type="submit" 和 type="image" 使用。
  • height 和 width：height 和 width 属性规定 <input> 元素的高度和宽度。height 和 width 属性仅用于 <input type="image">。注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
  • list：list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
  • min 和 max：min 和 max 属性规定 <input> 元素的最小值和最大值。min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
  • multiple：multiple 属性是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。multiple 属性适用于以下输入类型：email 和 file。
  • pattern (regexp)：pattern 属性规定用于检查 <input> 元素值的正则表达式。pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。提示：请使用全局的 title 属性对模式进行描述以帮助用户。提示：请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。
  • placeholder：placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
  • required：required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
  • step：step 属性规定 <input> 元素的合法数字间隔。示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

并为 <form> 增加如需属性：

  • autocomplete：（上述重复）
  • novalidate：novalidate 属性属于 <form> 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

1.2 文本输入

　　<input type="text"> 定义用于文本输入的单行输入字段：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form>

             Text input 1:<br />

             <input type="text" name="textinput1"></input>

             <br />

             Text input 2:<br />

             <input type="text" name="textinput2"></input>

         </form>

         <br />

         <form>

             Text input 3:

             <input type="text" name="textinput3"></input>

             <br />

             Text input 4:

             <input type="text" name="textinput4"></input>

         </form>

     </body>

 </html>

　　输出结果：

Text input 1:

Text input 2:

Text input 3:

Text input 4:

　　注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

1.3 密码输入

　　<input type="password">，password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form>

             Text input 1:<br />

             <input type="text" name="textinput1"></input>

             <br />

             Password input 2:<br />

             <input type="password" name="psd"></input>

         </form>

     </body>

 </html>

　　输出结果：

Text input 1:

Password input 2:

1.4 单选按钮输入

　　<input type="radio"> 定义单选按钮。

　　单选按钮允许用户在有限数量的选项中选择其中之一（<input type="radio">增加name属性，name相同的radio即为一组，增加checked属性为默认选中的意思）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form>

             <input type="radio" name="sex" value="male" checked>Male</input>

             <br />

             <input type="radio" name="sex" value="female">Female</input>

         </form>

     </body>

 </html>

　　checked属性可以写成checked或者checked="checked"。

　　输出结果：

Male
Female

1.5 复选按钮Checkbox

　　<input type="checkbox"> 定义复选框。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="/demo/demo_form.asp">

             <input type="checkbox" name="vehicle" value="Bike">I have a bike

             <br>

             <input type="checkbox" name="vehicle" value="Car">I have a car

             <br><br>

             <input type="submit">

         </form> 

     </body>

 </html>

　　输出结果：

I have a bike
I have a car

1.6 提交按钮

　　<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

　　表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

　　表单处理程序在表单的 action 属性中指定：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="action_page.php">

             Text input 1

             <input type="text" name="textinput1" value="Mickey"></input>    <!--value为显示默认值-->

             <br />

             Text input 2

             <input type="text" name="textinput2" value="Mouse"></input>     <!--value为显示默认值-->

             <br /><br />

             <input type="submit" value="Submit"></input>

         </form>

     </body>

 </html>

　　输出结果：

Text input 1
Text input 2

1.7 <button> 元素

　　<button> 元素定义可点击的按钮：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form>

             <button type="button" onclick='alert("Hello, world!")'>Click Me!</button>

         </form>

     </body>

 </html>

　　输出结果（点击“Click Me!”按钮后，会出现网页中的alert提示）：

1.8 HTML5新增输入类型

（1）输入类型：number

　　<input type="number"> 用于应该包含数字值的输入字段。

　　您能够对数字做出限制。

　　根据浏览器支持，限制可应用到输入字段。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

         根据浏览器支持：<br>

         数值约束会应用到输入字段中。

         </p>

         <form action="/demo/demo_form.asp">

           数量（1 到 5 之间）：

           <input type="number" name="quantity" min="1" max="5">

           <br />

           Quantity:

           <input type="number" name="points" min="0" max="100" step="10" value="30">

           <br />

           <input type="submit">

         </form>

         <p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
数值约束会应用到输入字段中。

数量（1 到 5 之间）：

Quantity:

　　注释：IE9 及早期版本不支持 type="number"。

（2）输入类型：date

　　<input type="date"> 用于应该包含日期的输入字段。

　　根据浏览器支持，日期选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             当您填写输入字段时会弹出日期选择器。

         </p>

         <form action="/demo/demo_form.asp">

             生日：

             <input type="date" name="bday">

             <br />

             Enter a date before 1980-01-01:

             <input type="date" name="bday" max="1979-12-31"><br />

             Enter a date after 2000-01-01:

             <input type="date" name="bday" min="2000-01-02"><br />

             <input type="submit">

         </form>

         <p><b>注释：</b>Firefox 或者

             Internet Explorer 11 以及更早版本不支持 type="date"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

生日：

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

　　注释：Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="date"。

（3）输入类型：color

　　<input type="color"> 用于应该包含颜色的输入字段。

　　根据浏览器支持，颜色选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             Depending on browser support:<br>

             A color picker can pop-up when you enter the input field.

         </p>

         <form action="action_page.php">

             Select your favorite color:

             <input type="color" name="favcolor" value="#ff0000">

             <input type="submit">

         </form>

         <p><b>Note:</b> type="color" is not supported in Internet Explorer.</p>

     </body>

 </html>

　　输出结果：

Depending on browser support:
A color picker can pop-up when you enter the input field.

Select your favorite color:

　　注释：type="color" is not supported in Internet Explorer.

（4）输入类型：range

　　<input type="range"> 用于应该包含一定范围内的值的输入字段。

　　根据浏览器支持，输入字段能够显示为滑块控件。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             输入类型 "range" 可显示为滑动控件。

         </p>

         <form action="/demo/demo_form.asp" method="get">

             Points:

             <input type="range" name="points" min="0" max="10">

             <input type="submit">

         </form>

         <p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
输入类型 "range" 可显示为滑动控件。

Points:

　　注释：IE9 及早期版本不支持 type="range"。

（5）输入类型：month

　　<input type="month"> 允许用户选择月份和年份。

　　根据浏览器支持，日期选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             当您填写输入字段时会弹出日期选择器。

         </p>

         <form action="/demo/demo_form.asp">

             生日（月和年）：

             <input type="month" name="bdaymonth">

             <input type="submit">

         </form>

         <p><b>注释：</b>Firefox 或者

             Internet Explorer 11 以及更早版本不支持 type="month"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

生日（月和年）：

　　注释：Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="month"。

（6）输入类型：week

　　<input type="week"> 允许用户选择周和年。

　　根据浏览器支持，日期选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             当您填写输入字段时会弹出日期选择器。

         </p>

         <form action="action_page.php">

             Select a week:

             <input type="week" name="year_week">

             <input type="submit">

         </form>

         <p><b>注释：</b>

             Internet Explorer 不支持 type="week"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

Select a week:

　　注释：
Internet Explorer 不支持 type="week"。

（7）输入类型：time（无时区）

　　<input type="time"> 允许用户选择时间（无时区）。

　　根据浏览器支持，时间选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             当您填写输入字段时会弹出日期选择器。

         </p>

         <form action="/demo/demo_form.asp">

             请选取一个时间：

             <input type="time" name="usr_time">

             <input type="submit">

         </form>

         <p><b>注释：</b>Firefox 或者

             Internet Explorer 11 以及更早版本不支持 type="time"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

请选取一个时间：

　　注释：Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="time"。

（8）输入类型：datetime（有时区）

　　<input type="datetime"> 允许用户选择日期和时间（有时区）。

　　根据浏览器支持，日期选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             当您填写输入字段时会弹出日期选择器。

         </p>

         <form action="action_page.php">

             生日（日期和时间）：

             <input type="datetime" name="bdaytime">

             <input type="submit">

         </form>

         <p><b>注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

生日（日期和时间）：

　　注释：Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

（9）输入类型：datetime-local（无时区）

　　<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

　　根据浏览器支持，日期选择器会出现输入字段中。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>

             根据浏览器支持：<br>

             当您填写输入字段时会弹出日期选择器。

         </p>

         <form action="/demo/demo_form.asp">

             生日（日期和时间）：

             <input type="datetime-local" name="bdaytime">

             <input type="submit" value="Send">

         </form>

         <p><b>注释：</b>Firefox 或者

             Internet Explorer 不支持 type="datetime-local"。</p>

     </body>

 </html>

　　输出结果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

生日（日期和时间）：

　　注释：Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

（10）输入类型：email

　　<input type="email"> 用于应该包含电子邮件地址的输入字段。

　　根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

　　某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="/demo/demo_form.asp">

             E-mail:

             <input type="email" name="email">

             <input type="submit">

         </form>

         <p>

             <b>注释：</b>IE9 及更早版本不支持 type="email"。</p>

     </body>

 </html>

　　输出结果：

E-mail:

　　注释：IE9 及更早版本不支持 type="email"。

（11）输入类型：search

　　<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="/demo/demo_form.asp">

             搜索谷歌：

             <input type="search" name="googlesearch">

             <input type="submit">

         </form>

     </body>

 </html>

　　输出结果：

搜索谷歌：

（12）输入类型：tel

　　<input type="tel"> 用于应该包含电话号码的输入字段。

　　目前只有 Safari 8 支持 tel 类型。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="action_page.php">

             Telephone:

             <input type="tel" name="usrtel">

             <input type="submit">

         </form>

         <p><b>注释：</b>Safari 8 及更新版本支持 type="tel"。</p>

     </body>

 </html>

　　输出结果：

Telephone:

　　注释：Safari 8 及更新版本支持 type="tel"。

（13）输入类型：url

　　<input type="url"> 用于应该包含 URL 地址的输入字段。

　　根据浏览器支持，在提交时能够自动验证 url 字段。

　　某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="action_page.php">

             请添加您的首页：

             <input type="url" name="homepage">

             <input type="submit">

         </form>

         <p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p>

     </body>

 </html>

　　输出结果：

请添加您的首页：

　　注释：IE9 及其更早版本不支持 type="url"。

2、HTML <Form> 提交方法属性（需要指定name属性）

method（见本文第2节说明）                                  
  • get（默认的提交方式）
  • post
 规定用于发送 form-data 的 HTTP 方法。                                                                

　　提示：表单域需要间name属性才可以把数据提交到服务器（只有不想提交的才不写name属性，如button）。

2.1 post方式和get方式的区别

（1）安全性：

  • get方式不够安全，以url方式提交
  • post方式以请求实体提交，不会显示在地址栏，相对安全

（2）提交大小限制

  • get方式提交的内容大小有限，一个地址栏放不了多少东西，1K左右
  • post方式提交的内容大小无限制，可以放大文件（如音频、视频、图像等）

　　默认采用的是get提交方式：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

         <script src="jquery-3.3.1.js"></script>

         <script type="text/javascript">

         </script>

         <style type="text/css">

         </style>

     </head>

     <body>

         <form method="get">　　　　<!--等价于<form>，因为method属性默认为get方式-->

             Username: <input type="text" name="Name">

             Password: <input type="password" name="Pwd">

             <input type="submit">

         </form>

     </body>

 </html>

　　输出结果（当输入用户名和密码，点击提交后，在网页的上方可以看到提交的内容）：

　　输入用户名和密码提交后：

3、<select> 元素（下拉列表）

　　<select> 元素定义下拉列表：

　　<option> 元素定义待选择的选项。

　　列表通常会把首个选项显示为被选选项。

　　您能够通过添加 selected 属性来定义预定义选项。

<form>元素中下拉列表<select>元素的属性：

属性 值 描述
autofocus⭐ autofocus 规定在页面加载后文本区域自动获得焦点。
disabled disabled 规定禁用该下拉列表。
form⭐ form_id 规定文本区域所属的一个或多个表单。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
required⭐ required 规定文本区域是必填的。
size                                    number                                        规定下拉列表中可见选项的数目。                                                                                                                                                                                                       

<form>元素中下拉列表<select>元素中的<option>属性：

属性 值 描述
disabled disabled 规定此选项应在首次加载时被禁用。
label text 定义当使用 <optgroup> 时所使用的标注。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value                                  text                                             定义送往服务器的选项值。                                                                                                                                                                                                               

注释：<option> 标签可以在不带有任何属性的情况下使用，但是通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>您可以通过 selected 属性预选择某些选项。</p>

         <form action="/demo/demo_form.asp">

             <select name="cars">

                 <option value="volvo">Volvo</option>

                 <option value="saab">Saab</option>

                 <option value="fiat">Fiat</option>

                 <option value="audi">Audi</option>

             </select>

             <br /><br />

             <input type="submit" value="Submit"></input>

         </form>

     </body>

 </html>

　　输出结果：

您可以通过 selected 属性预选择某些选项。

Volvo
Saab
Fiat
Audi

　　<optgroup>为<option>分组，通过<optgroup>的label属性制定分组的名称：

 <form>

     <select name="" id="">

         <optgroup label="中国">

             <option value="1">上海</option>

             <option value="2" disabled="disabled">北京</option>            <!--置灰，不可选-->

             <option value="3" selected="selected">深圳</option>            <!--默认选中-->

         </optgroup>

         <optgroup label="外国">

             <option value="4">美国</option>

             <option value="5">英国</option>

             <option value="6">法国</option>

         </optgroup>

     </select>

 </form>

　　输出结果：

4、<textarea> 元素

<textarea>多行文本（多行文本域）

　　标签定义多行的文本输入，文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定textarea的尺寸，不过最好的办法是使用CSS的height和width属性。textarea中间有空格即认为有内容，就会使得required属性失效（如果配置required属性的话）。

属性 值 描述
autofocus⭐ autofocus 规定在页面加载后文本区域自动获得焦点。
cols number 规定文本区内的可见宽度。
disabled disabled 规定禁用该文本区。
form⭐ form_id 规定文本区域所属的一个或多个表单。
maxlength⭐ number 规定文本区域的最大字符数。
name name_of_textarea 规定文本区的名称。
placeholder⭐ text 规定描述文本区域预期值的简短提示。
readonly readonly 规定文本区为只读。
required⭐ required 规定文本区域是必填的。
rows number 规定文本区内的可见行数。
wrap⭐                                
  • hard
  • soft
 规定当在表单中提交时，文本区域中的文本如何换行。                                                                                                                                                                             

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。有关 wrap 属性的详细信息。注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

　　<textarea> 元素定义多行输入字段（文本域）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>您可以通过 selected 属性预选择某些选项。</p>

         <form>

             <!--<textarea></textarea>中间的内容即为textarea中显示的内容，保留空格-->

             <textarea name="message" rows="10" cols="30">

 　　　　　　　　　　The cat was playing in the garden.

             </textarea>

         </form>

     </body>

 </html>

　　输出结果：

您可以通过 selected 属性预选择某些选项。

The cat was playing in the garden.

5、HTML5 表单元素

　　HTML5 增加了如下表单元素：

  • <datalist>
  • <keygen>
  • <output>

　　注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

6、HTML5 <datalist> 元素

　　举例（通过 <datalist> 设置预定义值的 <input> 元素）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <form action="/demo/demo_form.asp">

             <input list="browsers" name="browser">

             <datalist id="browsers">

                 <option value="Internet Explorer">

                 <option value="Firefox">

                 <option value="Chrome">

                 <option value="Opera">

                 <option value="Safari">

             </datalist>

             <input type="submit">

         </form>

     </body>

 </html>

　　输出结果：

7、综合举例

　　举例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

         <script src="jquery-3.3.1.js"></script>

     </head>

     <body>

         <form>

             <table>

                 <tr>

                     <td>用户名：</td>

                     <td><input type="text"></input></td>

                 </tr>

                 <tr>

                     <td>密码：</td>

                     <td><input type="password"></input></td>

                 </tr>

                 <tr>

                     <td>确认密码：</td>

                     <td><input type="password"></input></td>

                 </tr>

                 <tr>

                     <td>请选择城市：</td>

                     <td>

                         <form action="">

                             <select name="citys">

                                 <option value="Shanghai">上海</option>

                                 <option value="Beijing">北京</option>

                                 <option value="Shenzhen">深圳</option>

                                 <option value="Hefei">合肥</option>

                             </select>

                         </form>

                     </td>

                 </tr>

                 <tr>

                     <td>请选择性别：</td>

                     <td>

                         <!-- <form> -->

                             <label for="male">Male</label>

                             <input type="radio" name="sex" id="male" />

                             <label for="female">Female</label>

                             <input type="radio" name="sex" id="female" />

                             <label for="uncertain">Uncertain</label>

                             <input type="radio" name="sex" id="uncertain" />

                         <!-- </form> -->

                     </td>

                 </tr>

                 <tr>

                     <td>请选择职业：</td>

                     <td>

                         <!-- <form> -->

                             学生<input type="radio" name="career">

                             教师<input type="radio" name="career">

                             其他<input type="radio" name="career">

                         <!-- </form> -->

                     </td>

                 </tr>

                 <tr>

                     <td>请选择爱好：</td>

                     <td>

                         <!-- <form> -->

                             <fieldset>

                                 <legend>你的爱好</legend>

                                     <label for="basketball">篮球</label>

                                     <input type="checkbox" name="hobby" id="basketball">

                                     <label for="run">跑步</label>

                                     <input type="checkbox" name="hobby" id="run">

                                     <label for="reading">阅读</label>

                                     <input type="checkbox" name="hobby" id="reading">

                                     <label for="surfTheInternet">上网</label>

                                     <input type="checkbox" name="hobby" id="surfTheInternet">

                             </fieldset>

                         <!-- </form> -->

                     </td>

                 </tr>

                 <tr>

                     <td>备注：</td>

                     <td>

                         <!-- <form> -->

                             <input type="textarea" placeholder="这里是备注内容">

                         <!-- </form> -->

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>

                         <input type="submit" value="提交">

                         <input type="reset" value="重置">

                     </td>

                 </tr>

             </table>

         </form>

     </body>

 </html>

　　输出结果：

Web开发——HTML基础（HTML表单/下拉列表/多行输入）的更多相关文章

  1. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

  2. 玩转Django2.0---Django笔记建站基础七(表单与模型)

    第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...

  3. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  4. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

  5. spring mvc表单的展现、输入处理、校验的实现

    之前已经实现了spring mvc的入门例子及如何处理带参数的请求Controller编写.本文主要记录: 1)重定向请求 2)处理路径中含有变量的请求 3)使用JSR-303进行校验 ① 首先,编写 ...

  6. Web jsp开发学习——Servlet提交表单时用法

     实现提交表单以后判断输入的信息是否符合条件    若符合条件   先新建servlet  Sevlet的两种声明方式,二选一即可  再到web.xml里注册   register.jsp就是表单的界 ...

  7. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  8. Web开发——jQuery基础

    参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...

  9. Web开发——HTML基础（图像、音频和视频内容）

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

随机推荐

  1. Debug 路漫漫-07

    201811—201903???   1)关于训练参数是复数的问题    ——q_k ^theta   q_k(是item的特征矩阵)中有可能是负数,而指数 theta 如果是含小数点的话,就会产生复 ...

  2. 【C++】C++中的函数

    目录结构: contents structure [-] 简介 可变形参的函数 initializer_list形参 省略符形参 main函数处理命令行选项 函数指针与函数引用 inline内联函数 ...

  3. 我的IT之路这样走过

    一.我的IT之路这样走过: 1.大一上学期.我们学校是用C语言做启蒙语言的:虽然我学的相当不错,但是我发现一个问题:用C语言做软件那么它的交付周期比较长. 对于我这种无产阶级来说最关键的是解眼下的粮食 ...

  4. python 模块学习

    一.from django.contrib.auth.hashers import make_password 通过函数名即可发现,主要有两个函数,分别是创建密码和验证 用法 ps = " ...

  5. 重置BizTalk RosettaNet

    RosettaNet如果出现问题,可以进行重新配置安装,不过重置过程稍微有点麻烦.步骤如下: 注意:执行如下步骤前请做全部备份工作,如BTARN文件夹,自主开发的BTARN应用程序源码.MSI及Bin ...

  6. electron-vue开发爬坑指南

    electron-vue开发遇到的爬坑过程,遇到了以下几种坑: 1:静态资源目录访问不了,想访问放在static目录下的静态资源,使用express指定静态目录访问不到,解决办法:使用electron ...

  7. 2018年中国C++大会详细日程+报名

    http://purecpp.org/detail?id=2050  

  8. H3C Comware V3 端口聚合

    通常链路聚合有三种模式:手工汇聚.静态LACP汇聚和动态LACP汇聚. 但是V3版本下只提供了 手工聚合模式 manual 和 静态LACP聚合模式 static 两种 V3版本配置链路聚合 1,创建 ...

  9. V-Charts中使用extend属性定制词云图

    [本文出自天外归云的博客园] 简介 在Vue中使用E-Charts可以用V-Charts,词云图在V-Charts官网中介绍比较简单,如果想更多定制的话,官网上说要在extend属性中进行扩展. V- ...

  10. [Linux]systemd和sysV

    转自:https://www.cnblogs.com/EasonJim/p/7168216.html 在Debian8中systemd和sysVinit同时存在,NTP就是在/etc/init.d/n ...