表单_HTML

HTML表单_输入元素

• 大多数状况被用到的表单标签是输入标签
• 输入类型是由类型属性（type）定义的。

表单中的单选按钮能够设置如下几个属性：value、name、checked

• value：提交数据到服务器的值（后台程序PHP使用）
• name：为控件命名，以备后台程序 ASP、PHP 使用
• checked：当设置 checked时，该选项被默认选中
• selected:同上，可是好像是列表专用的

经常使用的表单元素类型以下：

文本域（Test Fields）

文本域经过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。 文本域为只有一行的文本框，效果以下：

<form>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</form>

account_ :
password:

• 能够经过将input type的值改成password来说文本域改成密码字段专用（即输入不可见 **或···）

文本框

<textarea rows="4" cols="30">
我是一个文本框。rows为行数，cols为列数
</textarea>

我是一个文本框。rows为行数，cols为列数

按钮

<form action="">
<input type="button" value="This is a button">这个按钮下什么都没有
</form>

这个按钮下什么都没有

单选按钮和复选框（Radio Buttons ,ChackBoxes）

<input type="radio">

<input type="checkbox">

<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Male
Female

I have a bike
I have a car

• 同一个name属性的单选框为一组,同一组的按钮才能起到单选的做用

select选择列表

<form action="">
<select name="cars">
<option value="null">请选择性别</option>
<optgroup label="正常">
<option value="1">男</option>
<option value="2">女</option>
<optgroup label="特殊">
<option value="3" selected>不详</option>
</select>
</form>

请选择性别 男 女 不详

• <optgroup label="分组名称"> 列表选项分组（标签）（不可作为选项之一，只作分组之用）
• 无需多余解释，代码便可
• 可在option标签中 添加selected元素即为预选项，如没有，则默认为第一个option

提交按钮(Submit Button)

<input type="submit">定义了提交按钮.

顾名思义，提取表单中的数据到某处

• 当用户单击确认按钮时，表单的内容会被传送到另外一个文件。表单的动做属性定义了目的文件的文件名。由动做属性定义的这个文件一般会对接收到的输入数据进行相关的处理。

重置按钮

<input type="reset">定义重置按钮

• 点击以后会将重置按钮所在的表单中填写的内容从新设置为默认值。

<input type="reset" name="button" id="button" value="重置">

表单

在表单周围添加边框

<form>
<fieldset>
<legend>边框上的文字:</legend>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</fieldset>
</form>

边框上的文字:

account_ :
password:

<label>标签

表单内的 标签没有什么特殊的效果 ，只是在用鼠标点击标签时会触发旁边的

控件（好比单选框）但须要label的for属性等于input的id属性

for属性可把 label 绑定到另一个元素。请把for属性的值设置为相关元素的id属性的值。

• label确定不止是这么用的，可是目前···