【HTML&CSS】HTML表單:實現互動
瀏覽器通過HTML表單和伺服器實現互動,表單是一個可供使用者輸入資訊的頁面,使用者提交表單後,表單包含的資訊會發送到一個Web伺服器,由伺服器指令碼負責處理並響應,返回一個HTML頁面,最後瀏覽器顯示這個頁面。
表單元素
-
<form>
所有表單元素都要包含在<form>元素裡
<form action="URL" method="POST">
<input...>
<input...>
</form>
action屬性包含處理表單的伺服器指令碼URL;
method屬性是向伺服器提交表單資料的方法;
method屬性的值,也就是瀏覽器向伺服器傳送資料使用的方法,主要有兩種
- POST
- 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類似