Web开发——HTML基础（HTML表单/下拉列表/多行输入）

参考：

目录：

　　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来进行关联）。

 1 <html>
 2     <body>
 3         <p>请点击文本标记之一，就可以触发相关控件：</p>
 4         
 5         <form>
 6             <label for="male">Male</label>
 7             <input type="radio" name="sex" id="male" />
 8             <br />
 9             <label for="female">Female</label>
10             <input type="radio" name="sex" id="female" />
11         </form>
12     </body>
13 </html>

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

 1 <form>
 2     <fieldset>
 3         <legend>Student Information</legend>
 4             Name: <input type="text" name="Name">
 5             <br />
 6             Sex: 
 7                 <label for="boy1">boy</label>
 8                 <input type="radio" name="Sex" id="boy1">
 9                 <label for="girl1">girl</label>
10                 <input type="radio" name="Sex" id="girl1">
11     </fieldset>
12 </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> 元素，已设置所有可能的属性，实例：

1 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
2 ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
3 　　<!--form elements--> 
4 </form>

 　　输出结果：略。

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

（1）属性包括

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

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value="John">
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

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

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value="John" readonly>
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　输出结果：

First name:
 
Last name:

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

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value ="John" disabled>
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　输出结果：

First name:
 
Last name:

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

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" value ="John" size="40">
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　输出结果：

First name:
 
Last name:

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

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

1 <form action="">
2     First name:<br>
3     <input type="text" name="firstname" maxlength="10">
4     <br>
5     Last name:<br>
6     <input type="text" name="lastname">
7 </form>

　　输出结果：

First name:
 
Last name:

　　image属性（这种方式使用的不多，image提交可能会出现提交两次的问题）：

1 <form action="/example/html5/demo_form.asp" method="get">
2     First name: <input type="text" name="fname" /><br />
3     Last name: <input type="text" name="lname" /><br />
4     <input type="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>
5 </form>
6 
7 <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"属性，即说明文件以二进制方式显示、传输）：

 

1 <form  method="post" enctype="multipart/form-data">
2     <input type="file" name="fileField" />
3     <input type="submit" value="上传" />
4 </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"> 定义用于文本输入的单行输入字段：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             Text input 1:<br />
15             <input type="text" name="textinput1"></input>
16             <br />
17             Text input 2:<br />
18             <input type="text" name="textinput2"></input>
19         </form>
20         
21         <br />
22         <form>
23             Text input 3:
24             <input type="text" name="textinput3"></input>
25             <br />
26             Text input 4:
27             <input type="text" name="textinput4"></input>
28         </form>
29         
30     </body>
31 </html>

　　输出结果：

Text input 1:

Text input 2:

 

Text input 3:
Text input 4:

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

1.3 密码输入

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             Text input 1:<br />
15             <input type="text" name="textinput1"></input>
16             <br />
17             Password input 2:<br />
18             <input type="password" name="psd"></input>
19         </form>
20 
21     </body>
22 </html>

　　输出结果：

 Text input 1:

Password input 2:

1.4 单选按钮输入

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             <input type="radio" name="sex" value="male" checked>Male</input>
15             <br />
16             <input type="radio" name="sex" value="female">Female</input>
17         </form>
18         
19     </body>
20 </html>

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

　　输出结果：

Male
Female 

1.5 复选按钮Checkbox

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form action="/demo/demo_form.asp">
14             <input type="checkbox" name="vehicle" value="Bike">I have a bike
15             <br>
16             <input type="checkbox" name="vehicle" value="Car">I have a car 
17             <br><br>
18             <input type="submit">
19         </form> 
20 
21     </body>
22 </html>

　　输出结果：

I have a bike
I have a car

