目录
表单
HTML 表单用于搜集不同类型的用户输入。
form 元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单：
<form action="action_page.php">
如果省略 action 属性，则 action 会被设置为当前页面
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
或：
<form action="action_page.php" method="POST">何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 "Last name" 输入字段：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>
</body>
</html>
下面是 <form> 属性的列表：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
input 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
type:text文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 
输入类型：type:password
<input type="password"> 定义密码字段：
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 
单选按钮输入type="radio"
<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
<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> 定义按钮。
<input type="button" οnclick="alert('Hello World!')" value="Click Me!">
输入类型：type=number
<input type="number"> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。
输入类型：type=date
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。
<form>
Birthday:
<input type="date" name="bday">
</form>
输入类型：type=color
<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>输入类型：time
<input type="time"> 允许用户选择时间（无时区）。
根据浏览器支持，时间选择器会出现输入字段中。
<form>
Select a time:
<input type="time" name="usr_time">
</form>input属性
value 属性
value 属性规定输入字段的初始值：
<form action="">
First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 
readonly 属性
readonly 属性规定输入字段为只读（不能修改）：
readonly 属性不需要值。它等同于 readonly="readonly"。
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
size 属性
size 属性规定输入字段的尺寸（以字符计）
maxlength 属性
maxlength 属性规定输入字段允许的最大长度
autofocus 属性
autofocus 属性是布尔属性。
如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
height 和 width 属性
height 和 width 属性规定 <input> 元素的高度和宽度。
height 和 width 属性仅用于 <input type="image">。
注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
min 和 max 属性
min 和 max 属性规定 <input> 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
扫一扫
62万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
