HTML表单

Dear 丶 2022-05-27 09:42 270阅读 0赞

表单元素本身是指`<form>`，不过它也有一个更广泛的概念，指构成表单的所有元素。

首先就`<form>`元素本身来说，主要有两个属性（暂时不用细究，到后面我们还有详细说明）：

*  action：表示表单数据所提交到的处理地址（如果不知道处理地址，可先用`#`表示）
 *  method：表示提交内容的方式，默认取值为 get，可以设置为 post

接下来将会简单介绍几种form表单常用元素。在介绍表单常用元素之前，先说下一般它们都通用的几个属性：

*  name：表示字段名称
 *  value：表示字段值（最后提交的表单数据就是所有的字段值）
 *  disabled：表示字段是否禁用，该属性可以不用设置值，加上该属性即表示禁用
 *  readonly：表示字段是否只读，该属性可以不用设置值，加上该属性即表示只读

更多可参考：

*  [form W3school][]
 *  [form MDN][]（页面下面有其相关元素参考）
 *  [表单属性浅析][Link 1]

下面正式介绍一些常用的表单元素，里面涉及到的所有的示例皆可[在线预览][Link 2]。

### `<input>`元素 ###

`<input>`元素跟`<img>`元素一样，不需要闭合标签。除了上面说到的通用属性外，其常见属性如下：

*  type：必备属性，常见取值如下：
    
     *  text：文本输入框
     *  password：密码输入框
     *  search：搜索框
     *  number：数字输入框
     *  radio：单选按钮
     *  checkbox：复选框
     *  hidden：隐藏域（页面不可见，用来保存数据等）
     *  file： 上传文件
     *  button：普通按钮
     *  submit：提交按钮
     *  reset：重置按钮
 *  placeholder：如为输入框时，可设置该属性，在输入框中灰色显示提示信息

更多 input 请参考：

*  [input W3school][]
 *  [input MDN][]

### `<textarea>`元素 ###

用于多行文本输入，如上面的新浪微博截图中的发表微博就是个多行文本输入框，我们常用的评论输入框也是这个。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过等我们学了 CSS 之后，更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。

简单示例如下：

更多 textarea 请参考：

*  [textarea W3school][]
 *  [textarea MDN][]

### `<select>`元素 ###

用于创建选项菜单，默认只能选择一个值，可通过设置属性`multiple="multiple"`来实现多选（很少很少使用多选）。

其选项为`<option>`元素，常用有两个属性：

*  value：表示选中该选项的值。

*  selected： 表示默认选中。

更多 select 请参考：

*  [select W3school][]
 *  [select MDN][]

### `<button>`元素 ###

`<button>`元素用来定义按钮，跟 input 定义的按钮不同，这个是有闭合标签的。简单示例如下：

<button>我是个普通按钮</button>

同样也可以通过设置 type 属性来实现提交按钮和重置按钮，不过不建议这么做。

<button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>

一般对于提交与重置按钮，我们建议使用 input 来定义，对于普通按钮可以使用 button。

更多 button 请参考：

*  [button W3school][]
 *  [button MDN][]

### `<label>`元素 ###

`<label>`元素用于关联表单元素的标题，可直接包裹表单元素，也可以通过设置其 for 属性关联到表单元素的 id 属性，这样点击 label 标题上关联的表单元素就可以自动获取焦点，提升用户体验。

简单示例如下：

<label>用户名：<input type="text"></label>
    
    
    <label for="username">用户名：</label><input type="text" id="username">

更多 label 请参考：

*  [label W3school][]
 *  [label MDN][]

### 更多参考 ###

更多关于表单元素知识请参考：[HTML5中的表单元素][HTML5]。

[form W3school]: http://www.w3school.com.cn/tags/tag_form.asp
[form MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
[Link 1]: http://blog.mingsixue.com/it/HTML-form-attribute.html
[Link 2]: http://coding.imweb.io/demo/p1/form.html
[input W3school]: http://www.w3school.com.cn/html/html_form_attributes.asp
[input MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
[textarea W3school]: http://www.w3school.com.cn/tags/tag_textarea.asp
[textarea MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea
[select W3school]: http://www.w3school.com.cn/tags/tag_select.asp
[select MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select
[button W3school]: http://www.w3school.com.cn/tags/tag_button.asp
[button MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
[label W3school]: http://www.w3school.com.cn/tags/tag_label.asp
[label MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label
[HTML5]: http://www.jianshu.com/p/1be42a9dda69