表单内的从属元素可以写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，就可以表明该元素从属于指定表单。
<html>
<head>
<title>
form demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form id="formTest">
<!--表单元素在表单内-->
<input type="text" placeholder="姓名">
</form>
<!--表单元素在表单外,需form属性来指定从属的表单-->
<input type="checkbox" checked form="formTest">
<input type="checkbox">
<!--复选框处于不明状态-->
<input type="checkbox" id="check" form="formTest">
<script>
var checkbox = document.getElementById("check");
checkbox.indeterminate = true;
</script>
</body>
</html>
formaction属性
可以给所有的提交按钮，都增加不同的formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面。
<html>
<head>
<title>
formaction demo
</title>
</head>
<body>
<form method="POST">
<!--formaction 对每一个表单元素制定不同的提交地址-->
<label for="text">姓名：</label>
<input id="text" name="firstN">
<input type="submit" formaction="http://localhost:5000/api/formtest/firstN" value="提交"><br/>
<label for="emali">邮箱：</label>
<input id="email" name="email">
<input type="submit" formaction="http://localhost:5000/api/formtest/email" value="提交">
</form>
</body>
</html>
formmethod属性
对不同表单元素指定不同的提交方法，如：post、get。
<html>
<head>
<title>
formmethod demo
</title>
</head>
<body>
<form>
<!--formmethod 对每一个表单元素指定不同的提交方法-->
姓名：<input type="text" name="method1">
<input type="submit" value="提交" formmethod="GET" formaction="http://localhost:5000/api/formtest/method1"><br/>
邮箱：<input type="email" name="method2">
<input type="submit" value="提交" formmethod="POST" formaction="http://localhost:5000/api/formtest/method2">
</form>
</body>
</html>
formenctype属性
对不同的表单元素指定不同的编码方式。
<html>
<head>
<title>
formenctype demo
</title>
</head>
<body>
<form method="POST" action="http://localhost:5000/api/formtest/enctype">
<!--test-plain指数据中的空格变为+号，其他符号不处理-->
<input type="text" name="encode" formenctype="test-plain">
<!--multipart/form-data指不进行数据处理，上传文件时必须使用此属性值-->
<input type="text" name="encode1" formenctype="multipart/form-data">
<!--application/x-www-form-urlencoded指采用url编码-->
<input type="text" name="encode2" formenctype="application/x-www-form-urlencoded"><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
formtarget属性
<html>
<head>
<title>
formtarget demo
</title>
</head>
<body>
<!--formtarget:指定链接的打开位置-->
<form>
<label for="name">姓名:</label>
<input id="name">
<input type="email"><br/>
<a>
<input type="submit" value="blank" formtarget="_blank">
</a>
<a>
<input type="submit" value="self" formtarget="_self">
</a>
<a>
<input type="submit" value="parent" formtarget="_parent">
</a>
<a>
<input type="submit" value="top" formtarget="_top">
</a>
<!--还有一个指定框架framename-->
</form>
</body>
</html>
autofoucs属性
自动获取焦点。
<html>
<head>
<title>
autofocus demo
</title>
</head>
<body>
<!--autofocus 自动获取焦点-->
<label>姓名：</label>
<input type="text" autofocus><br/>
<label>号码：</label>
<input type="text" autofocus>
</body>
</html>
required属性
在多数输入元素中，如type:text、textarea ，为空时不允许提交，并给出提示信息。
<html>
<head>
<title>
required demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<!--required属性：必填内容，否则无法提交并给出提示信息-->
<input type="text" required><br/>
<textarea required></textarea><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
labels属性
通过labels的for属性获取指向它的表单元素(ps:将for的属性值与相邻表单元素id的属性值设置为相同)。
<html>
<head>
<title>
label demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--label 通过for属性获取指向它的表单元素-->
<label for="name">姓名：</label>
<input id="name">
</body>
</html>
control属性
在label中放一个表单元素，通过control设置相应属性。
<html>
<head>
<title>
control demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--control：在label中放一个表单元素，通过control设置相应元素的属性值-->
<label id="label">姓名：
<input type="text" id="text">
</label>
<input type="submit" value="click me!" onclick="control()">
<script>
function control(){
var label = document.getElementById("label");
//以下control作用：控制text文本框，并为其设置属性值。
label.control.value = 'Siri';
}
</script>
</body>
</html>
网友评论