Web开发——HTML基础(HTML表单/下拉列表/多行输入)
参考:
目录:
- 1、<form> 元素
- 1.1 <input> 元素(输入属性)
- (1)属性包括
- (2)HTML5 <input>元素属性
- 1.2 文本输入
- 1.3 密码输入
- 1.4 单选按钮输入
- 1.5 复选按钮Checkbox
- 1.6 提交按钮
- 1.7 <button> 元素
- 1.8 HTML5新增输入类型
- 1.1 <input> 元素(输入属性)
- 2、HTML <Form> 提交方法属性(需要指定name属性)
- 3、<select> 元素(下拉列表)
- 4、<textarea> 元素
- 5、HTML5 表单元素
- 6、HTML5 <datalist> 元素
- 7、综合举例
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⭐ |
|
规定是否启用表单的自动完成功能。 |
enctype | 见说明 |
规定在发送表单数据之前如何对其进行编码(如X进制)。 enctype 属性可能的值:
|
(见本文第2节说明) |
|
规定用于发送 form-data 的 HTTP 方法。 |
name | form_name | 规定表单的名称。 |
novalidate⭐ | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
target |
|
规定在何处打开 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>
输出结果:
注释:默认地,image 输入类型会发生点击图像按钮时的 X 和 Y 坐标。
(2)HTML5 <input>元素属性
属性 | 值 | 描述 |
---|---|---|
accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
align |
|
不赞成使用。规定图像输入的对齐方式。 |
alt | text | 定义图像输入的替代文本。 |
autocomplete⭐ |
|
规定是否使用输入字段的自动完成功能。 |
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⭐ |
|
覆盖表单的 method 属性。 (适用于 type="submit" 和 type="image") |
formnovalidate⭐ | formnovalidate |
覆盖表单的 novalidate 属性。 如果使用该属性,则提交表单时不进行验证。 |
formtarget⭐ |
|
覆盖表单的 target 属性。 (适用于 type="submit" 和 type="image") |
height⭐ |
|
定义 input 字段的高度。(适用于 type="image") |
list⭐ | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
max⭐ |
|
规定输入字段的最大值。 请与 "min" 属性配合使用,来创建合法值的范围。 |
maxlength⭐ | number | 规定输入字段中的字符的最大长度。 |
min⭐ |
|
规定输入字段的最小值。 请与 "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⭐ |
|
规定 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⭐ |
|
定义 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>
输出结果:
注释:表单本身并不可见。还要注意文本字段的默认宽度是 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新增输入类型
<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>
输出结果:
根据浏览器支持:
数值约束会应用到输入字段中。
注释:IE9 及早期版本不支持 type="number"。
<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>
输出结果:
根据浏览器支持:
当您填写输入字段时会弹出日期选择器。
注释:Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date"。
<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.
注释:type="color" is not supported in Internet Explorer.
<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" 可显示为滑动控件。
注释:IE9 及早期版本不支持 type="range"。
<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"。
<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>
输出结果:
根据浏览器支持:
当您填写输入字段时会弹出日期选择器。
注释: Internet Explorer 不支持 type="week"。
<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"。
<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"。
<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"。
<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>
输出结果:
注释:IE9 及更早版本不支持 type="email"。
<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>
输出结果:
搜索谷歌:
<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>
输出结果:
注释:Safari 8 及更新版本支持 type="tel"。
<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节说明) |
|
规定用于发送 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⭐ |
|
规定当在表单中提交时,文本区域中的文本如何换行。 |
提示:可以通过 <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 阅读(2785) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库