<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标簽的form屬性</title>
</head>
<body>
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="送出">
</form>
<p> "Last name" 字段沒有在 form 表單之内,但它也是 form 表單的一部分。</p>
Last name: <input type="text" name="lname" form="form1">
<p><b>注意:</b> IE 不支援 form 屬性</p>
</body>
</html>
上面是對标簽form屬性的一個了解,下面來看一個問題
<form action="form.jsp" id="form1">
<input type="text" name="value1" />
<form action="12.jsp" id="form2">
<input type="text" name="value2" />
</form>
<input type="text" name="value3" />
<input type="submit" value="送出" onclick="submitForm();"/>
</form>
<script type="text/javascript">
function submitForm(){
document.getElementById("form1").submit();
}
</script>
如上代碼,隻能擷取到value1和value2的值,value3的值将丢失。 因為form标簽不能嵌套,嵌套後會導緻第一個form後的資料都不能送出
下面來看用标簽的form屬性來解決這個問題,還是以問題代碼為列。
<form action="form.jsp" id="form1">
<input form="form1" type="text" name="value1" />
<input form="form2" type="text" name="value2" />
<input form="form1" type="text" name="value3" />
<input type="submit" value="送出1" onclick="submitForm1();"/>
</form>
<form action="12.jsp" id="form2">
<input type="submit" value="送出2" onclick="submitForm1();"/>
</form>
<script type="text/javascript">
function submitForm1(){
document.getElementById("form1").submit();
}
function submitForm(){
document.getElementById2("form2").submit();
}
</script>
這樣利用标簽的form屬性就可以不用改變表單的結構,就可以送出表單中的某一部分。