对部分生僻的input属性值解释:

type="reset": 可以一键清空form表单里面所有的数据

<form>
<input type="text" name="">
<input type="password" name="">
<input type="email" name="">
<input type="reset" value="重置">
</form>

type="file": multiple="multiple'  可以同时上传多个文件

<input type="file" name="" multiple="multiple">

datalist的运用: 输入框输入的值会自动匹配datalist下拉框的值,input的list属性值必须和datalist的id值一致

<input type="text" name="" list="same">
<datalist id="same">
<option>123</option>
<option>567</option>
</datalis>

type=“range”: input表单 oninput属性可以同步进度条的数据显示

<form oninput="o.value=r.value" novalidate="true">  //novalidate 验证表单提交的合法性
<input type="range" name="r">
<output name="o"></output> //output用于脚本的输出
</form>

表单事件

onchange适用于input、textarea、select等,当失去焦点时会触发该事件

<input type="text" name="" value="1234567890" onchange="textFun(this.value)">

input的type类型的更多相关文章

  1. html5中input的type类型有哪些(总结)

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

  2. HTML5学习笔记简明版(5):input的type超级类型

    HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...

  3. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  4. Input对象的type类型

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text        输入类型是text ...

  5. HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  6. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  7. input的type属性引申的日历组件

    HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式.所以,各浏览器根据自己的设计实现日历.目前只有谷歌浏览器完全实现日历功能.相信这种局面很快就会结束,所有的浏览器 ...

  8. form表单中的input有哪些类型

    form表单中的input有哪些类型 1.button <input type="button"/> 2.checkbox <input type="c ...

  9. 解决input为number类型时maxlength无效的问题

    使用input数字number类型的时候maxlength无效,假设需要控制输入数量为18,可以用以下方式: 无效: <input type="text"  maxlengt ...

随机推荐

  1. Mysql主从配置实战

    实战mysql主从配置 准备两个docker容器,分别在3306和3307开启两个mysql为主从数据库 可执行以下命令 docker run -p 3306:3306 --name mysql330 ...

  2. String字符串相加常见面试题

    String name1="jack"; String name2="jack"; System.out.println(name1==name2); // t ...

  3. 给大家一些改善 Python 程序的 91 个建议

    读了一本还不错的书「编写高质量代码改善 Python 程序的 91 个建议」,大多数的建议是真心不错,我虽然写python也有3年多了,但是有些地方确实没去注意过,特地整理了一下,给大家参考. 我已经 ...

  4. spring boot -整合Ehcahe

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  5. logstash笔记(二)——grok之match

    官方文档: https://www.elastic.co/guide/en/logstash/current/plugins-filters-grok.html 基本语法: %{SYNTAX:SEMA ...

  6. IT十年经典书籍

    摘自网络,近来在浏览时,发现一个叫做“IT十年经典书籍”的主题.google了一下,实在找不出这个主题的源头出处.不过这个主题中所涉及的每一本书讲出来都是振聋发聩的,大可以作为它那个行业的经典了.  ...

  7. [java]类初始化挺有意思的题目

    public class Base { private String baseName = "base"; public Base() { callName(); } public ...

  8. Chapter 4 Invitations——9

    I didn't want to get into the safety hazards that dancing presented, so I quickly made new plans. 我不 ...

  9. ES搜索结果调优

    访问我的博客 自从使用 ElasticSearch 重构了主站的搜索项目之后,之后又陆续接入了其他两个项目,目前使用 SpringBoot 方式跑了一个伪集群,主站使用的时候,比较稳定,没有人反馈说有 ...

  10. Android studio 下 JNI 开发实例

    在AS中进行 NDK 开发之前,我们先来简单的介绍几个大家都容易搞懵的概念: 到底什么是JNI,什么是NDK? 何为“交叉编译”? 先看什么是 JNI?JNI 的全称就是 Java Native In ...