1.6 提交按钮

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form action="action_page.php">
14             Text input 1
15             <input type="text" name="textinput1" value="Mickey"></input>    <!--value为显示默认值-->
16             <br />
17             Text input 2
18             <input type="text" name="textinput2" value="Mouse"></input>     <!--value为显示默认值-->
19             <br /><br />
20             <input type="submit" value="Submit"></input>
21         </form>
22         
23     </body>
24 </html>

　　输出结果：

Text input 1
Text input 2

1.7 <button> 元素

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>        
12         <form>
13             <button type="button" onclick='alert("Hello, world!")'>Click Me!</button>
14         </form>
15         
16     </body>
17 </html>

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

1.8 HTML5新增输入类型

（1）输入类型：number

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

　　您能够对数字做出限制。

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13         根据浏览器支持：<br>
14         数值约束会应用到输入字段中。
15         </p>
16         
17         <form action="/demo/demo_form.asp">
18           数量（1 到 5 之间）：
19           <input type="number" name="quantity" min="1" max="5">
20           <br />
21           Quantity: 
22           <input type="number" name="points" min="0" max="100" step="10" value="30">
23           <br />
24           <input type="submit">
25         </form>
26     
27         <p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p>
28     </body>
29 </html>

　　输出结果：

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

数量（1 到 5 之间）：
Quantity:

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

（2）输入类型：date

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             当您填写输入字段时会弹出日期选择器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             生日：
19             <input type="date" name="bday">
20             <br />
21             Enter a date before 1980-01-01:
22             <input type="date" name="bday" max="1979-12-31"><br />
23             Enter a date after 2000-01-01:
24             <input type="date" name="bday" min="2000-01-02"><br />
25             <input type="submit">
26         </form>
27 
28         <p><b>注释：</b>Firefox 或者
29             Internet Explorer 11 以及更早版本不支持 type="date"。</p>
30     </body>
31 </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"> 用于应该包含颜色的输入字段。

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             Depending on browser support:<br>
14             A color picker can pop-up when you enter the input field.
15         </p>
16 
17         <form action="action_page.php">
18             Select your favorite color:
19             <input type="color" name="favcolor" value="#ff0000">
20             <input type="submit">
21         </form>
22 
23         <p><b>Note:</b> type="color" is not supported in Internet Explorer.</p>
24     </body>
25 </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"> 用于应该包含一定范围内的值的输入字段。

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             输入类型 "range" 可显示为滑动控件。
15         </p>
16 
17         <form action="/demo/demo_form.asp" method="get">
18             Points:
19             <input type="range" name="points" min="0" max="10">
20             <input type="submit">
21         </form>
22 
23         <p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>
24     </body>
25 </html>

　　输出结果：

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

Points:

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

（5）输入类型：month

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             当您填写输入字段时会弹出日期选择器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             生日（月和年）：
19             <input type="month" name="bdaymonth">
20             <input type="submit">
21         </form>
22 
23         <p><b>注释：</b>Firefox 或者
24             Internet Explorer 11 以及更早版本不支持 type="month"。</p>
25     </body>
26 </html>

　　输出结果：

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

生日（月和年）：

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

（6）输入类型：week

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             当您填写输入字段时会弹出日期选择器。
15         </p>
16 
17         <form action="action_page.php">
18             Select a week:
19             <input type="week" name="year_week">
20             <input type="submit">
21         </form>
22 
23         <p><b>注释：</b>
24             Internet Explorer 不支持 type="week"。</p>
25     </body>
26 </html>

　　输出结果：

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

Select a week:

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             当您填写输入字段时会弹出日期选择器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             请选取一个时间：
19             <input type="time" name="usr_time">
20             <input type="submit">
21         </form>
22 
23         <p><b>注释：</b>Firefox 或者
24             Internet Explorer 11 以及更早版本不支持 type="time"。</p>
25     </body>
26 </html>

　　输出结果：

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

请选取一个时间：

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             当您填写输入字段时会弹出日期选择器。
15         </p>
16 
17         <form action="action_page.php">
18             生日（日期和时间）：
19             <input type="datetime" name="bdaytime">
20             <input type="submit">
21         </form>
22 
23         <p><b>注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>
24     </body>
25 </html>

