HTML表单用法
HTML表单
- HTML 表单用于搜集不同类型的用户输入。
- 表单是一个包含表单元素的区域。
- 使用
<form>定义表单
<form>
.
form elements
.
</form>
-
<form>元素有一些常用属性- Action 属性
action属性定义在提交表单时执行的动作，比如，一般提交表单会将表单提交到某个服务器上，可以这样写
<form action="action_page.php">
action属性的值可以是绝对URL，也可以是相对URL。如果省略 action 属性，则 action 会被设置为当前页面。
- Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
<form action="action_page.php" method="GET">
或
<form action="action_page.php" method="POST">
- Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。name属性是对提交到表单的数据的一个标识，表单元素（诸如
<input>等）只有设置了name属性，才能在提交表单的时候传递他们的值。
表单元素
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、单选框(radio-buttons)、复选框(checkboxes)等等。
-
<input>元素
<input>是最重要的表单元素，type属性决定其类型。最常用到的有以下几种
| 标签 | 作用 |
|---|---|
| <input type="text" /> | 创建单行文本域，用户可以在文本域中输入文本 |
| <input type="password" /> | 定义密码字段，密码字段中的字符会被掩码（显示为星号或原点） |
| <input type="checkbox" /> | 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。 |
| <input type="radio" /> | 创建单选按钮单选按钮允许用户选取给定数目的选择中的一个选项 |
| <input type="button" /> | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本） |
| <input type="hidden" /> | 定义隐藏的输入字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改 |
| <input type="image" src="#" alt="#" /> | 定义图像形式的提交按钮 |
| <input type="file" /> | 定义输入字段和 "浏览"按钮，供文件上传 |
| <input type="reset" /> | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| <input type="submit" /> | 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面 |
<input>元素有一些常用的属性
| 属性 | 作用 | 实例 |
|---|---|---|
| value | 规定输入字段的初始值 | <input type="text" name="firstname" value="John"> |
| readonly | readonly 属性规定输入字段为只读（readonly属性不需要值） | <input type="text" name="firstname" value="John" readonly> |
| disabled | disabled 属性规定输入字段是禁用的，即不可用和不可点击的。被禁用的元素不会被提交。（disabled属性不需要值） | <input type="text" name="firstname" value="John" disabled> |
| maxlength | maxlength 属性规定输入字段允许的最大长度 | <input type="text" name="firstname" maxlength="10"> |
还有一些H5新增的常见属性，像placeholder、autofocus、required、autocomplete等等。
-
<select>元素（下拉列表）-
<select>元素用来创建下拉列表。 -
<select>元素中的<option>标签定义了列表中的可用选项。 - 加selected 属性来定义预定义选项
-
实例：
<select name="cities">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Guangzhou">广州</option>
</select>
-
<textarea>元素
<textarea> 元素定义多行输入字段（文本域）
-
<button>元素
<button> 元素定义可点击的按钮
还有很多其他的常用元素，包括一些H5元素，如<datalist>，<output>等等。
