专栏首页Micro_awake webHTML/HTML5 Input类型&&表单

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等。

用法可参考:点击此处!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript(三):对象

     对象(object)是javascript中很重要的数据类型。对象是“键值对”的集合,同时也是无序的。(注意:对象结尾处有分号) 1 var ob1={ ...

    用户1149564
  • javascript(一):javascript基本介绍及基本语法

    什么是javascript? javascript是一种直译型脚本语言,是一种动态类型、弱类型、基于原型的语言。(所谓“脚本语言”:指的是它不具有开发操作系统的...

    用户1149564
  • Vue学习2:模板语法

    用户1149564
  • 与input有关的一些操作

    然后,在根据每个对象的checded属(true 或者false)来判断选中与否。

    wfaceboss
  • 前端基础-HTML基础(四)

    frameset标签frame标签表单标签input标签select标签textarea标签通用属性参考

    efonfighting
  • 线性回归与P-value理论探讨

    用户5473628
  • AppScan安全漏洞说明及解决方案

    解决方案:向所有会话cookie 添加HttpOnly属性 ,可以在过滤器中统一添加。

    java乐园
  • [Micropython]TPYBoard v202 智能WIFI远控小车

    之前有过用TPYBoard v102制作的各种各样功能的智能小车,比如自动寻迹、自动避障、手机蓝牙遥控等。想着还缺个WIFI控制的,那就用TPYBoard v2...

    阿莉埃蒂
  • 高流量站点NGINX与PHP-fpm配置优化

    使用Nginx搭配PHP已有7年的这份经历让我们学会如何为高流量站点优化NGINX和PHP-fpm配置。 以下正是这方面的一些提示和建议: 1. 将TCP切换为...

    小小科
  • 排序算法-冒泡排序

    排序算法-冒泡排序 <?php /** * 冒泡排序 * * @param array $value 待排序数组 * * @return array...

    琯琯

扫码关注云+社区

领取腾讯云代金券