表單總結
一.表單
基本語法:
<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="打豆豆"/>打豆豆
5.下拉框（name屬性必須有，size代表初始顯示項數）
<select name="address">
<option value="北京" name="bj">北京</option>
<option value="上海" name="sh">上海</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" step="2" min="0" max="10" value="2"/>
min:起始點，max:最大值，value：當前值，step:每次跳幾步
圖例：
13.搜索框：
<input type="search" name="search"/>
圖例：
14.電話號碼：
<input type="tel" name=""/>
15.特定範圍內的數值選擇器
<input type="range" step="2" min="0" max="10" value="2"/>
min:起始點，max:最大值，value：當前值，step:每次跳幾步
圖例：
16.顏色選擇器
<input type="color" name=""/>
圖例：
17.time:顯示時間
<input type="time" name=""/>
圖例：
18.:顯示日期
<input type="date" name=""/>
圖例：
19.:顯示周
<input type="week" name=""/>
圖例：
20.:顯示月
<input type="month" name=""/>
圖例：
20.:輸入框顯示信息
<input type="type" placeholder="輸入4~16個字符"/>
圖例：
21.:是否保存用戶輸入值：默認為on，關閉為off
<input type="type" name=““ autocomplete=“off”/>
圖例：
22.指定表單獲取輸入焦點
<input type="type" name=“user“ autofocus/>
<input type="password" name=“password“ />
圖例：
22.此項必填，不能為空
<input type="type" name=“user“ required/>
<input type="password" name=“password“ required/>
圖例：
23.正則驗證
<input type="text" name=“user“ pattern="\d{1,5}"/>
圖例：
24.在submit裏定義提交地址
<form action="" method="get">
<input type="text" name="user" pattern="\d{1,5}"/>
<input type="submit" value="提交"/>
<input type="submit" value="保存至草稿箱" formaction=“www.baidu.com”/>
</form>
在Opera瀏覽器下有用
四.表單的高級應用
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"/>
五.表單的驗證
<form action="" method="get">
<input type="text" required id="text"/>
<input type="submit" value="提交"/>
</form>
<script>
var oText=document.getElementById(‘text‘);
oText.addEventListener(‘invalid‘,fn,false);
function fn(){
alert(this.validity);
alert(this.validity.valid);
//1.valueMissing:輸入值為空
alert(this.validity.valueMissing);//true
//2.typeMismatch：控件值與預期類型不匹配返回true
alert(this.validity.typeMismatch);//<input type="email" id="text"/>==>true
//3.patternMismatch:輸入值不滿足pattern正則返回true
alert(this.validity.typeMismatch)//<input type="text" id="text" pattern="\d{1,5}"/>==>true
//4.tooLong:超過maxLength最大限制
alert(this.validity.tooLong)//<input type="email" id="text" maxlength="5"/>==>true
//5.rangeUnderflow:驗證的range的最小值
//6.rangeOverflow:驗證的range的最大值
//7.stepMismatch:驗證的range的當前值是否符合min max step的規則
alert(this.validity.tooLong)//<input type="range" id="text" max="10" min="0" step="2"/>==>true
//customError不符合自定義驗證
oText.oninput=function(){
this.setCustomValidity("請不要輸入敏感詞")
}else{
this.setCustomValidity("")
}
}
function fn(){
alert(this.validity.customError)
ev.preventDefault();
}
ev.preventDefault();
}
</script>
表單總結