zoukankan      html  css  js  c++  java
  • 前端基础小标签5 H5的一些新标签属性

    第二部分

     部分图片和内容摘要于网络

    二、

    formaction 属性规定当表单提交时处理输入控件的文件的 URL。

    formaction 属性覆盖 <form> 元素的 action 属性。

    注释:formaction 属性适用于 type="submit" 和 type="image"。

    实例:

    <form action="demo-form.php">

    First name: <input type="text" name="fname"><br>

    Last name: <input type="text" name="lname"><br>

    <input type="submit" value="提交"><br>

    <input type="submit" formaction="demo-admin.php" value="提交">

    </form>

    三、

    formenctype 属性规定当表单数据提交到服务器时如何编码(仅适用于 method="post" 的表单)。

    formenctype 属性覆盖 <form> 元素的 enctype 属性。

    注释:formenctype 属性与 type="submit" 和 type="image" 配合使用。

    实例:

    <form action="demo-post-enctype.php" method="post">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
    </form>

    四、

    formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法。

    formmethod 属性覆盖 <form> 元素的 method 属性。

    注意:formmethod 属性与 type="submit" 和 type="image" 配合使用。

    表单数据可被作为 URL 变量的形式来发送(method="get")或者作为 HTTP post 事务的形式来发送(method="post")。

    实例:

    <form action="demo-form.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
    </form>

    五、

    formtarget 属性规定表示提交表单后在哪里显示接收到响应的名称或关键词。

    formtarget 属性覆盖 <form> 元素的 target 属性。

    注意:formtarget 属性可以与 type="submit" 和 type="image" 配合使用

    _blank

    在新窗口/选项卡中显示响应。

    _self

    在同一框架中显示响应(默认)。

    _parent

    在父框架中显示响应。

    _top

    在整个窗口中显示响应。

    framename

    在指定的 iframe 中显示响应。

    实例:

    <form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
    </form>

    六、

    Autofocus

    <!-- 该属性表示打开页面时该组件会自动获取焦点

                 整个页面上最多只能有一个表单空间可以设置该属性

            -->

    实例:

    <form action="01_form.html" method="post">

               用户名: <input type="text" name="username" autofocus/><br />

               密码:<input type="password" name="password" /><br />

               <input type="submit" value="提交"/>

            </form>

    七、

    datalist

    datalist> 标签规定了 <input> 元素可能的选项列表。

    <datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

    请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

            <!--

               1.list属性必须和datalist元素结合使用

               2.list属性是一个看不见的select标签

               3.datalist所包含的子元素和select的子元素完全相同

            -->

    实例:

            <form action="01_form.html" method="post">

               请输入水果的种类: <input type="text" name="fruit" id="fruit" list="fruits" /><br />

               <input type="submit" name="" id="" value="购买" />

            </form>

           

            <datalist id="fruits">

              

               <option value="apple">苹果</option>

               <option value="banana">香蕉</option>

               <option value="orange">橘子</option>

            </datalist>

    八、

    Autocomplete

    定义和用法

    autocomplete 属性规定输入字段是否应该启用自动完成功能。

    自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

    注意:autocomplete 属性适用于下面的 <input> 类型:text、search、url、tel、email、password、datepickers、range 和 color。


         <!-- 用于设置表单是否支持自动完成功能

               如果启动了自动完成功能,浏览器会根据用户上次提交的数据生成列表框供用户选择,或提示自动完成

             该属性支持两个属性值

             on: 文本框下方会显示下拉菜单

             off: 文本框下方不会显示下拉菜单

         -->

    实例:

       <form action="01_form.html" method="get" autocomplete="on">

            用户名: <input type="text" name="username" autocomplete="on"/><br />

            住址: <input type="text" name="address" id="address" autocomplete="off"/>  <br />    

            <input type="submit" value="提交"/>

         </form>

    九、

    Label

    <label for="element_id">

    <!--

            主要作用用于在JavaScript脚本中访问该label元素所关联的表单元素

         -->

    实例:

    Label的control属性

    点击姓名光标会出现在所关联的input

         <form action="01_form.html" method="post" autocomplete="on">

            <label id="lb" for="name">姓名:</label>

            <input type="text" id="name" /><br />

            <input type="button" value="点击" onclick="document.getElementById('lb').control.value = 'Hello';"/>

         </form>

    十、

    文本框selectionDirection属性

    实例:

         <form action="01_form.html" method="post" autocomplete="on">

            <label id="lb" for="name">姓名:</label>

            <input type="text" name="name" id="name" />

           

            <input type="button" value="获取" onclick="alert(document.getElementById('lb').control.selectionDirection);"/>

         </form

    实例:

    <script>

        function AD() {

            var control=document.forms[0]['test'];

            var Direction=control.selectionDirection;

            alert(Direction);

        }

    </script>

     

        <form>

        <input type="test" name="test">

        <input  type="button"  value="点击一下"   onclick="AD()">

        </form>

     

    实例2效果图:

     

    作为新手小菜鸟的我,只想记录,便于温故知新,如有错误或疏忽,请留言,审查后改正,谢谢各位大佬
  • 相关阅读:
    如何在服务器上添加本地驱动器
    JQ查找到带有某个字符,并起类名,然后替换这个某个字符
    使用IWMS的网站打开显示“未能加载文件或程序集”,解决方案
    表头固顶结构
    在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部
    在文档页面整个区域出现导航随内容滚动高亮显示效果
    在文档页面局部出现导航随内容滚动高亮显示效果
    在Hmtl页面中只让其中单独的一个div隐藏滚动条但是仍可滚动浏览下边的内容
    GC参考手册 —— GC 调优(工具篇)
    GC参考手册 —— GC 算法(实现篇)
  • 原文地址:https://www.cnblogs.com/zhangsonglin/p/10435054.html
Copyright © 2011-2022 走看看