- 表單內元素的form屬性
- 表單內元素的formaction屬性
- 表單內元素的formmethod屬性
- 表單內元素的formenctype屬性
- 表單內元素的formtarget屬性
- 表單內元素的autofous屬性
- 表單內元素的required屬性
- 表單內元素的labels屬性
1.form屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內form屬性</title>
</head>
<body>
<form id="testform">
<input type="testform">
</form>
<textarea id="testform"></textarea>
</body>
</html>
效果演示：
2.formaction屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內formaction屬性</title>
</head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formaction="http://www.baidu.com">提交到百度XX.jsp頁面<br/>
<input type="submit" name="s2" value="v2" formaction="http://www.goole.com">提交到谷歌XX.jsp頁面<br/>
<input type="submit" name="s3" value="v3" formaction="http://www.pi.com">提交到pi幣XX.jsp頁面<br/>
</form>
</body>
</html>
效果演示：（點擊對應按鈕就會跳轉到相應的頁面）
3.formmethod屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內formaction屬性</title>
</head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="get" formaction="http://www.baidu.com">get方法提交<br/>
<input type="submit" name="s2" value="v2" formmethod="post" formaction="http://www.google">post方法提交
</form>
</body>
</html>
效果演示：
4.formenctype屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內formenctype屬性</title>
</head>
<body>
<form>
<input type="text" formenctype="text/plain">
<input type="text" formenctype="multipart/form-data">
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
</body>
</html>
效果演示：
5.formtarget屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內formtarget屬性</title>
</head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formaction="http://www.baidu.com" formtarget="_blank">blank提交到百度頁面1<br/>
<input type="submit" name="s1" value="v1" formaction="http://www.baidu.com" formtarget="_self">self提交到百度頁面2<br/>
<input type="submit" name="s1" value="v1" formaction="http://www.baidu.com" formtarget="_top">top提交到百度頁面3<br/>
<input type="submit" name="s1" value="v1" formaction="http://www.baidu.com" formtarget="_parent">parent提交到百度頁面4<br/>
</form>
</body>
</html>
效果演示：（_blank是新打開一個瀏覽器頁面、_self在本頁面打開、_top在本頁面頂部打開、_parent在父頁面打開）
6.autofous屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內autofocus屬性</title>
</head>
<body>
<form>
<!--自動獲得焦點。一般在優先級較高的輸入框使用-->
<input type="text" autofocus><br/>
<input type="text" >
</form>
</body>
</html>
效果演示：
7.required屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內required屬性</title>
</head>
<body>
<form action="http://www.baidu.com">
<!--required屬性不允許內容爲空提交，一方面有助於數據庫管理-->
<input type="text" required="required" autofocus>
<button type="submit">提交</button>
</form>
</body>
</html>
效果演示：（填寫內容頁面纔會跳轉，不填寫還在原頁面，已添加自動聚焦屬性）
8.labels屬性
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單內lables屬性</title>
</head>
<body>
<script>
function Validate(){
var txtName = document.getElementById("txt_name");
var button =document.getElementById("btnValidate");
var form = document.getElementById("testform");
if(txtName.value.trim()==""){
var lable =document.createElement("label");
lable.setAttribute("for","txt_name");
form.insertBefore(lable,button);
textName.labels[1].innerHTML = "請輸入您的姓名";
textName.labels[1].setAttribute("style","font-size:9px;color:red");
}
}
</script>
<form id="testform">
<label id="lable" for="txt_name">姓名：</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="驗證" οnclick="Validate()">
</form>
</body>
</html>
效果演示：
今天就講這麼多，謝謝大家的閱讀