　　输出结果：

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

生日（日期和时间）：

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <p>
13             根据浏览器支持：<br>
14             当您填写输入字段时会弹出日期选择器。
15         </p>
16 
17         <form action="/demo/demo_form.asp">
18             生日（日期和时间）：
19             <input type="datetime-local" name="bdaytime">
20             <input type="submit" value="Send">
21         </form>
22 
23         <p><b>注释：</b>Firefox 或者
24             Internet Explorer 不支持 type="datetime-local"。</p>
25     </body>
26 </html>

　　输出结果：

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

生日（日期和时间）：

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

（10）输入类型：email

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="/demo/demo_form.asp">
13             E-mail:
14             <input type="email" name="email">
15             <input type="submit">
16         </form>
17 
18         <p>
19             <b>注释：</b>IE9 及更早版本不支持 type="email"。</p>
20     </body>
21 </html>

　　输出结果：

E-mail:

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

（11）输入类型：search

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="/demo/demo_form.asp">
13             搜索谷歌：
14             <input type="search" name="googlesearch">
15             <input type="submit">
16         </form>
17     </body>
18 </html>

　　输出结果：

搜索谷歌：

（12）输入类型：tel

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="action_page.php">
13             Telephone:
14             <input type="tel" name="usrtel">
15             <input type="submit">
16         </form>
17 
18         <p><b>注释：</b>Safari 8 及更新版本支持 type="tel"。</p>
19     </body>
20 </html>

　　输出结果：

Telephone:

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

（13）输入类型：url

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12         <form action="action_page.php">
13             请添加您的首页：
14             <input type="url" name="homepage">
15             <input type="submit">
16         </form>
17 
18         <p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p>
19     </body>
20 </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提交方式：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11         </script>
12         
13         <style type="text/css">
14         </style>
15 
16     </head>
17     
18     <body>
19         <form method="get">　　　　<!--等价于<form>，因为method属性默认为get方式-->
20             Username: <input type="text" name="Name">
21             Password: <input type="password" name="Pwd">
22             
23             <input type="submit">
24         </form>
25     </body>
26 </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 属性，此属性会指示出被送往服务器的内容。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12     
13         <p>您可以通过 selected 属性预选择某些选项。</p>
14         
15         <form action="/demo/demo_form.asp">
16             <select name="cars">
17                 <option value="volvo">Volvo</option>
18                 <option value="saab">Saab</option>
19                 <option value="fiat">Fiat</option>
20                 <option value="audi">Audi</option>
21             </select>
22             <br /><br />
23             <input type="submit" value="Submit"></input>
24         </form>
25         
26     </body>
27 </html>

　　输出结果：

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



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

 1 <form>
 2     <select name="" id="">
 3         <optgroup label="中国">
 4             <option value="1">上海</option>
 5             <option value="2" disabled="disabled">北京</option>            <!--置灰，不可选-->
 6             <option value="3" selected="selected">深圳</option>            <!--默认选中-->
 7         </optgroup>
 8         
 9         <optgroup label="外国">
10             <option value="4">美国</option>
11             <option value="5">英国</option>
12             <option value="6">法国</option>
13         </optgroup>
14     </select>
15 </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> 元素定义多行输入字段（文本域）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12     
13         <p>您可以通过 selected 属性预选择某些选项。</p>
14         
15         <form>
16             <!--<textarea></textarea>中间的内容即为textarea中显示的内容，保留空格-->
17             <textarea name="message" rows="10" cols="30">
18 　　　　　　　　　　The cat was playing in the garden.
19             </textarea>
20             
21         </form>
22         
23     </body>
24 </html>

　　输出结果：

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

5、HTML5 表单元素

　　HTML5 增加了如下表单元素：

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

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

