講給Android程式設計師看的前端教程(08)——HTML5標籤(7)
課程安排
HTML不是程式設計語言，而是一種標記語言，它用一些標記、標籤來說明文字的顯示效果。要製作網頁和建立網站，就必須對HTML語言有所瞭解。客觀地講：HTML標籤沒有多少邏輯性而言，為了大家更好的理解和記憶，我們對這些標籤進行分門別類的講解，主要分為：
-
HTML常用標籤
-
HTML文字標籤
-
HTML語義標籤
-
HTML結構標籤
-
HTML列表標籤
-
HTML表格標籤
-
HTML表單標籤
-
HTML新增標籤和API
嗯哼，來吧，我們繼續HTML5標籤的學習。咋了？你竟然有點擔心學不會！？別逗了，這部分和我們常寫的Java比起來簡單多了，它的邏輯性也弱得多。所以，大胸弟你大可放心，就像看電影那樣：一手拿著爆米花，一手拿著可樂，也完全可以看懂本教程。
之前，我們已經學習了HTML常用標籤、HTML文字標籤、HTML語義標籤、HTML結構標籤、HTML列表標籤、HTML表格標籤；現在我們來繼續學習HTML表單標籤。
HTML表單標籤
HTML表單用於蒐集使用者輸入的不同型別的資料並將其上傳至服務端。嗯哼，瞭解完表單的作用，我們就來一起學習表單中最常用的標籤。
fieldset標籤
fieldset標籤用於在表單中劃分區域並顯示邊框，起到分組的作用。例如：可以將整個表單中的控制元件放到一個fieldset標籤中；也可以將表單中功能相關聯的幾個控制元件置於同一個fieldset中。
legend標籤
legend標籤用於設定分組的標題。通常來講，fieldset和legend配對使用。
input標籤
input標籤是表單中功能最豐富的標籤，以下幾種輸入元素均可使用input實現。
-
單行文字框
只需將input標籤的type屬性設定為text即可 -
密碼輸入框
只需將input標籤的type屬性設定為password即可 -
數字輸入框
只需將input標籤的type屬性設定為number即可 -
郵箱輸入框
只需將input標籤的type屬性設定為email即可 -
日期輸入框
只需將input標籤的type屬性設定為date即可 -
時間輸入框
只需將input標籤的type屬性設定為time即可 -
顏色輸入框
只需將input標籤的type屬性設定為color即可 -
單選框
只需將input標籤的type屬性設定為radio即可 -
複選框
只需將input標籤的type屬性設定為checkbox即可 -
檔案上傳
只需將input標籤的type屬性設定為file即可 -
提交
只需將input標籤的type屬性設定為submit即可 -
重置
只需將input標籤的type屬性設定為reset即可
select和option標籤
利用select和option標籤可實現下拉選擇，比如使用者註冊時的省份選擇。
textarea標籤
利用textarea標籤可在HTML中建立供使用者輸入的文字區域
表單的提交
嗯哼，利用剛才提到的這些標籤就可以實現簡單的表單頁面了；在此之後我們需要將表單提交至伺服器。在此介紹與表單提交有關的幾個屬性。
action
處理表單資料的伺服器地址
method
提交表單的方式，常用的為get和post
enctype
enctype表示將表單資料傳送到伺服器之前對錶單資料進行編碼。它有三種取值：
-
application/x-www-form-urlencoded：此為預設方式，在傳送資料前將資料中的特殊字元進行URL編碼處理。比如，將空格變為+號，將特殊符號轉換為 ASCII HEX 值。
-
text/plain：該取值的作用與application/x-www-form-urlencoded非常類似，它也將表示將空格轉換為 “+” 加號，但不對特殊字元編碼
-
multipart/form-data：表示不對字元編碼。在使用包含檔案上傳控制元件的表單時，必須使用該值。
其實，這和我們之前寫Android程式碼是非常類似的，是不是覺得很眼熟？比如，在APP中上傳圖片，我們會設定：
multipartBodyBuilder.setType(MultipartBody.FORM);
點開原始碼就會發現MultipartBody.FORM的值正是multipart/form-data.所以，這不是什麼新鮮玩意，它是我們的老朋友啦！
target
提交表單資料後，伺服器會作出相應的響應；所以，我們可以在瀏覽器中顯示伺服器返回的資料。那麼，是在原來的視窗顯示資料呢？還是新開啟一個視窗呢？此時可通過target屬性來指定顯示方式。target屬性值常用的有：
-
_self
它表示在原視窗中顯示資料 -
_blank
它表示在新視窗中顯示資料
表單示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表單</title>
</head>
<body>
<form id="userform" action="your url" method="post"
title="使用者登錄檔單" target="_self" enctype="multipart/form-data">
<fieldset>
<legend>使用者註冊資訊</legend>
<br>
暱稱:<input type="text" name="un" maxlength="15" value="Tom">
<br>
<br>
密碼:<input type="password" name="pw" maxlength="10">
<br>
<br>
性別:<input type="radio" name="gender" value="m" checked="checked">男
<input type="radio" name="gender" value="w">女
<br>
<br>
頭像:<input id="userphoto" type="file" name="profile">
<br>
<br>
籍貫:<select name="province">
<option >河北</option>
<option >遼寧</option>
<option >吉林</option>
<option >雲南</option>
<option selected="selected">廣西</option>
</select>
<br>
<br>
愛好:<input name="hobby" type="checkbox">讀書
<input name="hobby" type="checkbox">寫字
<input name="hobby" type="checkbox" checked="checked">彈琴
<br>
<br>
個人簡介:
<br>
<br>
<textarea name="introduce" cols="30" rows="10">請在此輸入簡介</textarea>
<br>
<br>
個人網站:<input name="userurl" type="url">
<br>
<br>
個人郵箱:<input name="useremail" type="email">
<br>
<br>
身體體重:<input name="userweight" type="number">
<br>
<br>
出生日期:<input name="userdate" type="date">
<br>
<br>
詳細時間:<input name="usertime" type="time">
<br>
<br>
性格顏色:<input type="color" name="usercolor">
<br>
<br>
<input type="submit" value="開始註冊">
<input type="reset" value="重置資訊">
<br>
<br>
</fieldset>
</form>
</body>
</html>
執行後效果圖如下所示：
結合剛才的示例，在此強調一些需要注意的地方：
-
上傳的表單中含有檔案時，請選用post方式提交
-
上傳的表單中含有檔案時，請將enctype屬性值設定為multipart/form-data
-
利用多個input標籤組合在一起實現單選時，請將它們的 type均設定為radio；並將它們的name均設定為同一值。多選的情況，亦類似；不再贅述
HTML5中表單的新特性
form屬性
在HTML5之前，所有的表單標籤都必須放在form標籤中。但是，在HTML5中新增了form屬性，用於表示該標籤所屬的form標籤。所以，每個標籤不必必須放在form標籤中也能成為表單的一部分，只需把該標籤的form屬性的值設定為其所屬表單的id即可。例如，在剛才的示例中再新增一個輸入框用於記錄畢業院校：
畢業院校:<input type="text" name="school" form="userform">
程式碼如上所示，那麼該input標籤也屬於了userform表單；亦會被提交至服務端。
datalist標籤
datalist標籤用於展示文字框與下拉選單組合在一起的效果，請注意datalist的id值必須是form表單的list屬性值。請看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datalist標籤</title>
</head>
<body>
<form action="url" method="get">
請輸入你最喜歡的女明星:<input type="text" name="name" list="namesList">
</form>
<datalist id="namesList">
<option value="lbb">李冰冰</option>
<option value="fbb">范冰冰</option>
<option value="gyy">高圓圓</option>
</datalist>
</body>
</html>
執行後效果如下圖所示：
formxxxx屬性
為了更加方便的操控表單標籤，在HTML5中新增了幾個formxxxx屬性，簡介如下：
-
formaction屬性用於指定表單提交的地址
-
formmethod屬性用於指定表單提交的方式
-
formtarget屬性用於指定開啟服務端響應URL的方式
-
formenctype屬性用於指定表單資料提交時的編碼方式
請看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表單中的formxxx屬性</title>
</head>
<body>
<form>
username:<input type="text" name="un">
<br>
<br>
password:<input type="password" name="pw">
<br>
<br>
<input type="submit" value="註冊" formaction="regist url" formmethod="get" formtarget="_self" formenctype="application/x-www-form-urlencoded" >
<input type="submit" value="登入" formaction="login url" formmethod="post" formtarget="_blank" formenctype="multipart/form-data">
</form>
</body>
</html>
在該示例中，有兩個功能：登入和註冊；不同的功能那麼就有不同的action、method、target、enctype。在此通過formaction、formmethod、formtarget、formenctype屬性靈活指定了在不同的操作下不同的表單提交方式。