html-时间datetime-获取焦点autofocus-提示required-验证labels-默认值control-可编辑下拉-正则

时间：2022-11-17 22:19:06

---H5新增的主体结构元素
article元素-代表文档，独立出来的内容-可以嵌套-表示插件
nav 元素-可作为页面的导航的连接组-
---应用场景--传统导航条-侧边栏导航-页内导航-翻页操作
aside元素-用来表示当前页面或文章的附属信息部分，可以包含
相关内容的引用，侧边栏，广告，导航条

--time元素和微格式--pubdata-表示具体的发布时间（出现两个datetime时间的时候使用）
<time datatime="2015-10-10">2015-10-10</time>
<time datatime="2015-10-10T20:00">2015-10-10</time>--T为分隔符
<time datatime="2015-10-10T20:00Z">2015-10-10</time>--Z表示机器编码是utc标准时间
<time datatime="2015-10-10T20:00+9:00">2015-10-10</time>--加9是时差

---formaction-加载到的后台服务器网址
---formtarget属性-跳转方式属性

---表单内元素的autofocus属性-
为文本框，选择框或按钮加上autofocus属性，
当画面打开时，该控件自动获取光标焦点
---表单内元素required属性-<input type="text" required="required">
应用在大多输入元素上，在提交时，如果元素中的内容为
空白，则不允许提交，同时在浏览器中显示信息提示文字
----labels验证js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="testform">
<label id="label" for="text_name">姓名:</label>
<input id="text_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
<script>
function Validate(){
var textName=document.getElementById("text_name");
var button=document.getElementById("btnValidate");
var form=document.getElementById("testform");
if(textName.value.trim()==""){
var label=document.createElement("label");
label.setAttribute("for","text_name");
form.insertBefore(label,button);
textName.labels[1].innerHTML="请输入姓名";
textName.labels[1].setAttribute("style","font-size: 9px;color: red;");

}
}
</script>
</body>
</html>

html-时间datetime-获取焦点autofocus-提示required-验证labels-默认值control-可编辑下拉-正则

---标签的control属性(默认值的设置)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <label id="label">
                邮编:
                <input id="txt_zip" maxlength="6">
                <small>请输入6位数</small>
            </label>
            <input type="button" value="设置默认值" onclick="setValue()">
        </form>
        <script>
            function setValue(){
                var label=document.getElementById("label");
                var textbox=label.control;//获取操作内容
                textbox.value="010010";
            }
        </script>
    </body>
</html>

html-时间datetime-获取焦点autofocus-提示required-验证labels-默认值control-可编辑下拉-正则

 

--文本框的placeholder属性（提示）
当文本框处于为输入状态时显示的输入提示
当文本框处于为输入状态时且获取光标焦点时，模糊显示输入提示文字。
<input type="text" placeholder="请输入用户名">
--文本框的list属性（可编辑的下拉菜单）

　　　　<form>
            <input type="text" name="greeting" list="greetings">
            <datalist id="greetings" style="display: none;">
                <option value="html5">HTML5</option>
                <option value="html3">HTML3</option>
                <option value="html1">HTML1</option>
            </datalist>
        </form>

html-时间datetime-获取焦点autofocus-提示required-验证labels-默认值control-可编辑下拉-正则

 

文本框的AutoComplete属性-
文本框的pattern属性--正则表达式的验证
<input pattern="[A-Z]{3}" name="part">
--var Directon=control.selectionDirection--获取用户正向反向选择
--复选框的indeterminate--选取未选取
image提交按钮height-width
<input type="image" src="图片" alt="编辑" width="20" height="50">

标签：

相关文章