工作流程

首先要大致了解表单是如何进行工作的，我们访问一个包含表单的web页面，填写表单，将其提交给浏览器，然后，浏览器将表单中的所有数据打包发送给web服务器，接收后将其传给一个服务器脚本进行处理。服务器脚本处理数据后，创建一个全新的HTML页面作为响应，再将这个页面传回web服务器，web服务器再将这个响应发给浏览器，浏览器收到响应后显示页面。

<form>元素

<form action="http://wickedlysmart.com/practice/contest.php" method="post">
/*action属性包含web服务器的url/脚本所在的文件夹/脚本文件名，method属性确定表单数据如何发送到服务器*/
</form>

表单里有什么

<input>元素

文本输入

<input type="text" name="fullname">

提交输入

<input type="submit">

单选钮输入

<input type="radio" name="hotornot" value="hot">
<input type="radio" name="hotornot" value="not">

复选钮输入

<input type="checkbox" name="spice" value="Salt">
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic">

数字输入

<input type="number" min="0" max="20">

范围输入

<input type="range" min="0" max="20" step="5">

颜色输入

<input type="color">

日期输入

<input type="date">

email输入

<input type="email">

tel输入

<input type="tel">

url输入

<input type="url">

<textarea>元素

会创建一个多行的文本区，可以在其中输入多行文本。如果输入的文本在文本区中放不下，右边还会出现一个滚动条。

<textarea name="comments" rows="10" cols="48">

/*rows属性告诉浏览器文本区高度为多少个字符，cols属性告诉浏览器文本区宽度为多少个字符*/

</textarea>

<select>元素

会在Web页面中创建一个菜单控件，提供了一种从一组选项中做出选择的方法。

<option>元素

与<select>元素结合使用可以创建菜单。使用<option>元素来表示各个菜单项。

<select name="characters">
    <option value="qqq">qqqw</option>
    <option value="eee">eeew</option>
    <option value="rrr">rrrw</option>
    <option value="ttt">tttw</option>
</select>

method属性

浏览器主要使用的方法有两种：

POST

会打包你的表单数据，在后台把它们发送到服务器。

GET

会打包你的表单变量，但会把这些数据追加到URL的最后，然后向服务器发送一个请求。

如何选择

POST相较于GET，是私有的。而使用GET，用户可以对提交表单后的结果页面加书签。

两者对于发送的数据量都有一定的限制，POST相对能够宽松一些，所以，如果使用了<textarea>，就应该使用POST。

<label>标签

abel标签为input元素定义标注，它不会向用户呈现任何特殊效果，为鼠标用户改进了可用性，可以关联特定的表单控件，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。

<fieldset>和<legend>元素

<fieldset>元素可以将公共元素放在一起，<legend>元素为这一组提供一个标签。

<fieldset>
    <legend>Type: </legend> 
    <input type="radio" name="beantype" value="whole" id="whole">
    <label for= "whole">Whole bean</label> 
    <br>
    <input checked type="radio" name="beantype" value="ground" id="ground">
    <label for="ground">Ground </label>
</fieldset>

<password>元素

输入的文本会加入掩码。

<input type="password" name="secret">

文件输入

<input type="file" name="doc">

多选菜单

给<select>元素增加布尔属性multiple，就会把单选菜单变成多选菜单，不再显示一个下拉式菜单，在屏幕上显示所有菜单。选择时通过同时按下ctrl或command键，可以选择多个选项。

placeholder属性

这会为填写表单的人提供一个提示，这个属性的值会显示在控件中，但是比增加到控件中的值要浅一些，一旦单击这个文本域，占位文本就会消失。注意，如果这个文本域仍为空，提交表单后，占位内容不会作为控件值提交。

<div class="tableRow">
    <p>Name: </p>
    <p><input type="text" name="name" value="" placeholder="Judy"> </p>
</div>

required属性

这是一个布尔属性，对于设置这个属性的域来说，如果没有指定一个值，就会收到一个错误提示。

<input type="text" name="name" value="" placeholder="Judy" required>