HTML表单元素、表单控件
HTML工作原理
HTML是部署在服务器上的文本文件根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML浏览器解释执行HTML，从而显示出内容
HTML部署在服务器上，运行在浏览器上
表单
表单用于显示、收集信息，并提交信息到服务器
表单二要素：
- （1）表单元素
- （2）表单控件——
<input>元素中的，各个type属性值
| 表单元素 | 表单控件 |
|---|---|
| input | text——文本框 |
| label——管理表单中的文本 | password——密码框 |
| select——下拉选 | radio——单选按钮 |
| textarea——文本域 | checkbox——多选按钮 |
| - | hidden——隐藏文本域 |
| - | file——文件上传组件 |
| - | submit——提交按钮 |
| - | reset——重置按钮 |
| - | button——普通按钮 |
| 新增表单控件 |
|---|
| url |
| search——此类型表示输入的将是一个搜索关键字 |
| number / range——不同的数字输入模式 |
| color——让用户通过颜色选择器选择一个颜色值，并反馈到value中 |
| date——日期和时间选择器 |
表单就是从浏览器向服务器传输数据的手段
-
定义表单:使用成对的
<form></form>标记，表示要将此元素中所涵盖的控件中的数据传输给服务器 -
主要属性：
（1）action:表单提交的URL
（2）method:指出表单数据提交的方式
（3）enctype:表单数据进行编码的方式
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：设置选中
（d）id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。id属性与<label></label>标签配合，可用于使选项后的文字可被点击来选中选项。
效果： -
5、隐藏域：
<input type="hidden"/>
在表单中包含不希望用户看见的信息 -
6、文件选择框：
<input type="file"/>
选择要上传的文件 -
7、提交按钮：
<input type="submit"/>
传送表单数据给服务器端或其它程序处理 -
8、重置按钮：
<input type="reset"/>
清空表单的内容并把所有表单控件设置为最初的默认值 -
9、普通按钮：
<input type="button"/>
用于执行客户端脚本，没有任何功能，需通过js定义功能。
主要属性：
value:按钮的名字
其他元素（3个）；
1、<label>： 用来管理表单中的文本，可以将文本与控件绑定在一起，从而增加了控件的受力面积。
id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。
-
2、
<select>： 下拉选
selected：默认选中 -
3、
<textarea>：文本域
相当于多行文本框
语法：<textarea>文本</textarea>
主要属性：
cols：指定文本区域的列数
rows：指定文本区域的行数
readonly：只读