HTML表单

```javascrip<input type ="text">``` 文本框

  特点: 单行  ,用户可以 在其中输入 文本内容

只读 文本框 :

在文本框 中 加入 属性 readonly="readonly" , 一般用于 某些 不可修改的信息 的展示

```<input type="password"> ``` 密码框

  特点: 输入时 不显示 具体内容 , 安全性较高

```<input type="submit">```  提交按钮

 特点: 点击该按钮后, 会自动 提交 该按钮 所在的 <form> 表单

 表单会被提交到 后台服务器 , 通过 <form>的 action 属性 指定 提交到服务器的url地址

```<input type="hidden">``` 隐藏域

使用场景: 希望表单 向后台提交 某个数据(比如编号), 但又不希望 在表单中 显示给用户

 ```<textarea> </textarea>``` 文本域

  一般用来 填写 评论,回复 , 描述

  适合于 填写 大量 文本 (多行文本) 

  尺寸 具体根据 实际 需要 限定

```<input type="button">```  普通按钮

  不同与 提交按钮, 点击该按钮后, 不会 触发 表单的提交

  可以借助于该类 按钮 实现 "取消"按钮的功能 

  注意: 一个表单中 只需要 一个 submit (提交)按钮 , 但普通按钮可以有多个

 ```<input type="reset">``` 重置按钮

  点击该按钮, 会将 表单元素的 值 还原到 初始状态 (注意: 不一定是清空表单元素的值 )   

  表单元素的 初始值 可以通过 value 属性进行 预设

 ```<input type="image" src="图片路径">``` 图片按钮

 ```<input type="checkbox"> ```复选框

  用户可以勾选一个 , 也可勾选多个

```<input type="radio">```  单选按钮

  一组单选按钮 是 互斥的, 只能选中其中一个

  name属性值 相同的 单选 按钮 为 一组 , 组内互斥 , 组与组之间 不互斥   

 ```<select> 

    <option> </option>

</select>

```

 <option> 下拉框

下拉框 子标签 

一个 <select> 往往 包含多个 <option>

下拉框 和 文本框 对比:

下拉框 减少了 用户的 输入 , 同时 保证了 数据的 准确性

只适用于 值得种类 是有限的 , 比较少

<option> 的 value属性 一般 设置为 具体的编号 (比如 省份编号, 部门编号, 年级编号...)

而 <option> </option> 之间的 文本 只用作 方便 用户 阅读-选择

默认选中问题:

1.下拉框默认选中某一项 :  在 默认要选中的 option 中加入 属性selected="selected"

2.复选框 默认勾选某几项 : 在要默认勾选的复选框中加入属性 checked="checked"

3.单选按钮 默认选中某一项: 在要 默认点选的 单选按钮中 加入属性 checked="checked" 

禁用 表单元素

在表单元素 中加入 disabled="disabled" , 可以禁用文本框, 可以禁用 按钮 , 复选框 ...

特点: 禁用之后, 元素的值 将 不再参与 表单的提交 , 不再 向 后台服务器 发送 该禁用元素的 值

常见的应用场景 : 用户修改密码时, 先要求输入旧密码 , 在旧密码 正确输入之前, 确认修改 按钮 处于 disabled 状态

                  旧密码输入正确时, 通过 JavaScript 将 按钮的 disabled 属性 移除

<label>标签

用于 标记 某个 文本框 , 通过 label的 for属性 指向 对应文本框的 id属性值 , 以此 建立起 label 和 文本框的 关联关系

点击 label , 其 绑定的 文本框 自动获取 焦点 , 增大 用户 鼠标 点击的 命中率