HTML表单用法笔记

从浏览器的角度来看表单是如何工作的

1. 浏览器加载表单页面。这个过程会创建所需的控件，如按钮、文本输入框等。
2. 用户输入数据。使用加载的控件输入数据。
3. 提交表单。随后浏览器会打包所有表单数据，并把这些数据发送到服务器。
4. 服务器响应。服务器将接收到的数据传递给相关服务器脚本进行处理，然后将处理结果以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属性值作为这些数据的标签，然后浏览器吧这些名字和值发送到服务器。