從瀏覽器的角度來看表單是如何工作的
- 瀏覽器加載表單頁面。這個過程會創(chuàng)建所需的控件，如按鈕、文本輸入框等。
- 用戶輸入數(shù)據(jù)。使用加載的控件輸入數(shù)據(jù)。
- 提交表單。隨后瀏覽器會打包所有表單數(shù)據(jù)，并把這些數(shù)據(jù)發(fā)送到服務(wù)器。
- 服務(wù)器響應(yīng)。服務(wù)器將接收到的數(shù)據(jù)傳遞給相關(guān)服務(wù)器腳本進行處理，然后將處理結(jié)果以HTML的形式返回給瀏覽器。
常用表單元素的介紹
-
form元素:它不僅包含構(gòu)成表單的所有元素，還會告訴瀏覽器當你提交表單時要把數(shù)據(jù)送到哪里，以及瀏覽器要用什么方法發(fā)送數(shù)據(jù)。
如
<form action="http://waiyy.com/.../.php" method=""></form>
其中action屬性確定將數(shù)據(jù)送到哪里，屬性值為服務(wù)器腳本的地址(URL)。
method屬性確定表單數(shù)據(jù)以何種方法發(fā)送：有post(比較常用)和get兩種。
-
input元素是應(yīng)用非常廣泛的表單元素，根據(jù)type屬性值的不同，有以下幾種常用用法：
- 文本輸入
<input type="text" name=""> - 提交輸入
<input type="submit"> - 單選鈕輸入
<input type="radio" name="必須有相同的名字" value="填的值最好對應(yīng)"> - 復選框輸入
<input type="checkbox" name="相同的名字" value="不同的對應(yīng)值"> - 數(shù)字輸入
<input type="number" min="" max="">輸入框只能輸入數(shù)字，可設(shè)置最大值，最小值。 - 范圍輸入
<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元素可以創(chuàng)建一個多行的文本區(qū)。
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols和row的屬性值分別表示文本區(qū)寬度和高度的字符。-
select元素和option元素結(jié)合使用可創(chuàng)建一個下拉菜單。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>
其中關(guān)于name屬性有一點要知道的：它相當于表單和處理表單的服務(wù)器腳本之間的一個黏合劑。
- 表單中的每個元素輸入控件都有一個name屬性：在HTML文件中輸入表單元素時，會為它們指定唯一的名字。(瀏覽器會把單選框和復選框輸入的值合并成一個值，所以為一組單選框或復選框指定一個name是有道理的。)
- 提交表單時，瀏覽器會使用這些唯一的名字打包所有數(shù)據(jù)：瀏覽器會得到個部分數(shù)據(jù)，并用唯一的name屬性值作為這些數(shù)據(jù)的標簽，然后瀏覽器吧這些名字和值發(fā)送到服務(wù)器。
