HTML学习笔记（五）--表单

HTML 表单用于搜集不同类型的用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

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

基本表单元素

<form> 元素
HTML 表单用于收集用户输入。
文本输入

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

单选按钮输入

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

提交按钮

<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> 

<select> 元素（下拉列表）

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>//预选定
<option value="audi">Audi</option>
</select>

<button> 元素

<button type="button" onclick="alert('Hello World!')">点击我！</button>

HTML5 表单元素

HTML5 增加了如下表单元素：
<datalist>
<keygen>
<output>

<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

类型

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

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</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> 

HTML5 增加了多个新的输入类型

HTML5 增加了多个新的输入类型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
老式 web 浏览器不支持的输入类型，会被视为输入类型 text

<input type=”number”> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

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

<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>
&lt;

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

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

<input type=”range”> 用于应该包含一定范围内的值的输入字段。min、max、step、value

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

<input type=”month”> 允许用户选择月份和年份
<input type=”week”> 允许用户选择周和年。
<input type=”time”> 允许用户选择时间（无时区）。
<input type=”datetime”> 允许用户选择日期和时间（有时区）。
<input type=”datetime-local”> 允许用户选择日期和时间（无时区）
<input type=”email”> 用于应该包含电子邮件地址的输入字段。
<input type=”tel”> 用于应该包含电话号码的输入字段。
<input type=”search”> 用于搜索字段（搜索字段的表现类似常规文本字段）。
<input type=”url”> 用于应该包含 URL 地址的输入字段。

输入属性

input属性
value 属性规定输入字段的初始值：
readonly 属性规定输入字段为只读（不能修改）：
disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的
size 属性规定输入字段的尺寸（以字符计）：
maxlength 属性规定输入字段允许的最大长度：

HTML5 增加的属性

HTML5 为 <input> 增加了如下属性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step
并为 <form> 增加如需属性：
autocomplete
novalidate

1、autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值
2、novalidate 属性属于 <form> 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证
3、autofocus 属性是布尔属性。如果设置，则规定当页面加载时 元素应该自动获得焦点。
4、form 属性规定 <input> 元素所属的一个或多个表单
5、formaction 属性规定当提交表单时处理该输入控件的文件的 URL。formaction 属性覆盖 <form> 元素的 action 属性。
6、formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=”post” 的表单）。formenctype 属性覆盖 <form> 元素的 enctype 属性
7、formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。formmethod 属性覆盖 <form> 元素的 method 属性。
8、novalidate 属性是布尔属性。如果设置，则规定在提交表单时不对 <input> 元素进行验证。
9、formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
10、formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。formtarget 属性会覆盖 <form> 元素的 target 属性。
11、height 和 width 属性规定 <input> 元素的高度和宽度。height 和 width 属性仅用于 <input type=”image”>。
12、list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
13、min 和 max 属性规定 <input> 元素的最小值和最大值。min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
14、multiple 属性是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。
15、pattern 属性规定用于检查 <input> 元素值的正则表达式。pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
16、placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
17、required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。step 属性规定 <input> 元素的合法数字间隔。提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。