day008:HTML表单标签（1）

一、表单标签：

1.表单标签格式：

<form>

<input  type="" name="" value=''''  />

</form>

（注：<form>的属性在下一节内容介绍）

2.属性及其属性值介绍：

（1）type属性：类型。属性值为：

       type="text"   普通的文本框

       type="passward"  密码框

       type="radio"  单选按钮  

    （可与<lable></lable>同用，扩大选项的可选择范围（即本来要点击选项前的圆点才能选上，现在也可以点击选项文本也可选上））

       type="checkbox"  多选按钮

       type="reset"  重置数据

       type="submit"  提交表单

       type="file" 添加文件

      type="hidden" 隐藏组件

      type="image"  图片（与type="submit"作用相同，但可以附加图片，写法为：<input   type="image" src=''''  />）

      type="button" 按钮（value值是显示的文字；一般与js联合使用，用于绑定事件）

（2）name属性：名称。属性值为用户所输入的内容。

（3）value属性：值。input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的。

当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本。

当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）。

当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值。

当 type 的取值为 image 时，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器。

type="checkbox" 时，其 value 属性的值表示在复选框呈勾选状态时提交给服务器的数据值，默认为 on。

type="image" 定义图像形式的提交按钮，此时必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用（alt 属性表示图片未正常显示时，用于替换图片的提示；如果不写这个属性，当图片未正常显示时，会默认显示提交这两个字）。
 

（4）声明选择框：

 <select name=''''>

<option value=''''></option>

</select>

（注意！name属性必须写在select里，value属性必须写在option里；选择框也可以设置默认值，即<option value="" selected="selected"></option>，该选择项就会被设置为默认值）

（5）文本域（即可输入文本内容的一块区域）：

<textarea rows="" cols="" name=""></testarea>

rows表示行，cols表示列，二者控制文本框的大小。

若加上readonly属性，则文本只能阅读，不能被修改。

注：

checkbox 型的 input 标签的不足之处在于：提交表单时，只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说，如果没有任何一个复选框被选中，那么服务器就不会收到与其相关的数据项。当设置 input 标签的 type 属性值为checkbox 或者 radio 时，必须同时设置 input 标签的 value 属性。当 type="file" 时，不能使用 value 属性

---

二、代码示例：

创建一个表单，代码如下：

 输出结果如下图：

 注：checked="checked"：代表默认选择。例如在“选择性别”一行代码中加入checked="checked"，则输出结果默认选择是“男”（可以自行点击选择女）

例子如图：

 输出结果如下图：

以下截图为：上传附件、隐藏组件、声明选择框、文本域的运用：

代码为：

运行结果为：

 当选择框设置了默认值后，运行结果为：