瀏覽器通過HTML表單和伺服器實現互動，表單是一個可供使用者輸入資訊的頁面，使用者提交表單後，表單包含的資訊會發送到一個Web伺服器，由伺服器指令碼負責處理並響應，返回一個HTML頁面，最後瀏覽器顯示這個頁面。

表單元素

• <form>

所有表單元素都要包含在<form>元素裡

<form action="URL" method="POST">
    <input...>
    <input...>
</form>

action屬性包含處理表單的伺服器指令碼URL；

method屬性是向伺服器提交表單資料的方法；

 method屬性的值，也就是瀏覽器向伺服器傳送資料使用的方法，主要有兩種

1. POST
2. GET

POST和GET的作用都是一樣的，把表單資料從瀏覽器傳送到伺服器，但採用的方式有所區別。

POST會在後臺打包表單資料，然後傳送給伺服器，對使用者是不可見的；而GET在打包資料後，會將資料追加到伺服器指令碼的URL的最後，然後向伺服器傳送請求。

這種方式的差異直接體現在提交表單後返回頁面的URL上，使用POST方法只能在瀏覽器位址列看到伺服器指令碼的URL，GET方法則可以看到在指令碼URL後面的表單資料。

因此，使用POST方法返回的頁面加了書籤後，再次開啟資料會清空，而GET方法加了書籤後再次載入，資料依然儲存在頁面上。（使用GET方法返回的頁面如果加了書籤，當用戶再次開啟這個書籤時，瀏覽器會再次向伺服器提交表單，不希望使用者重複提交表單時，應當選擇POST方法）

POST和GET對傳送的資料量有限制，POST的限制比GET寬鬆。

• 文字輸入：text<input>

<input type="text" name="fullname" maxlength="4" placeholder="Your name" required>

text<input>建立一個單行的輸入框；

name屬性是這個控制元件的標識，方便指令碼對其處理；

maxlength屬性限制輸入的使用者數，只適用於<input>的文字輸入，對<textarea>無效；

placeholder屬性提供可描述輸入欄位預期值的提示資訊（hint），該提示會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失。

required屬性表示這個域是必要的，可以用於任何表單控制元件。如果沒有為設定了該屬性的控制元件指定一個值，將無法提交表單。

• 提交輸入：submit<input>

<input type="submit" value="OK">

submit<input>建立一個確認按鈕以提交表單，點選按鈕後瀏覽器把表單傳送到伺服器；

value屬性可以指定一個按鈕名稱，如果不指定，將會使用瀏覽器自定義的按鈕名稱，不同瀏覽器會有差異

• 單選按鈕輸入：radio<input>

iphone XR：<input type="radio" name="iphone" value="XR">
iphone XS：<input type="radio" name="iphone" value="XS">

radio<input>建立一個單選按鈕；

name相同的按鈕視為一組，同一組按鈕只能選擇其中一個；

value傳送到伺服器，由指令碼根據不同的值作出相應處理，可以有不同的值；

checked屬性為bool型別，表示預設選項，如果沒有這個屬性，載入頁面時不會選中任何按鈕；

標籤<label>

單選按鈕選擇時必須點選小圓圈，如果點選文字就能選中就更好了，用<label>可以實現這個功能。

	<form>
		<label for="XR">iphone XR：</label>
		<input type="radio" name="iphone" id="XR">
		<label for="XS">iphone XS：</label>
		<input type="radio" name="iphone" id="XS">
	</form>

點選<label>元素內的文字，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。

for屬性必須和相關控制元件的id相同，以此進行標籤文字和控制元件的繫結。

• 複選框輸入：checkbox<input>

<input type="checkbox" name="sex" value="紅" checked>
<input type="checkbox" name="sex" value="綠" checked>
<input type="checkbox" name="sex" value="藍">

checkbox<input>建立一個複選框控制元件；

name相同的選框視為一組，同一組選框可以選擇0個或多個；

value有不同的值；

checked屬性表示選中狀態，複選框可以有多個checked；

• 文字區：<textarea></textarea>

<textarea name="content" rows="5" cols="50"></textarea>

<textarea>元素建立一個文字區控制元件；

name是這個文字區的標記； 

rows & cols分別指定文字區的高度和寬度，單位為字元；（可以用CSS指定高度和寬度）

<textarea>是一個非空元素，有開始和結束標記，標記之間的所有文字會成為瀏覽器文字區的初始文字； 

• 選擇選單：<select></select>

<select name="Country">
    <option name="China">China</option>
    <option name="USA">USA</option>
    <option name="England">England</option>
</select>

<select>元素建立一個選擇選單；

name為select指定一個唯一的名字；

• 選單項：<option></option>

<select name="Country">
    <option name="China">China</option>
    <option name="USA">USA</option>
    <option name="England">England</option>
</select>

<option>和<select>結合建立選單，<option>標識選單項；

name表示一個選單項；

開始結束標記之間的內容描述這個選單項；

•  密碼輸入：password<input>

 以掩碼形式進行密碼輸入

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

• 檔案輸入file<input>

建立一個檔案輸入控制元件

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

• 數字輸入：number<input>

<input type="number" min="0" max="10" step="2">

number<input>用來輸入數字；

max & min屬性指定輸入數字的最大、最小值；

step屬性可選，指定數值的間隔數（步長）；

• 範圍輸入：range<input>

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

range<input>顯示一個滑動條，作用是選擇數值；

max & min屬性指定數值的範圍；

step屬性可選，指定數值的間隔數（步長）；

• 顏色輸入：color<input>

<input type="color">

color<input>可以指定一個顏色，單擊控制元件後會彈出一個顏色選擇器；（瀏覽器不支援該元素時，顯示為一個文字輸入控制元件）

• 日期輸入：date<input>

<input type="date">

date<input>建立一個日期選擇控制元件，指定日期後該控制元件生成一個日期格式串傳送到伺服器指令碼；

• email輸入：email<input>

<input type="email">

一個文字輸入元素，在移動瀏覽器上得到一個方便輸入email的定製鍵盤；

• tel輸入：tel<input>

<input type="tel">

文字輸入元素，和email類似，在移動裝置彈出一個定製鍵盤方便電話號碼輸入；

• url輸入：<input type="url">

<input type="url">

與email & tel類似