HTML的筆記及展示（2）（表單元素、input元素、label、button以及HTML5新增的一些元素）
一、HTML原有的表單與表單控制元件
1.****<form…/>元素用於生成輸入表單，該元素不會生成視覺化部分。如單行文字框、多行文字框、單選按鈕、複選框等都需要放在<form…/>元素內
form元素的重要屬性：
action：指定當單擊表單內的"確認"按鈕時，該表單被提交到哪個位置。該屬性必 填。
method：指定提交表單時傳送何種型別的請求，該屬性可為get或post，通常傳送POST請求。該屬性必填。action、method用法如下：
<form action="http://39.106.170.146/html/summary/summary01.html" method="post"></form>
下面我看看GET請求和POST請求的區別：
GET請求：直接在瀏覽器位址列中輸入訪問地址所傳送的請求，可以看到請求引數名和值，且相對傳送資料量較小。
POST請求：通常使用提交表單的方式傳送，傳送資料量較大。
可以看出get請求可以看到網址後面的資料，而post請求看不到，這樣post請求就相對更安全，所以建議用post請求。
2.input元素
單行文字框：指定<input…/>元素的type屬性為text即可。
密碼輸入框：指定<input…/>元素的type屬性為password即可。
隱藏域：指定<input…/>元素的type屬性為hidden即可。
單選框：指定<input…/>元素的type屬性為radio即可。
複選框：指定<input…/>元素的type屬性為checkbox即可。
影象域：指定<input…/>元素的type屬性為image即可。可指定width和height。
檔案上傳域：指定<input…/>元素的type屬性為file即可。
提交、重設、無動作按鈕：分別指定<input…/>元素的type屬性為submit、reset或batton即可。
checked：設定單選框、複選框初始狀態是否處於選中狀態。該屬性是支援boolean值的屬性，表示初始即被選中。
disable：設定首次載入時禁用此元素，該屬性是支援boolean值的屬性，當type=“hidden”是不能指定該屬性。
maxlength：該屬性值是一個數字，指定文字框中所允許輸入的最大字元數。
readonly：指定該文字框內的值不允許使用者修改。該屬性是支援boolean值的屬性，表示該元素的值是隻讀的。
例項程式碼如下：
單行文字框：<input id="username" name="username" type="text"/><br/> 不能編輯的文字框：<input id="usename" name="usename" type="text" readonly="readonly"/> 密碼框：<input id="password" name="password" type="password" /> 隱藏域：<input id="hidden" name="hidden" type="hidden"/></br> 第一組單選框：<br/> 紅：<input id="color" name="color" type="radio" value="red"/> 綠：<input id="color2" name="color" type="radio" value="green"/> 藍：<input id="color3" name="color" type="radio" value="blue"/><br/> 第二組單選框：<br/> 男性：<input id="gender" name="gender" type="radio" value="male"/> 女性：<input id="gender2" name="gender" type="radio" value="female"/><br/> 兩個複選框：<br/> <input id="website" name="website" type="checkbox" value="leegang.org"/> <input id="website2" name="website" type="checkbox" value="crazy.org"/><br/> 檔案上傳域：<input id="file" name="file" type="file"/><br/> 影象域：<input type="image" src="../2018.12.17/denglu/weichat_0.jpg" alt="登入背景圖" width="340" height="210"/><br/> 下面是四個按鈕：<br/> <input id="ok" name="ok" type="submit" value="提交"/> <input id="dis" name="dis" type="submit" value="提交" disabled /> <input id="cancel" name="cancel" type="reset" value="重填"/> <input id="no" name="no" type="button" value="無動作"/> <button type="button">提交</button><br/> <button type="submit"><img src="../2018.12.17/denglu/weichat_0.jpg" width="340" height="210" alt="登入背景圖"/>
3.使用label定義標籤
<label…/>元素用於在表單元素中定義標籤，它有一個額外作用：當用戶單擊<label…/>所生成的標籤時，該標籤關聯的表單控制元件元素就會獲得焦點。
隱式使用for屬性：<label for="username">單行文字框：</label>
<input id="username" name="username" type="text"/><br/>
顯式關聯：<label>密碼框：<input id="password" name="password" type="password" /></label>
4.使用button定義按鈕
<button…/>元素用於定義一個按鈕，該元素內部可以包含普通文字、文字格式化標籤、影象等內容，這也是與input按鈕的不同。
<button type="button">提交</button><br/>
5.select與option元素
select元素裡只能包含如下兩種子元素：
option：用於定義列表框選項或選單項。（只能包含文字內容作為選項文字）
<optgroup…/>：用於定義列表項或選單項組。該元素只能包含<option…/>子元素。
select元素裡指定的一些屬性：
disable：設定禁用該列表框和下拉選單。
multiple：設定該列表框和下拉選單是否允許多選。（支援boolean屬性）
size：指定該列表框內可同時顯示多少個列表項。一旦指定該屬性，select元素就自動生成列表框。
option元素裡指定的一些屬性：
disable：指定禁用該選項。
selected：指定該列表項初始狀態是否處於被選中狀態。
value：指定該選項對應的請求引數值。
程式碼示例如下：
下面是簡單下拉選單：<br/>
<select id="skills" name="skills">
<option value="java">java語言</option>
<option value="c">C語言</option>
<option value="ruby">ruby語言</option>
</select><br/><br/><br/>
下面是允許多選的列表框：<br/>
<select id="books" name="books"
multiple="multiple" size="4">
<option value="java">瘋狂java講義</option>
<option value="android">瘋狂Android講義</option>
<option value="ee">輕量級java ee企業應用實戰</option>
</select><br/>
二、HTML5新增的表單屬性
1.form屬性
HTML5為表單控制元件新增了form屬性，用於定義該表單控制元件所屬的表單，該屬性值應該是它所屬表單的id。
2.formaction屬性
一個頁面中有多個按鈕，需要提交給不同的處理邏輯，formation屬性可動態的讓表單提交到不同的URL解決了這一問題。
3.formxxx屬性
formxxx屬性是一些與formaction相似的屬性，這裡不做贅述
4.autofocus屬性
當為某個表單控制元件增加該屬性後，瀏覽器開啟該頁面是該元件就會自動獲得焦點，並且最多隻能有一個表單控制元件可設定該屬性。
5.placeholder屬性
在輸入文字域地方顯示對使用者的提示資訊
程式碼示例如下：使用者名稱：<input type="text" name="name" autofocus placeholder="請輸入使用者姓名" /><p> 密碼：<input type="password" name="name" placeholder="請輸入密碼"/><p>
6.list屬性
list屬性既允許使用者輸入，也允許使用者通過下拉選單進行選擇，該屬性必須與<datalist…/>元素結合使用。
<datalist id="books">
<option value="java">瘋狂Java講義</option>
<option value="ee">輕量級 Java EE</option>
<option value="android">Android</option>
</datalist>
三、HTML5新增的表單元素
1.功能豐富的input元素
type屬性值新增的型別：
color：顏色選擇器。date：日期選擇器。time：時間選擇器。datetime-local：本地日期、時間選擇器。week：供使用者選擇第幾周的文字框。month：月份選擇器
type屬性值的<input…/>元素額外支援的屬性：
min：指定日期、時間的最小值。max：指定日期、時間的最大值。step：指定日期、時間的步長。email：讓input元素生成一個E-mail輸入框。tel：input生成一個只能輸入電話號碼的文字框。url：讓input元素生成一個URL輸入框。search：讓input元素生成一個專門用於輸入搜尋關鍵字的文字框等。
見如下程式碼示例：
type="color"的文字框：<br/><input name="color" type="color"/><p>
type="date"的文字框：<br/><input name="date" type="date"/><p>
type="time"的文字框：<br/><input name="time" type="time"/><p>
type="datetime-local"的文字框：<br/><input name="datetime-local" type="datetime-local"/><p>
type="month"的文字框：<br/><input name="month" type="month"/><p>
type="week"的文字框：<br/><input name="week" type="week"/><p>
type="email"的文字框：<br/><input name="email" type="email" multiple/><p>
type="tel"的文字框：<br/><input name="tel" type="tel"/><p><!--pc瀏覽器不會不通過-->
type="url"的文字框：<br/><input name="url" type="url"/><p>
type="number"的文字框：<br/><input name="number" type="number" min="0" max="100" step="5"/><p>
type="range"的文字框：<br/><input name="range" type="range" min="0" max="100" step="5"/><p>
type="search"的文字框：<br/><input name="search" type="search"/><p>
四、HTML5新增的客戶端校驗
1.使用校驗屬性執行校驗
HTML5為表單控制元件新增瞭如下幾個校驗屬性
required：該屬性指定該表單控制元件必須填寫。
pattern：該屬性指定該表單控制元件的值必須符合指定的正則表示式。
程式碼示例如下:
圖書名：<input name="name" type="text" required/><br/>
圖書ISBN：<input name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
圖書價格：<input name="price" type="number"
min="20" max="150" step="5"/><br/>
<input value="提交" type="submit"/>
2.呼叫checkValidity方法進行校驗
用對話方塊彈出錯誤提示
以上方法程式碼示例如下:
<form action="add" method="post">
生日：<input id="birth" name="birth" type="date"/><p>
郵件地址：<input id="email" name="email" type="email"/><p>
<input type="submit" value="提交" onclick="return check();"/>
</form>
<script type="text/javascript">
var check = function()
{
return commonCheck("birth" , "生日" , "欄位必須是有效的日期！")
&& commonCheck("email" , "郵件地址" , "欄位必須符合電子郵件格式！");
}
var commonCheck = function(field , fieldName , tip)
{
var targetEle = document.getElementById(field);
//如果該欄位的值為空
if (targetEle.value.trim() == "")
{
alert(fieldName + "欄位必須填寫！");
return false;
}
//呼叫checkValidity()方法執行輸入校驗
else if(!targetEle.checkValidity())
{
alert(fieldName + tip);
return false;
}
return true;
}
</script>
以上是近期總結。