美文网首页
标签的control属性和文本框placeholder属性的使用

标签的control属性和文本框placeholder属性的使用

作者: 靓亮 | 来源:发表于2016-11-15 15:45 被阅读0次

标签的control属性:
可以在标签(label)内部放置一个表单元素,并且通过该标签的control属性来访问表单该元素

文本框placeholder属性:
是指文本框处于未输入状态时显示输入提示,当文本框处于未输入状态且未获取光标焦点时就模糊显示输入提示文字。

标签的control属性和文本框placeholder属性的使用方法如下:

<!DOCTYPE html>
<head>
<title>标签的control属性和文本框placeholder属性的使用示例</title>
<meta charset="UTF-8">
</head>
<script type="text/javascript">
function setValue(){
    var label=document.getElementById("label");
    var textbox=label.control;
    textbox.value="213001";
}
</script>
<form>
<label id="label">
    邮编:
    <input id="txt_zip" maxlength="6" placeholder="邮编号码">
    <small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值"  onclick="setValue()"/>
</form>
<!-- 可以在标签(label)内部放置一个表单元素,并且通过该标签的control属性来访问表单该元素 -->

<!-- 这里就是找到label元素通过control来访问label中的input来设置默认值 -->

运行如图:

Paste_Image.png

当点击文本框并输入数字时如下图:

Paste_Image.png

当点击按钮文本框就会现:213001

相关文章

网友评论

      本文标题:标签的control属性和文本框placeholder属性的使用

      本文链接:https://www.haomeiwen.com/subject/ncflpttx.html