HTML表单用法

[Leon68]

简介

参考
HTML表单是一个包含表单元素的区域，用来收集用户输入的内容并提交。
表单使用标签

来设置。

Form标签属性

• action 必需的 action 属性规定当提交表单时，向何处发送表单数据。
  绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
  相对 URL - 指向站点内的文件（比如 src="example.htm"）
• method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
  表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。
• target 属性规定在何处打开 action URL。(在 HTML 4.01 中，不赞成使用 form 元素的 target 属性；在 XHTML 1.0 Strict DTD 中，不支持该属性。)

target值：

值	描述
_blank	在新窗口中打开。
_self 默认	在相同的框架中打开。
_parent	在父框架集中打开。
_top	在整个窗口中打开。
framename	在指定的框架中打开。

• enctype 规定在发送表单数据之前如何对其进行编码(post数据提交方式）参考。

enctype 属性可能的值：

application/x-www-form-urlencoded 默认
multipart/form-data 一般用来上传文件(视频、音频等）
text/plain 不常用

• name 规定表单的名称。

表单包含的标签及使用

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 textarea、select、fieldset、legend 和 label 元素。

1.input标签

input标签使用不同的type属性值来实现不同类型。

type值	input作用
text	单行文本输入
password	密码输入，字符会被掩码
radio	单选框
checkbox	复选框
file	文件上传
submit	提交
reset	重置
button	定义可点击的按钮
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮

2. label标签

标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

3.textarea标签

<textarea> 标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。 ``` <textarea rows="3" cols="20"></textarea>

### 4.fieldset和legend 标签
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。

health information height: weight: ```

5.select标签

select 元素可创建单选或多选菜单。
<select> 元素中的<option>标签用于定义列表中的可用选项。

select属性：

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>