HTML——表单及表单元素

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表（select）、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置。

• 表单元素

<input> 元素

最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性，可以变化为多种形态。

<select> 元素（下拉列表）

<select> 元素定义下拉列表：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

<label>元素标签

<label>： 用来管理表单中的文本，可以将文本与控件绑定在一起，从而增加了控件的受力面积。
语法：<label for="控件ID">文本</label>
主要属性:

for:设置该文本所关联的控件ID，关联后点击标签等同于点
击控件
id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。

<p>
    <input type="checkbox" id="c1">
    <label for="c1">我已阅读并自愿遵守此协议</label>
</p>

<textarea>文本域
相当于多行文本框
语法：
<textarea>文本</textarea>
主要属性：
cols：指定文本区域的列数
rows：指定文本区域的行数
readonly：只读

<p>
   简介:
   <textarea rows="10"cols="50">写点什么。。。</textarea>
</p>

 

 

• 表单控件——<input>元素中的，各个type属性值

1、文本框：<input type="text"/>
2、密码框：<input type="password"/>
主要属性：
（a）value属性：由访问者自由输入的任何文本
（b）maxlength属性：限制输入的字符数
（c）readonly属性：设置文本控件只读
（d）name属性：当提交form时，name作为元素标识被发送到服务器
3、单选框：<input type="radio"/>
4、复选框：<input type="checkbox"/>
主要属性
（a）value：文本，当提交form时，如果选中了此按钮，那么value就被发送到服务器
（b）name：用于实现分组，一组单选框或者复选框的名称必须相同
（c）checked：设置选中

5、隐藏域：<input type="hidden"/>
在表单中包含不希望用户看见的信息

6、文件选择框：<input type="file"/>
选择要上传的文件

如果牵扯到了上传文件，那么我们要在form表单中设置一个属性:

enctype="multipart/form-data"

7、提交按钮：<input type="submit"/>
传送表单数据给服务器端或其它程序处理
8、重置按钮：<input type="reset"/>
清空表单的内容并把所有表单控件设置为最初的默认值
9、普通按钮：<input type="button"/>
用于执行客户端脚本，没有任何功能，需通过js定义功能。
主要属性：
value:按钮的名字