Web前端学习笔记(3)-html5新增表单元素

最新推荐文章于 2024-04-09 22:19:08 发布

SkyeyesXY

最新推荐文章于 2024-04-09 22:19:08 发布

阅读量818

点赞数 1

分类专栏： Web前端学习笔记文章标签： html5 web前端表单标签

本文链接：https://blog.csdn.net/SkyeyesXY/article/details/50837923

版权

Web前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Web前端学习笔记(3)-html5新增表单元素

标签（空格分隔）： primer web 前端

1.表单新增元素与属性

1）标签的control属性

  在HTML5中，可与在标签内部防止一个表单元素，并且通过该标签的`control`属性来访问表单元素。

<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>请输入六位数字</small>
        </label>
        <input type="button" value="设置默认值" onclick="setValue()">
    </form>
</body>

2）表单内元素的formaction属性

可以通过此属性为表单所有提交按钮设置不同的属性（在按钮标签中设置）以将表单提交到不同页面。(action在form中设置指定唯一目标）

~~/< form id="test" action="xx.jsp">/~~

<body>
    <form id="testform">
        <input type="submit" name="1" value="1" formaction="xx1.jsp">提交到1</input>
        <input type="submit" name="1" value="1" formaction="xx2.jsp">提交到2</input>
    </form>
</body>

3）表单内元素的formmethod属性

对每一个表单元素分别指定不同的提交方法。（GET/POST）

<body>
    <form id="testform" action="xx.jsp">
        <input type="submit" name="1" value="1" formmethod="post">提交到1</input>
        <input type="submit" name="1" value="1" formmethod="get">提交到2</input>
    </form>
</body>

4）表单内元素formenctype属性

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

<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>
</body>

5）表单内元素的formtarget属性

对多个按钮分别指定提交后在何处打开所需加载的页面。

target/formtarget=

_blank:在新的浏览器页面打开
_self:在相同的框架（frame）中打开
_parent:在父框架中打开（与_self效果相似都依赖于frame）
_top:在当前窗口中打开。（默认）
framename:在指定框架中打开

6）表单内元素的labels属性

在html5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

<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 = "input name";
            }
        }
    </script>

    <form id="testform">
        <label type="label" for="txt_name">name:</label>
        <input id="txt_name">
        <input type="button" id="btnValidate" value="check" onclick="Validate()">
    </form>
</body>

7）表单内元素的form属性

在html5中表单内的从属元素可以书写在页面的任何地方，只要为该元素指定一个form属性，值为表单的id，即可声明从属。

<body>
    <form id="testform">
        <input type="text">
    </form>
    <textarea form="textform"></textarea>
</body>

8）表单image提交按钮的height属性与width属性

来指定图片形式提交按钮的宽高

2.文本框属性

1）文本框的list属性

在html5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是html5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素默认本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

解释

有关联datalist的list的输入框有一个下拉菜单，中的内容为datalist中的内容，可以输入，也可以选择。

<form>
    <input type="text" name="greeting" list="greetings">
    <datalist id="greetings" style="display:none"> /*写明隐藏*/
        <option value="html">html</option>
        <option value="ios">ios</option>
    </datalist>
</form>

2）文本框的autocomplete属性

帮助输入所用的自动完成功能，使用`autocomplete`属性后之前由输入值可见造成的安全性问题得到很好的控制。

3）文本框的pattern正则表达式属性

将input的属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当不符合格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

<form>
    请输入内容
    <input pattern="[A-Z]{3}" name="part"> /*只允许输入3个大写字母*/
    <input type="submit">
</form>

4）文本框selectionDirection属性

在input和textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取文字方向。正/没有选取任何文字：forward，反：backward。

<body>
    <script>
        function AD(){
            var control = document.forms[0]['text'];
            var Derection = control.selectionDirection;
        }
    </script>
    <form>
        <input type="text" name="text">
        <input type="button" value="点击我" onclick="AD()">
    </form>
</body>
/*捕捉用户的文本选择信心*/

5）文本框的placeholder属性

`placeholder`是指当文本狂处于问输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

<input type="text" placeholder="请输入用户名">

6）文本框autofocus属性

为文本框或按钮加上autofocus属性，当页面打开时，该输入框控件自动获得光标焦点。

7）文本框required属性

可以应用到大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字（浏览器固定的提示内容）。

8）复选框的indeterminate属性

对于复选框checkbox来说，过去只是选取与非选取的两种状态。在html5中，可以在js脚本中对该元素使用indeterminate属性来说明复选框处于“尚未明确是否选取”状态。

XXX.indeterminate = true;

作者：Skyeyes
2016.3.7
根据极客学院前端工程师课程整理

SkyeyesXY

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录