required属性：在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中会弹出提示文字。
autofocus属性：当页面打开时，该控件自动获得光标焦点
required属性和autofocus属性的代码如下：
<!DOCTYPE html>
<head>
<title>required属性和autofocus属性 的使用示例</title>
<meta charset="UTF-8">
</head>
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" autofocus />
<!--autofocus:当页面打开时，该控件自动获得光标焦点 -->
<input type="submit" />
<!-- 提交按钮 -->
<input type="reset" />
<!-- 重置按钮 -->
</form>
</form>
运行如图：
Paste_Image.png
当不输入内容，点击按钮就会出现下图：
Paste_Image.png
labels属性：为所有可用标签（label元素）的表单元素定义一个label属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
labels属性的使用方法：
<!DOCTYPE html>
<head>
<title>labels属性的使用示例</title>
<meta charset="UTF-8">
</head>
<script type="text/javascript">
function Validate(){
var txtName=document.getElementById("txt_name"); //找到输入框
var button=document.getElementById("btnValidate");//找到按钮
var form=document.getElementById("testform");//找到表单
if(txtName.value.trim()==""){//判断输入框里有文字没，trim()就是空格的意思
if(txtName.labels.length==1)//判断输入框里的索引是不是为1
// 0是id=label 1是id="txt_namez
//疑问：这里的索引和for绑定不太明白
{
var label=document.createElement("label");//是在对象中创建一个对象，
label.setAttribute("for","txt_name");
//输出：for="txt_name" 疑问：本来在label中就是for="txt_name"为什么还要写？
// setAttribute(string name(字符串名称), string value(字符串值))：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
form.insertBefore(label,btnValidate); //btnValidate/txt_name/button
//在节点的子节点列表任意位置插入新的节点。
txtName.labels[1].innerHTML="请输入姓名";//插入引号里的内容
//labels[1]指id="txt_name"
txtName.labels[1].setAttribute(
"style","font-size:20px; color:red");
//输出：style{font-size:20px; color:red};
}
}
else if(txtName.labels.length>1)
form.removeChild(txtName.labels[1]);//提交后删除输入框里的内容
// removeChild() 方法指定元素的某个指定的子节点。
// 以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
}
</script>
<form id="testform">
<label id="label" for="txt_name">姓名:</label>
<input id="txt_name" autofocus><!--autofocus:当页面打开时，该控件自动获得光标焦点 -->
<input type="button" id="btnValidate" value="验证" onclick="Validate()"/>
</form>
代码运行如图：
Paste_Image.png
不在输入框输入内容点击按钮就会出现下图：
Paste_Image.png
在这串代码中<label id="label" for="txt_name">姓名:</label>for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。
for的值有两个：
第一个：id （ 规定 label 绑定到哪个表单元素。）
第二个：formid （规定 label 字段所属的一个或多个表单。）
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
innerHTML在JS是双向功能：
获取对象的内容 或 向对象插入内容；
如：
<div id="aa">这是内容</div> ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，
如：
document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。
网友评论