字符標准
<meta charset="utf-8">
表單
1、HTML 表單用於搜集不同類型的用戶輸入。
實例——創建文本字段
<form action=""> First name: <input type="text" name="firstname" size="30"><br> //可通過size設置文本框長度 Last name: <input type="text" name="lastname" value="Tom"> //可通過value設置初值 </form>
注意：表單本身是不可見的。並且注意一個文本字段的默認寬度是20個字符。
實例——創建密碼字段
<form action=""> Password: <input type="password" name="password"> </form>
注意：密碼字段中的字符是隱藏的(顯示為星號或圓圈)
2、多數情況下被用到的表單標簽是輸入標簽（<input>）。
輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
文本域:通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
單選框選項：<input type="radio"> 標簽定義了表單單選框選項
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female" checked="checked">Female //通過checked="checked"設置初值 即默認勾選 </form>
復選框：<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked="checked">I have a car //通過checked="checked"設置初值 即默認勾選 </form>
提交按鈕：<input type="submit"> 定義了提交按鈕.當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit">//value是提交按鈕上的字 </form>
假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。
重置按鈕:重置初值
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="發送"> <input type="reset" value="重置"> </form>
文本域：多行文本輸入控件）。用戶可在文本域中寫入文本。可寫入字符的字數不受限制
<textarea rows="10" cols="30"> 我是一個文本框。 </textarea>
下拉列表框：下拉列表框是一個可選列表。
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
帶有預選的下拉列表框:（通過添加selected 將其設為預選值 否則預選值為第一個option）
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
按鈕：可以對按鈕上的文字進行自定義
<form action=""> <input type="button" value="Hello world!" > </form>
如何在數據周圍繪制一個帶標題的框：通過fieldset實現
<fieldset> <legend>Personal information:</legend> //嵌在框中的文字 定義了fieldset的標題 Name: <input type="text" size="30"><br> E-mail: <input type="text" size="20"><br> Date of birth: <input type="text" size="10"> </fieldset> </form>
標簽(小型文本框)
<inpu<form action=""> <label for ="male">Male</label> </form>
圖像提交按鈕
<form action="demo-form.php"> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
當用戶無法查看圖像時（可能由於網速太慢、錯誤的 src 屬性、或者用戶使用的是屏幕閱讀器），alt 屬性為圖像提供了替代的文本。
關於 alt 文本的指導原則：
- 如果圖像中包含信息，則 alt 文本應該對圖像進行描述
- 如果圖像位於 <a> 元素中，則 alt 文本應該解釋鏈接指向哪里
- 如果圖像是純裝飾性的，請使用 alt=""
注意: height 和 width 屬性只適用於 image 類型的<input> 標簽。
提示:圖像通常會同時指定高度和寬度屬性。如果圖像設置高度和寬度，圖像所需的空間 在加載頁時會被保留。如果沒有這些屬性， 瀏覽器不知道圖像的大小，並不能預留 適當的空間。圖片在加載過程中會使頁面布局效果改變 （盡管圖片已加載）。
2、Form表單屬性
<form> / <input> autocomplete 屬性(默認為開 ="on"表示開 ="off"表示關)
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。
提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關閉的。
注意: autocomplete 適用於 <form> 標簽，以及以下類型的 <input> 標簽：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo-form.php" autocomplete="on"> //開啟此功能后，當輸入過信息，點框會有下拉列表，都是曾經用過的信息，點擊后可以自動完成 First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br>//關閉此功能后 不會有提示也就不會自動完成 <input type="submit"> </form>
<form> novalidate 屬性
novalidate 屬性是一個 boolean(布爾) 屬性.
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
<form action="demo-form.php" novalidate="novalidate"> //有novalidate無需驗證正確性 如果沒有novalidate則要驗證正確性 E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
<input> placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
簡短的提示在用戶輸入值前會顯示在輸入域上。
注意: placeholder 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email 以及 password。
<input type="text" name="fname" placeholder="First name">
<input> autofocus 屬性
autofocus 屬性是一個 boolean 屬性.
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
First name:<input type="text" name="fname" autofocus="autofocus">//頁面載入時自動聚焦
<input> formaction 屬性
The formaction 屬性用於描述表單提交的URL地址.
The formaction 屬性會覆蓋<form> 元素中的action屬性.
注意: The formaction 屬性用於 type="submit" 和 type="image".
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"><br> <input type="submit" formaction="demo-admin.php" value="提交"> </form>
<input> formenctype 屬性
formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method="post" 表單)
formenctype 屬性覆蓋 form 元素的 enctype 屬性。
主要: 該屬性與 type="submit" 和 type="image" 配合使用。
<form action="demo-post_enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form>
第一個提交按鈕已默認編碼發送表單數據，第二個提交按鈕以 "multipart/form-data" 編碼格式發送表單數據:
<input> formmethod 屬性
formmethod 屬性定義了表單提交的方式。
formmethod 屬性覆蓋了 <form> 元素的的method 屬性。
注意: 該屬性可以與 type="submit" 和 type="image" 配合使用。
<form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"> <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form>
<input> formnovalidate 屬性
novalidate 屬性是一個 boolean 屬性.
novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。
formnovalidate 屬性會覆蓋 <form> 元素的novalidate屬性.
注意: formnovalidate 屬性與type="submit一起使用
<form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate value="不驗證提交"> </form>
<input> formtarget 屬性
formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收后的展示。
The formtarget 屬性覆蓋 <form>元素的target屬性.
注意: formtarget 屬性與type="submit" 和 type="image"配合使用.
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="正常提交"> <input type="submit" formtarget="_blank" value="提交到一個新的頁面上"> </form>
<input> list 屬性
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。
類似於下拉列表 但是list是文本框 除了備用選項外還可以自己輸入信息 下拉列表則不可以自己輸入信息
<form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>
HTML5 <datalist> 元素
<datalist> 元素規定輸入域的選項列表。
<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：
使用 <input> 元素的列表屬性與 <datalist> 元素綁定.
<input> min 和 max 屬性
min、max 和 step 屬性用於為包含數字或日期的 input 類型規定限定（約束）。
注意: min、max 和 step 屬性適用於以下類型的 <input> 標簽：date pickers、number 以及 range。
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input> multiple 屬性
multiple 屬性是一個 boolean 屬性.
multiple 屬性規定<input> 元素中可選擇多個值。
注意: multiple 屬性適用於以下類型的 <input> 標簽：email 和 file:
<form action="demo-form.php"> 選擇圖片: <input type="file" name="img" multiple>// 瀏覽文件 從文件中上傳多個(multiple)圖片 <input type="submit"> </form>
<input> pattern 屬性
pattern 屬性描述了一個正則表達式用於驗證 <input> 元素的值。
注意:pattern 屬性適用於以下類型的 <input> 標簽: text, search, url, tel, email, 和 password.
提示： 是用來全局 title 屬性描述了模式.
提示： 您可以在我們的 JavaScript 教程中學習到有關正則表達式的內容
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">//輸入錯誤會顯示：您必須使用此格式：Three letter country code
<input> step 屬性
step 屬性為輸入域規定合法的數字間隔。
如果 step="3"，則合法的數是 -3,0,3,6 等
提示： step 屬性可以與 max 和 min 屬性創建一個區域值.
注意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
3、Form事件
HTML DOM oninvalid事件（input元素內的值為無效值時觸發的事件）
例如：input元素設置了required屬性，但是提交時該處為空就會觸發oninvalid事件。
HTML5對表單元素提供了pattern屬性，它接受一個正則表達式。表單提交時這個正則表達式會被用於驗證表單內非空的值，如果控件的值不匹配這個正則表達就會彈出提示框，並阻止表達提交。提示框內的文字可以使用setCustomValidity方法來自定義。
實例——驗證手機號
<form action=""> 手機號: <input type="text" name="phone" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}" oninvalid="setCustomValidity('請輸入11位手機號');"/>//注意 必須是單引號 <br> <input type="submit"> </form>
setCustomValidity()：這個是HTML5內置的JS方法，用來自定義提示信息
- maxlength：限定input最大輸入長度
4、表單元素
密鑰 公鑰 keygen
HTML5 <output> 元素
<output> 元素用於不同類型的輸出，比如計算或腳本輸出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0// oninput事件 在用戶輸入時觸發oninput 事件在元素值發生變化是立即觸發， onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用於 <keygen> 和 <select> 元素。 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
parseInt(字符串) 將字符串值轉為數字
for 屬性規定了計算中使用的元素與計算結果之間的關系。
語法：<output for="element_id">
| element_id | 一個或多個元素的 id 列表，以空格分隔，規定計算中使用的元素與計算結果之間的關系。 |