6、HTML5 <datalist> 元素

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>        
12         <form action="/demo/demo_form.asp">
13             <input list="browsers" name="browser">
14             <datalist id="browsers">
15                 <option value="Internet Explorer">
16                 <option value="Firefox">
17                 <option value="Chrome">
18                 <option value="Opera">
19                 <option value="Safari">
20             </datalist>
21             <input type="submit">
22         </form>
23         
24     </body>
25 </html>

　　输出结果：

7、综合举例

 　　举例：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6         <meta http-equiv="Content-Language" content="zh-cn" />
  7         <title>My test page</title>
  8         
  9         <script src="jquery-3.3.1.js"></script>
 10 
 11     </head>
 12     
 13     <body>
 14         <form>
 15             <table>
 16                 <tr>
 17                     <td>用户名：</td>
 18                     <td><input type="text"></input></td>
 19                 </tr>
 20                 <tr>
 21                     <td>密码：</td>
 22                     <td><input type="password"></input></td>
 23                 </tr>
 24                 <tr>
 25                     <td>确认密码：</td>
 26                     <td><input type="password"></input></td>
 27                 </tr>                
 28                 <tr>
 29                     <td>请选择城市：</td>
 30                     <td>
 31                         <form action="">
 32                             <select name="citys">
 33                                 <option value="Shanghai">上海</option>
 34                                 <option value="Beijing">北京</option>
 35                                 <option value="Shenzhen">深圳</option>
 36                                 <option value="Hefei">合肥</option>
 37                             </select>
 38                         </form>
 39                     </td>
 40                 </tr>
 41                 <tr>
 42                     <td>请选择性别：</td>
 43                     <td>
 44                         <!-- <form> -->
 45                             <label for="male">Male</label>
 46                             <input type="radio" name="sex" id="male" />
 47                             <label for="female">Female</label>
 48                             <input type="radio" name="sex" id="female" />
 49                             <label for="uncertain">Uncertain</label>
 50                             <input type="radio" name="sex" id="uncertain" />
 51                         <!-- </form> -->
 52                     </td>
 53                 </tr>
 54                 <tr>
 55                     <td>请选择职业：</td>
 56                     <td>
 57                         <!-- <form> -->
 58                             学生<input type="radio" name="career">
 59                             教师<input type="radio" name="career">
 60                             其他<input type="radio" name="career">
 61                         <!-- </form> -->
 62                     </td>
 63                 </tr>
 64                 <tr>
 65                     <td>请选择爱好：</td>
 66                     <td>
 67                         <!-- <form> -->
 68                             <fieldset>
 69                                 <legend>你的爱好</legend>
 70                                     <label for="basketball">篮球</label>
 71                                     <input type="checkbox" name="hobby" id="basketball">
 72                                     <label for="run">跑步</label>
 73                                     <input type="checkbox" name="hobby" id="run">
 74                                     <label for="reading">阅读</label>
 75                                     <input type="checkbox" name="hobby" id="reading"> 
 76                                     <label for="surfTheInternet">上网</label>
 77                                     <input type="checkbox" name="hobby" id="surfTheInternet">                                         
 78                             </fieldset>
 79                         <!-- </form> -->
 80                     </td>
 81                 </tr>
 82                 <tr>
 83                     <td>备注：</td>
 84                     <td>
 85                         <!-- <form> -->
 86                             <input type="textarea" placeholder="这里是备注内容">
 87                         <!-- </form> -->
 88                     </td>
 89                 </tr>
 90                 <tr>
 91                     <td></td>
 92                     <td>
 93                         <input type="submit" value="提交">
 94                         <input type="reset" value="重置">
 95                     </td>
 96                 </tr>
 97             </table>
 98         </form>
 99         
100     </body>
101 </html>

 　　输出结果：

posted on 2018-10-14 11:26  zyjhandsome  阅读(2717)  评论(0)  编辑  收藏  举报