• HTML/HTML5 Input类型&&表单


    1.HTML 中"不常用"input类型中的属性值:

    • disabled:输入字段禁用;
    • maxlength:输入字段的最大字符长度;
    • readonly:输入字符只读,无法修改;
    • size:输入字段可见字符数。
    1         <form action="" method="get">
    2             <input type="text" name="text1" id="" value="1" disabled><br>
    3             <input type="text" name="text2" id="" maxlength="5"><br>
    4             <input type="text" name="text3" id="" value="1" readonly><br>
    5             <input type="text" name="text4" value="12345asasadasadsadsadsadas" size="3"><br><br><br><br>
    6         </form>

    执行结果:

    注意:测试浏览器为chrome;size="3"好像"有点问题"!,这里所谓的“可见字符”也不是真正意义上的“可见”,鼠标光标能够左右移动查看所有字符

    2.HTML5中容易“忽视”的input类型中的属性值:

    • max:输入最大值
    • min:输入最小值
    • required:输入字段是必须的
    • step:输入步长
    1 <input type="number" name="num1" id="" min="1000" max="1000000" step="2" required><br>
    2             <input type="submit" value="提交">

    此处添加submit,如果number此处没填写,则浏览器会提示“请填写此字段”!

    3.HTML5新的input类型:

    color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week

    注意:以上可以在现代浏览器,IE9以上版本使用;即使不被支持,它们会被替换为:text

    4.HTML5表单:

    4.1:HTML5表单元素:<datalist>,<keygen>,<output>

    <datalist>:规定了input元素值得可能选项列表;提供自动完成功能;(用户将看到一个下拉列表选项)

    支持情况:IE10以上,现代浏览器(除safari)

    1 <input type="text" list="choices">
    2             <datalist id="choices">
    3                 <option value="apple">1</option>
    4                 <option value="blue">2</option>
    5                 <option value="cat">3</option>
    6                 <option value="dog">4</option>
    7             </datalist>

    此时你如果输入a:下拉框会显示apple 1和 cat 3两个选项,这就是自动完成功能。

    在HTML5表单中,都有自动完成功能:

    比如:

                <input type="text" name="text10"><br>

    在第一次输入值时,第二次输入时下拉框有“记忆功能”。

    我们可以设置:autocomplete="off"来关闭记忆功能!

    还有一个autofocus会在运行文件时聚焦到此输入框中!

    <keygen>:表单密钥对生成,验证用户的可靠方法!(IE浏览器不支持)

    <output>:用于不同类型的输出,比如计算或脚本输出。

    1         <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    2             <input type="range" name="a" id="a" min="1" max="10" value="5">+
    3             <input type="number" name="b" id="b" value="20">=
    4             <output name="x" for="a b"></output>
    5         </form>

    5.HTML5表单新属性:

    上面简单介绍过:autocomplete,autofocus,min,max,required,step;

    其实还有很多。

    除了autocomplete可以用在form和input中,novalidate用在form属性中!其它均用在input属性中!有:form,formaction,formenctype,formnovalidate,formtarget,patternmultiple,placeholder等。

    用法可参考:点击此处!

  • 相关阅读:
    Linux知识(7)----远程登录 和远程拷贝
    ROS知识(9)----安装Turtlebot2和远程控制Turtlebot2
    几张图理解Roll, Pitch, Yaw的含义
    GIT(1)----更新代码和上传代码操作的步骤
    ROS知识(8)----CMakeLists.txt文件编写的理解
    ROS知识(7)----ROS命令中的单引号`和‘的混淆问题
    ROS知识(6)----卸载ROS系统
    python知识(2)----python的多态
    DWR3.0框架入门(3) —— ScriptSession的维护及优化
    log4j.properties配置详解
  • 原文地址:https://www.cnblogs.com/why-not-try/p/7867277.html
Copyright © 2020-2023  润新知