HTML5 表单新增元素与属性

最新推荐文章于 2021-08-06 01:06:41 发布

China_chen_p_l

最新推荐文章于 2021-08-06 01:06:41 发布

阅读量456

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/China_chen_p_l/article/details/78902646

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

image的input元素

<body>
    <!--针对类型的image的input元素，HTML新增了两个属性，height、width分别用来指定图片按钮的高度和宽度-->
    <form action="tes.jsp" method="post">
        姓名：<input type="text" name="name">
        <input type="image" src="" align="编辑" width="50" height="50"/>
    </form>
</body>

标签的control属性

<body>
<script>
    function setValue() {
        var label = document.getElementById("label");
        var textbox = label.control;
        textbox.value = "010010";
    }
</script>
    <!--在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素-->
    <form>
        <label id="label">
            邮编：
            <input id="txt_zip" maxlength="6"/>
            <small>请输入六位数字</small>
        </label>
        <input type="button" value="设置默认值" onclick="setValue()"/>
    </form>
</body>

复选框的indeterminate属性

<body>
    <!--对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。-->
    <!--在HTML5中，可以在javaScript脚本中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态.-->
    <input type="checkbox" indeterminate id="cb"/>属性测试
    <script>
        var cb = document.getElementById("cb");
        cb.indeterminate = true;
    </script>
</body>

input新增属性

**
from元素属性

<!--在HTML4中，表单内的从属元素必须写在表单内部，
    而在HTML5中，可以把他们书写在页面上的任何地方，
    然后为该元素指定一个form属性，属性值为该表单的id，
    这样就可以声明该元素从属指定表单了-->
<form id="testform">
    <input type="text"/>
</form>
<textarea form="testform"></textarea>

autofocus属性

<body>
    <!--为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点-->
    <form>
        <input type="text"/>
        <input type="text" autofocus/>
    </form>
</body>

required属性

<body>
    <!--HTML5中新增的required属性可以应用在大多数输入元素上，
        在提交时，如果元素中内容为空白，则不允许提交，
        同时在浏览器中显示信息提示文字-->
    <form>
        <input type="text" required="required"/>
        <button type="submit">提交</button>
    </form>
</body>

labels属性

<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 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>
    <!--在HTML5中，为所有可使用标签的表单元素、button、select元素等，
        定义一个labels属性，属性值为一个NodeList对象，
        代表该元素所绑定的元素所构成的集合-->
    <form id="testform">
        <label id="label" for="txt_name">姓名:</label>
        <input id="txt_name"/>
        <input type="button" id="btnValidate" value="验证" onclick="Validate()"/>
    </form>
</body>

formtarget属性

<body>
    <!--在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面-->
    <!--在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面-->
    <form>
        <form id="testform">
            <!--在新窗口/选项卡中将表单提交到文档。-->
            <input type="submit" name="s1" value="v1" formtarget="_blank"/>
            <!--在同一框架中将表单提交到文档。（默认）-->
            <input type="submit" name="s1" value="v1" formtarget="_self"/>
            <!--在父框架中将表单提交到文档。-->
            <input type="submit" name="s1" value="v1" formtarget="_parent"/>
            <!--在整个窗口中将表单提交到文档。-->
            <input type="submit" name="s1" value="v1" formtarget="_top"/>
            <!--在指定的框架中将表单提交到文档。-->
            <input type="submit" name="s1" value="v1" formtarget="_framename"/>

        </form>
    </form>
</body>

formmethod属性

<body>
    <!--在HTML4中，
    一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，
    所以每个表单内页只有一个method属性来统一指定提交方法。-->
    <!--在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法-->
    <form id="testform">
        <input type="submit" name="s1" value="v1" formmethod="post" formaction="xx.jsp" />提交
        <input type="submit" name="s1" value="v1" formmethod="get" formaction="xx.jsp" />提交
    </form>
</body>

formenctype属性

<body>
    <!--在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码-->
    <!--在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式-->

    <!--将空格转换为 "+" 符号，但不编码特殊字符。-->
    <form type="text" formenctype="text/plain"></form>
    <!--不对字符编码。当使用有文件上传控件的表单时，该值是必需的。-->
    <form type="text" formenctype="multipart/form-data"></form>
    <!--在发送前对所有字符进行编码（默认）。-->
    <form type="text" formenctype="application/x-www-form-urlencoded"></form>
</body>

formaction属性

<body>
        <!--在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，
        而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，
        使单击不同的按钮时可以将表单提交到不同的页面-->
        <form id="testform">
            <input type="submit" name="s1" value="v1" formaction="xx.jsp"/>
        </form>
</body>

文本框新增属性

placeholder属性

<body>
    <!--placeholder是指文本框处于未输入状态时显示的输入提示。-->
    <!--当文本框处于未输入状态且获取光标焦点时，模糊显示输入提示文字-->
    <input type="text" placeholder="请输入用户名"/>
</body>

文本框的pattern属性

<body>
    <!--在HTML5中，对input元素使用pattren属性，
        并且将属性值设为某个格式的正则表达式，
        在提交时会针对这些进行检查,
        检查其内容是否符合给定格式-->
    <!--当输入的内容不符合给定格式时,则不允许提交,
        同时在浏览器中显示信息提示文字,
        提示输入的内容必须符合给定格式-->
    <form action="">
        请输入内容
        <input pattern="[A-Z]{3}" name="part"/>
        <input type="submit"/>
    </form>
</body>

文本框autocomplete属性

<body>
    <!--帮助输入所用的自动完成功能，是一个即节省输入时间又十分方便的功能-->
    <!--在HTML5之前，因为谁都可以看见输入的值，所有在安全方面存在缺陷，
        只要使用AutoComplete属性，安全性方面也可以得到很好的控制-->
    <!--on  默认。规定启用自动完成功能。-->
    <!--off 规定禁用自动完成功能。-->
    <input type="text" name="greeting" autocomplete="on" list="greetings"/>
    <datalist id="greetings" style="display: none">
        <option value="HTML学习">HTML学习</option>
        <option value="HTML学习1">HTML学习1</option>
        <option value="HTML学习2">HTML学习2</option>
    </datalist>
</body>

文本框SelectionDirection属性

<body>
    <!--这对input元素与textarea元素,HTML5增加了SelectionDirection属性.-->
    <!--当用户在这两个元素中用鼠标选取部分文字时,可以使用该属性来获取选取方向.-->
    <!--当用户选取文字时,改属性值为"forward", 当用户反向选取文字时,该属性值为"backward"-->
    <!--当用户没有选取任何文字时,该属性值为"forward"-->
    <form action="">
        <input type="text" name="text"/>
        <input type="button" value="点击我" onclick="AD()"/>
    </form>
    <script>
        function AD() {
            var control = document.forms[0]['text'];
            var Direction = control.selectionDirection;
            alert(Direction);
        }
    </script>
</body>

文本框的list属性

<body>
    <!--在HTML5中，未单行文本框增加了一个list属性，该属性的值为某个datalist元素的id-->
    <!--datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入-->
    <!--datalist元素本身并不显示，而是当文本框获得焦点时以提示输入方式显示-->
    <form action="">
        <input type="text" name="greeting" list="greetings">
        <datalist id="greetings" style="display: none">
            <option value="HTML学习">HTML学习</option>
            <option value="HTML学习1">HTML学习1</option>
            <option value="HTML学习2">HTML学习2</option>
        </datalist>
    </form>
</body>

China_chen_p_l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 表单新增元素与属性

image的input元素<body>  <form action="tes.jsp" method="post"> 姓名：<input type="text" name="name"> <input type="imag
复制链接

扫一扫

专栏目录