html5属性

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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值