- 表单内元素的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>
效果演示：
今天就讲这么多，谢谢大家的阅读