从浏览器的角度来看表单是如何工作的
- 浏览器加载表单页面。这个过程会创建所需的控件，如按钮、文本输入框等。
- 用户输入数据。使用加载的控件输入数据。
- 提交表单。随后浏览器会打包所有表单数据，并把这些数据发送到服务器。
- 服务器响应。服务器将接收到的数据传递给相关服务器脚本进行处理，然后将处理结果以HTML的形式返回给浏览器。
常用表单元素的介绍
-
form元素:它不仅包含构成表单的所有元素，还会告诉浏览器当你提交表单时要把数据送到哪里，以及浏览器要用什么方法发送数据。
如
<form action="http://waiyy.com/.../.php" method=""></form>
其中action属性确定将数据送到哪里，属性值为服务器脚本的地址(URL)。
method属性确定表单数据以何种方法发送：有post(比较常用)和get两种。
-
input元素是应用非常广泛的表单元素，根据type属性值的不同，有以下几种常用用法：
- 文本输入
<input type="text" name=""> - 提交输入
<input type="submit"> - 单选钮输入
<input type="radio" name="必须有相同的名字" value="填的值最好对应"> - 复选框输入
<input type="checkbox" name="相同的名字" value="不同的对应值"> - 数字输入
<input type="number" min="" max="">输入框只能输入数字，可设置最大值，最小值。 - 范围输入
<input type="range" min="" max="">类似number，但它会显示一个滑动条，而不是输入框。 - 颜色输入
<input type="color">会弹出一个颜色选择器。 - 日期输入
<input type="date">会弹出一个日期选择器。 - email输入
<input type="email">显示为一个文本输入框，并会弹出一个定制键盘。 - tel输入
<input type="tel">跟email输入类似 - url输入
<input type="url">跟email输入类似，也会弹出一个定制键盘。
- 文本输入
textarea元素可以创建一个多行的文本区。
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols和row的属性值分别表示文本区宽度和高度的字符。-
select元素和option元素结合使用可创建一个下拉菜单。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>
其中关于name属性有一点要知道的：它相当于表单和处理表单的服务器脚本之间的一个黏合剂。
- 表单中的每个元素输入控件都有一个name属性：在HTML文件中输入表单元素时，会为它们指定唯一的名字。(浏览器会把单选框和复选框输入的值合并成一个值，所以为一组单选框或复选框指定一个name是有道理的。)
- 提交表单时，浏览器会使用这些唯一的名字打包所有数据：浏览器会得到个部分数据，并用唯一的name属性值作为这些数据的标签，然后浏览器吧这些名字和值发送到服务器。
