《表單總結》
一.表單
基本語法:
<form method="表單提交方式(post/get)" action="表單提交地址">
</form>
二.input元素
type：代表input元素型別
name: 表單元素名稱
value: 表單元素初始值
size: 表單寬度
maxLength: 輸入的最大字元數
checked: 主要用於單選或多選按鈕，代表預設選中
三.常用表單元素
1.普通文字框 <input type="text" name="username" value="楊凱" size="30px" maxlength="10"/>
2.密碼框 <input type="password" name="password" size="30" maxlength="16"/>
3.單選按鈕（name屬性必須有，值相同）
<input type="radio" name="gender" value="男" checked/>男
<input type="radio" name="gender" value="女"/>女
4.多選按鈕（name屬性必須有，值相同，可以選擇多個）
<input type="checkbox" name="hobby" value="睡覺" checked/>睡覺
<input type="checkbox" name="hobby" value="吃飯"/>吃飯
<input type="checkbox" name="hobby" value="打豆豆"/>打豆豆
5.下拉框（name屬性必須有，size代表初始顯示項數）
<select name="address">
<option value="北京" name="bj">北京</option>
<option value="上海" name="sh">上海</option>
<option value="南京" name="nj">南京</option>
<option value="山東" name="sd" selected>山東</option>
<option value="西安" name="xa">西安</option>
</select>
6.按鈕
button普通按鈕：<input type="button" name="button" value="普通按鈕"/>
reset按鈕：（重置表單資料）<input type="reset" name="reset" value="重置按鈕"/>
submit提交按鈕：<input type="submit" name="submit" value="提交按鈕"/>
image影象按鈕（同樣會提交表單資料）：<input type="image" src="../image/login.gif" name="image"/>
7.多行文字域<textarea name="textarea" rows="20" cols="50"></textarea>
8.檔案域
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="files" />
</form>
9.email自動驗證: <input type="email" name="email"/>
10.網址自動驗證： <input type="url" name="url"/>
11.數字：<input type="number" min="0" max="100" step="5" name="number"/>
12.滑塊：<input type="range" name="range" max="20" min="-20" step="10"/>
13.搜尋框：<input type="search" name="search"/>
四.表單的高階應用
1.隱藏域（在表單當中不會顯示，但是確實存在資料，當提交時會將隱藏用於資料一起提交）
<input type="hidden" value="666" name="userid">
2.只讀和禁用
<input name="name" type="text" value="張三" readonly>
<input type="submit " disabled value="儲存" >
3.標註（游標定位）
<label for="id">標註的文字</label>
<input type="radio" name="gender" id="male"/>
五.表單的初級驗證
1.placeholder 友好提示
2.required 非空
3.pattern 正則表示式驗證
使用者名稱:<input type="text" name="username" placeholder="請輸入使用者名稱" required/>
手機號:<input type="text" name="phone" required pattern="^1[358]\d{9}"/>
<input type="submit" value="提交"/>