1. 什么是HTML表单
定义：用于搜集不同类型的用户输入。
2.HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
-
<input>元素有很多形态，根据不同的 type 属性。
-
文本输入
<input type="text">定义用于文本输入的单行输入字段
单选按钮输入
<input type="radio">定义单选按钮，允许用户在有限数量的选项中选择其中之一。
- 提交按钮
<input type="submit">用于向表单处理程序（form-handler）提交表单的按钮
表单处理程序通常是包含用来处理输入数据的脚本服务器页面
表单处理程序在表单的action属性中指定
- 下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option>元素定义带选择的选项，列表通常会把首个选项显示为被选选项，可以通过添加selected属性来定义预定义选项。
<option value="fiat" selected>Fiat</option>
- 文本域（多行字段输入）
<textarea>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
-
点击按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button> -
HTML5 增加的表单元素<datalist>,为<input>元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<!DOCTYPE html>
<html>
<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>
- HTML5 增加的表单元素 <output> ,执行计算然后在 <output>元素中显示结果
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 <input type="range" id="a" value="50"> 100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
- HTML5 增加的表单元素 <keygen> ,规定用于表单的密钥对生成器字段。当提交表单时，私钥存在本地，公钥发送到服务器。
3.HTML 输入类型
- <input type = "text"> 定义文本输入，单行输入字段。
- <input type = "password"> 定义密码字段。
- <input type = "submit"> 定义提交表单数据至提交表单处理程序的按钮。
- <input type = "radio"> 定义单选按钮。
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</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"> 定义按钮
HTML5 增加了多个新的输入类型
- <input type = "number">只能输入数字值
- <input type = "date">用于应该包含日期的输入字段
- <input type = "color">用于应该包含颜色的输入字段
- <input type = "range">用于一定范围内的值得输入字段
- <input type = "month">允许用户选择月份和年份
- <input type = "week">允许用户选择周和年
- <input type = "time">允许用户选择时间（无时区）
- <input type = "datetime">允许用户选择日期和时间（有时区）
- <input type = "datetime-local">允许用户选择日期和时间（无时区）
- <input type = "email">用于应该包含电子邮件地址的输入字段
- <input type = "search">用于搜索字段（搜索字段的表现类似常规文本字段）
- <input type = "tel">用于应该包含电话号码的输入字段。只有 Safari 8 支持 tel 类型。
- <input type = "url">用于应该包含 URL 地址的输入字段
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的 通常做法是使用提交按钮。
通常，表单会被提交到web服务器上的网页。
Method 属性
method 属性规定在提交表单时所用的HTTP方法（GET或POST）
<form action="action_page.php" method="GET">
或
<form action="action_page.php" method="POST">
何时使用GET
- 表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
- 少量数据提交，浏览器会设定容量限制。
合适使用POST
- 表单正在更新数据，或者包含敏感信息（如密码）
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性
HTML Form 属性
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）(提交页面)。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的HTTP方法。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
3. HTML输入属性
- value 规定输入字段的初始值
- readonly 规定输入字段为只读（不能修改）
- disabled 规定输入字段是禁用的，不可用和不可点击的，被禁用的元素不会被提交
- size 规定输入字段的尺寸
- maxlength 规定输入字段允许的最大长度
网友评论