form属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form属性</title>
</head>
<body>
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
</body>
</html>
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="xx.jsp">提交到xx.jsp页面
<input type="submit" name="s2" value="v2" formaction="xx.jsp">提交到xx.jsp页面
<input type="submit" name="s3" value="v3" formaction="xx.jsp">提交到xx.jsp页面
</form>
<textarea form="testform"></textarea>
</body>
</html>
formmethod属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formmethod属性</title>
</head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="http://jikexueyuan.com">提交
<input type="submit" name="s2" value="v2" formmethod="get" formaction="">提交
</form>
<textarea form="testform"></textarea>
</body>
</html>
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>
<textarea form="testform"></textarea>
</body>
</html>
formtarget属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formtarget属性</title>
</head>
<body>
<form>
<input type="submit" name="s1" value="v1" formtarget="_blank" formaction="http:\\baidu.com">提交
<input type="submit" name="s2" value="v1" formtarget="_self" formaction="http:\\baidu.com">提交
<input type="submit" name="s3" value="v1" formtarget="_parent" formaction="http:\\baidu.com">提交
<input type="submit" name="s4" value="v1" formtarget="_top" formaction="http:\\baidu.com">提交
<input type="submit" name="s5" value="v1" formtarget="framework" formaction="http:\\baidu.com">提交
<textarea form="testform"></textarea>
</body>
</html>
autofucus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autofocus属性</title>
</head>
<body>
<form>
<input type="text">
<input type="text" autofocus>
</form>
</body>
</html>
required属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>required属性</title>
</head>
<body>
<form>
<input type="text" required="required">
<button type="submit">提交</button>
</form>
</body>
</html>
label属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label属性</title>
</head>
<body>
<script>
function Validate() {
var txtName=document.getElementById("txt_name");
var button=document.getElementById("btValidate");
var form=document.getElementById("testform");
if(txtName.value.trim()==""){
var label=document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML="请输入姓名";
txtName.labels[1].setAttribute("style","font-size:9px;color:red")
}
}
</script>
<form id="test">
<label id="label" for="txt_name">姓名:</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
</body>
</html>
control属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>control属性</title>
</head>
<body>
<script>
function setValue() {
var label =document.getElementById("label");
var textbox=label.control;
textbox.value="010010";
}
</script>
<form>
<label id="label">
邮编:
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置成默认值" onclick="">
</form>
placeholder属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeholder属性</title>
</head>
<body>
<input type="text" placeholder="请输入用户名">
</body>
</html>
list属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list属性</title>
</head>
<body>
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none">
<option value="HTML_5学习">HTML5学习</option>
<option value="Android学习">Android学习</option>
<option value="iOS">iOS学习</option>
</datalist>
</form>
</body>
</html>
pattern属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pattern属性</title>
</head>
<body>
<form>
请输入内容
<input pattern="[A-Z]{3}" name="part">
<input type="submit">
</form>
</body>
</html>
Selection Direction属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SelectionDirectiion属性</title>
</head>
<body>
<script>
function AD() {
var content=document.forms[0]['text'];
var Direction=control.delectionDirection;
alert(Direction)
}
</script>
<form>
<input type="test" name="text">
<input type="button" value="点击我" onclick="AD">
</form>
</body>
</html>
indeterminate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>indeterminate属性</title>
</head>
<body>
<form>
<input type="checkbox" indeterminate id="cb">属性测试
<script>
var cb=document.getElementById("cb");
cb.indeterminate=true
</script>
</form>
</body>
</html>
weight和width属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>width和height属性</title>
</head>
<body>
<form action="framea.html" method="post">
姓名:<input type="text" name="name">
<input type="image" src="framea.html" alt="编辑" height="50">
</form>
</body>
</html>