zoukankan      html  css  js  c++  java
  • HTML5 input类型总结

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Form</title>
        <style>
            form {
                width: 670px;
                margin: 0 auto;
            }
    
            td {
                background-color: #ffffff;
            }
    
            td, input {
                font-size: 20px;
            }
    
            th {
                font-size: 26px;
                background-color: #22ccff;
                letter-spacing: 2px;
            }
    
            #sub {
                float: right;
                margin-left: 10px;
                position: relative;
                top: 50px;
                left: 0px;
                -webkit-transition: all 0.5s ease-in-out 0.0s;
                -moz-transition: all 0.5s ease-in-out 0.0s;
                -ms-transition: all 0.5s ease-in-out 0.0s;
                -o-transition: all 0.5s ease-in-out 0.0s;
                transition: all 0.5s ease-in-out 0.0s;
            }
        </style>
    </head>
    <body>
    <form target="_blank" action="URL">
        <!-- 额外的提交按钮 -->
        <input type="submit" value="提交" id="sub"/>
        <table bgcolor="#000" cellpadding="10" align="center">
            <!-- 文本类 -->
            <tr>
                <th colspan="2">文本类</th>
            </tr>
            <tr>
                <td>text</td>
                <td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td>
            </tr>
            <tr>
                <td>url</td>
                <td>
                    <input type="url" placeholder="attribute:placeholder" value="a:b"/>
                </td>
            </tr>
            <tr>
                <td>password</td>
                <td>
                    <input type="password" maxlength="8" placeholder="请输入密码" autofocus required/>
                </td>
            </tr>
            <tr>
                <td>email</td>
                <td>
                    <input type="email" value="1@2.3"/>
                </td>
            </tr>
            <tr>
                <td>tel</td>
                <td><input type="tel"></td>
            </tr>
            <tr>
                <td>search</td>
                <td><input type="search"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <p>“placeholder”:占位符;</p>
                    <p>“autofocus”:焦点获取;</p>
                    <p>“required”;表单必填项;</p>
                    <p>“pattern”;输入规范,该值为一个正则表达式;</p>
                    <p>在H5中,URL和email类型在提交表单时,会检测是否符合格式。</p>
                </td>
            </tr>
            <!-- 文本类 end -->
    
            <!-- 操作类 -->
            <tr>
                <th colspan="2">操作类</th>
            </tr>
    
            <tr>
                <td>checkbox</td>
                <td>
                    <label><input type="checkbox" name="ch_box"/>box_1</label>
                    <label><input type="checkbox" name="ch_box"/>box_2</label>
                    <label><input type="checkbox" name="ch_box"/>box_3</label>
                    <input type="checkbox" id="ch_box4"/>
                    <label for="ch_box4">box_4</label>
                </td>
            </tr>
            <tr>
                <td>radio</td>
                <td>
                    <label><input type="radio" name="radio"/>ra_1</label>
                    <label><input type="radio" name="radio"/>ra_2</label>
                    <label><input type="radio" name="radio"/>ra_3</label>
                    <label><input type="radio" name="radio"/>ra_4</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    label:<br/>
                    非跨度:&lt;label&gt;&lt;input&gt;&lt;/input&gt;&lt;/label&gt;<br/>&emsp;度:&lt;label for="input_id"&gt;&lt;/label&gt;<br/>
                    &emsp;&emsp;&emsp;&emsp;&lt;input id="input_id"&gt;&lt;/input&gt;
                </td>
            </tr>
            <tr>
                <td>file</td>
                <td>
                    <input type="file" multiple="multiple"/>
                    <p>multiple="multiple":允许添加多个值;</p>
                    <p>accept="MIME_type";指定上传文件的类型;</p>
                    <p>如:accept="image/jpg,image/gif"</p>
                    <p><a href="http://www.w3school.com.cn/media/media_mimeref.asp" target="_blank">MIME_type 附录表</a></p>
                </td>
            </tr>
            <tr>
                <td>number</td>
                <td><input type="number" max="100" min="90" step="2"/>
                    <p>只允许输入数字;"e":自然常数;</p></td>
            </tr>
            <tr>
                <td>range</td>
                <td>
                    <input type="range" max="100" min="0" step="20"/>
                    <p>“value”,默认为50,范围0~100;</p>
                </td>
            </tr>
            <tr>
                <td colspan="2">max:最多值;min:最小值;step:步长;</td>
            </tr>
            <tr>
                <td>color</td>
                <td><input type="color" value="#00ff00"/> 数值型:#ffffff;</td>
            </tr>
            <!-- 操作类 end -->
    
            <!-- 表单功能 -->
            <tr>
                <th colspan="2">功能类</th>
            </tr>
    
            <tr>
                <td>button</td>
                <td>
                    <input type="button" value="button"/>
                    <button>This is a button.<img src="btn_03.png" width="52"/></button>
                    <p>“button”允许嵌入其他元素;</p>
                </td>
            </tr>
            <tr>
                <td>image</td>
                <td><input type="image" src="btn_03.png" width="32"
                           height="26"/><span>&emsp;H5中使用“width”“height”修改图片大小;</span></td>
            </tr>
            <tr>
                <td>submit</td>
                <td>
                    <input type="submit"/>
                    <p>get:在url地址上传送参数到服务器;<br/>post:在后台传送参数到服务器; </p>
                </td>
            </tr>
            <tr>
                <td>reset</td>
                <td><input type="reset"/></td>
            </tr>
            <!-- 表单功能 end -->
    
            <!-- 日期类型 -->
            <tr>
                <th colspan="2">Date 类</th>
            </tr>
    
            <tr>
                <td>date</td>
                <td><input type="date"/></td>
            </tr>
            <tr>
                <td>month</td>
                <td><input type="month"/></td>
            </tr>
            <tr>
                <td>week</td>
                <td><input type="week"/></td>
            </tr>
            <tr>
                <td>time</td>
                <td><input type="time"/></td>
            </tr>
            <tr>
                <td>datetime</td>
                <td><input type="datetime" value="2016-08-02T08:32Z"/></td>
            </tr>
            <tr>
                <td>datetime-local</td>
                <td><input type="datetime-local"/></td>
            </tr>
            <!-- 日期类型 end -->
            <!-- 特殊类 -->
            <tr>
                <th colspan="2">特殊类</th>
            </tr>
    
            <tr>
                <td>hidden</td>
                <td><input type="hidden"/>
                    <p>可用于记录一些表单状态信息<br/>(例如使用value的值标记可选项为非空值的个数),<br/>或者其他自定义信息;</p></td>
            </tr>
        </table>
    </form>
    </body>
    <script type="text/javascript">
        function sub_move() {
            var s = document.getElementById("sub");
            window.onscroll = function _scroll() {
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                s.style.top = top + 50 + "px";
            }
        }
    </script>
    <script type="text/javascript">
        window.onload = function main() {
            sub_move();
        }
    </script>
    </html>
    input 类型 demo

    一、文本类

      Text,文本

      Url,网络地址

      Password,密码

      Email,邮箱地址

    二、操作类

      Checkbox ,复选框

      Radio,单选框

      File,上传文件

      Number,数值

      Range,百分百滑动条

    三、功能类

      Button,按钮

      Image,图片提交按钮

      Submit,文字提交按钮

      Reset,重置表单

    四、Date类

      Date,年月日控件

      Month,年月控件

      Week,年周控件

      Time,时间控件

      Datetime,年月日+时间控件

      Datetime-local,本地年月日+时间控件

    五、特殊类

      Hidden,隐藏信息

     

    扩展:

    1.文本类属性:placeholder。这是一个占位符,可以作为提示信息,而且无法被用户选中。

    2.Url和e-mail,在H5中,会在提交表单的时候检测其格式是否书写正确。

    3.操作类。一般input标签会结合label标签使用,label一般有两种书写方法:

    1.非跨度:<label><input></input></label>

    2.跨度:<label for="input_id"></label>
        <input id="input_id"></input>

      如果网页结构中,input和label是相邻的关系,可以直接使用非跨度的书 写方法,以减少代码量。

    4.file。在实际应用中,网页表单中需要上传的文件一般不止一个,这时候就要用到multiple属性,它是一个布尔值属性,在添加这个属性后,就可以上传多个属性。另外,上传的文件可以被规定,使用accept属性。这个一个数组属性,属性值是MIME规定的文件类型。

    5.Button。Button类型只能在value中定义按钮上显示的提示文字。Image类型只能在src中链接图片。

      而button标签则结合了button和image的属性,它是一个双标签,也就是说它可以在内部嵌套其他标签,让按钮的显示效果更多元化。

    6.Date类。Date类型的input标签是H5中新增加的。它实际上是一个控件,可以很方便的选择和显示时间数据,但是目前支持该控件的浏览器并不多。其中IE是完全不支持的。

    7.Hidden。这个属性的input标签无法显示,也无法被用户控制。它的作用可以用来标记一些隐藏的表单信息。

      例如:在一些网站中,对于用户的描述,有一个信息完整度的提示。

      用户在注册的时候,必填项有5个,可填项有5个。注册的表单可以用hidden来记录可填项中有多少个是有数据的。

      假如,一个用户把所有的可填项全部填写。那么他的信息完整度就是100%。

      另一个用户的可填项一个也没有填写,他的信息完整度就是50%。

      而这个数值可以根据hidden中记录的数值来进行计算。

  • 相关阅读:
    查询同一表格中姓名相同但身份证号不同的记录
    Liunx常用命令
    判断当前移动端是Android、还是ios、还是微信
    mybatis 返回值问题
    log4j2+mybaits 打印sql操作语句
    java日期格式问题
    eachart图表100px大小原因,及处理办法
    springboot中的默认数据库连接池HikariDataSource
    SpringBoot中logback.xml使用application.yml中属性
    linux 下的vi vim快捷键,命令总结
  • 原文地址:https://www.cnblogs.com/darcrand-blog/p/5729549.html
Copyright © 2011-2022 走看看