一:HTML 表单
HTML 表单用于搜集不同类型的用户输入。
<form>元素
HTML 表单用于收集用户输入。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input>元素
<input>元素是最重要的表单元素。
<input>元素有很多形态,根据不同的 type 属性。 这是本章中使用的类型:
文本输入
<input type="text">定义用于文本输入的单行输入字段:
<form>
First name:<br/>
<input type="text" name="firstname"><br/>
Last name:<br/>
<input type="text" name="firstname">
</form>
单选按钮输入
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一:
实例:
提交按钮
< input type="submit">定义用于向表单处理程序(form-handler)提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:
实例
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
在上面的例子中,指定了某个服务器脚本来处理被提交表单:<form action="action_page.php">
如果省略 action 属性,则 action 会被设置为当前页面。
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="action_page.php" method="GET">
或:<form action="action_page.php" method="POST">
Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。
本例只会提交 "Last name" 输入字段:
实例
二:HTML 表单元素
<input>元素
最重要的表单元素是<input>元素。
<input>元素根据不同的 type 属性,可以变化为多种形态。
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。 您能够通过添加 selected 属性来定义预定义选项。
实例:<option value="fiat" selected>Fiat</option>
<textarea> 元素
<textarea>元素定义多行输入字段(文本域):
<button> 元素定义可点击的按钮:
实例
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Click Me!
HTML5 输入类型
HTML5 增加了多个新的输入类型:
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。详细了解
HTML input属性
value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读(不能修改),readonly 属性不需要值。它等同于 readonly="readonly"。
disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。disabled 属性不需要值。它等同于 disabled="disabled"。
size 属性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