Document

输入类型 form_input_types

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

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

<input type="password"> 定义密码字段

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
password 字段中的字符会被做掩码处理

<input type="submit"> 定义提交表单数据至表单处理程序的按钮
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本，一般是"提交"，这样做会比较low

<input type="radio"> 定义单选按钮
Radio buttons let a user select ONLY ONE of a limited number of choices

<form action="/demo/demo_form.asp">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br><br>
<input type="submit">
</form>

<input type="checkbox"> 定义复选框
复选框允许用户在有限数量的选项中选择零个或多个选项
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<input type="button"> 定义按钮
<input type="button" onclick="alert('Hello World')" value="Click Me Please!">

HTML5 新增输入类型

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
  老式web浏览器不支持则会视为text

<input type="number"> 用于应该包含数字值的输入字段
能够对数字做出限制
<form action="/demo/demo_form.asp">
  Quantity 数量 (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
列出了一些常用的输入限制（其中一些是 HTML5 中新增的）:
- disabled - 规定输入字段应当禁用 
- max - 规定输入字段最大值
- maxlength - 规定输入字段最大字符数
- min
- pattern - 规定通过其检查输入值的正则表达式
- readonly - 规定输入字段为只读
- required - 规定输入字段为必需
- size - 规定输入字段宽度
- step - 规定输入字段合法数字间隔
- value - 规定输入字段默认值

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

<input type="date"> 用于应该包含日期的输入字段
根据浏览器支持，日期选择器会出现输入字段中
<form>
	Birthday:
	<input type="date" name="birthday">
</form>

可以向输入添加限制
<form>
  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>
</form>

<input type="color"> 用于应该包含颜色的输入字段
根据浏览器支持，颜色选择器会出现输入字段中
<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>

<input type="range"> 用于应该包含一定范围内的值的输入字段
根据浏览器支持，输入字段能够显示为滑块控件
<form action="/demo/demo_form.asp" method="get">
	Points:
	<input type="range" name="points" min="0" max="10">
	<input type="submit">
</form>
能够使用如下属性来规定限制：min、max、step、value

<input type="month"> 允许用户选择月份和年份
Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="month"
<input type="week"> 允许用户选择周和年
Internet Explorer 不支持 type="week"
<input type="time"> 允许用户选择时间（无时区）
Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="time"
<input type="datetime"> 允许用户选择日期和时间（有时区）
Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"
<input type="datetime-local"> 允许用户选择日期和时间（无时区）
Firefox 或者 Internet Explorer 不支持 type="datetime-local"
<input type="email"> 用于应该包含电子邮件地址的输入字段
IE9 及更早版本不支持 type="email"
<form action="/demo/demo_form.asp">
	E-mail:
	<input type="email" name="email">
	<input type="submit">
</form>

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）
<form action="/demo/demo_form.asp">
	Google Search:
	<input type="search" name="googlesearch">
	<input type="submit">
</form>

<input type="tel"> 用于应该包含电话号码的输入字段
<form action="action_page.php">
	Telephone:
	<input type="tel" name="urltel">
	<input type="submit">
</form>

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

Input 属性 form_attributes

value 属性规定输入字段的初始值
<form action="">
First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

readonly 属性规定输入字段为只读（不能修改）
<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

disabled 属性规定输入字段是禁用的
被禁用的元素是不可用和不可点击的
被禁用的元素不会被提交
<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

size 属性规定输入字段的尺寸（以字符计）？
maxlength 属性规定输入字段允许的最大长度

HTML5属性
HTML5为<input>增加了许多属性:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern(regexp) 正则
- placeholder
- required
- step

autocomplete 属性规定表单或输入字段是否应该自动完成
您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off

autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

novalidate 属性属于 <form> 属性

autofocus 属性是布尔属性
如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点
<form action="demo_form.asp">
	First name: <input type="text" name="fname" autofocus><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit">
</form>

form 属性规定 <input> 元素所属的一个或多个表单
如需引用一个以上的表单，请使用空格分隔的表单 id 列表
输入字段位于 HTML 表单之外（但仍属表单）
<form action="action_page.php" id="form1">
	First name: <input type="text" name="fname"><br>
	<input type="submit" value="Submit it">
</form>

Last name: <input type="text" name="lname" form="form1">
下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分

formaction 属性规定当提交表单时处理该输入控件的文件的 URL
formaction 属性覆盖 <form> 元素的 action 属性
formaction 属性适用于 type="submit" 以及 type="image"

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

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码
仅针对 method="post" 的表单
formenctype 属性覆盖 <form> 元素的 enctype 属性
formenctype 属性适用于 type="submit" 以及 type="image"

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

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法
formmethod 属性覆盖 <form> 元素的 method 属性
formmethod 属性适用于 type="submit" 以及 type="image"

novalidate 属性是布尔属性
如果设置，则规定在提交表单时不对 <input> 元素进行验证
formnovalidate 属性覆盖 <form> 元素的 novalidate 属性
formnovalidate 属性可用于 type="submit"
<form action="/example/html5/demo_form_asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" formnovalidate="formnovalidate" value="进行未验证的提交" />
</form>

formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应
formtarget 属性会覆盖 <form> 元素的 target 属性
formtarget 属性可与 type="submit" 和 type="image" 使用

height 和 width 属性规定 <input> 元素的高度和宽度
height 和 width 属性仅用于 <input type="image">
浏览器不清楚图像尺寸，则页面会在图像加载时闪烁
请始终规定图像的尺寸

<form action="/example/html5/demo_form.asp" method="get">
	First name: <input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	<input type="image" src="/i/eg__submit.jpg" alt="Submit" width="128" height="128"/>
</form>
>默认地，image 输入类型会发送点击图像按钮时的 X 和 Y 坐标

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
这一点在前面的冒险中也遇到过相同的，也即 <input> list搭配 <datalist>
<form action="/action_page.php">
	<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" value="Submit">
</form>

min 和 max 属性规定 <input> 元素的最小值和最大值
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week

multiple 属性是布尔属性
如果设置，则规定允许用户在 <input> 元素中输入一个以上的值
multiple 属性适用于以下输入类型：email 和 file
Select images: <input type="file" name="img" multiple>

pattern 属性规定用于检查 <input> 元素值的正则表达式
pattern 属性适用于以下输入类型：text、search、url、tel、email、and password
<form action="/example/html5/demo_form.asp" method="get">
国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
title="三个字母的国家代码" />
<input type="submit" />
</form>
请使用全局的 title 属性对模式进行描述以帮助用户

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
该提示会在用户输入值之前显示在输入字段中
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password
<input type="text" name="fname" placeholder="First name">

required 属性是布尔属性
如果设置，则规定在提交表单之前必须填写输入字段
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
Username: <input type="text" name="usrname" required>

step 属性规定 <input> 元素的合法数字间隔