表单_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肯定不止是这么用的，但是目前···