type类型

email     //输入email格式

tel       //手机号码

url       //只能输入url格式

number    //只能输入数字

search    //搜索框

range     //范围 滑动条

color     //拾色器

time      //时间

date      //日期不是绝对的

datetime  //时间日期

month     //月份

week       //星期

//部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

表单元素

1、<datalist>数据列表与input标签使用

2、<keygen>生成加密字符串，谷歌没有效果

3、<output>元素用于不同类型的输出，比如计算或脚本输出

4、<meter>表示度量器，不建议用作进度条

5、<progress>进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        form {

            width: 100%;

            max-width: 400px;

            min-width: 200px;

            margin: 100px auto;

        }

        input {

            width: 100%;

            margin-top: 10px;

        }

        meter, progress {

            width: 100%;

        }

    </style>

</head>

<body>

<form action="">

    <fieldset>

        <legend>表头</legend>

        <label for="sport">爱好：</label>

        <input type="text" list="hobby" name="hobby" id="sport">

        <datalist id="hobby">

            <option value="篮球"></option>

            <option value="足球"></option>

            <option value="羽毛球"></option>

            <option value="排球"></option>

        </datalist>

        <br><br>

        <label for="me">度量器：</label>

        <meter min="0" max="100" low="20" high="80" value="60" id="me"></meter>

        <br><br>

        <label for="pro">进度条：</label>

        <progress min="0" max="100" low="20" high="80" value="60" id="pro"></progress>

    </fieldset>

</form>

</body>

</html>

表单属性

placeholder   //占位符

autofocus     //获取焦点

multiple      //文件上传多选或多个邮箱地址

autocomplete  //自动完成，用于表单元素，也可用于表单自身(on/off)

form          //指定表单项属于哪个form，处理复杂表单时会需要

novalidate    //关闭验证，可用于<form>标签，谷歌没有效果

required      //必填项

pattern       //正则表达式 验证表单
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        form {

            width: 100%;

            max-width: 400px;

            min-width: 200px;

            margin: 100px auto;

        }

        input {

            width: 100%;

            margin-top: 10px;

        }

        meter, progress {

            width: 100%;

        }

    </style>

</head>

<body>

<form action="" id="form">

    <fieldset>

        <legend>表头</legend>

        <label for="sport">placeholder：</label>

        <input type="text" name="hobby" id="sport" placeholder="请输入您的兴趣爱好">

        <br><br>

        <label for="com">autocomplete：</label>

        <input type="text" name="com" id="com" autocomplete="on">

        <br><br>

        <label for="firstName">autofocus：</label>

        <input type="email" name="firstName" id="firstName" autofocus>

        <br><br>

        <label for="file">multiple ：</label>

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

        <br><br>

        <label for="nova">novalidate ：</label>

        <input type="email" name="novalidate " id="nova" novalidate>

        <br><br>

        <label for="re">required ：</label>

        <input type="text" name="re" id="re" required>

        <br><br>

        <label for="pa">pattern ：</label>

        <input type="tel" name="pa" id="pa" pattern="1\d{3}">

        <br><br>

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

    </fieldset>

</form>

<label for="other">表单外的一个input标签</label><input type="text" name="other" id="other" form="form">

</body>

</html>

autocomplete：是带有name属性的input标签提交后，再次提交会触发事件，off会关闭自动显示历史输入的值 ，on会显示

form：表单外的input标签会随着表单提交

表单事件

oninput：用户输入内容时触发，可用于移动端输入字数统计

oninvalid：当验证不通过时触发

setCustomValidity：可获取验证错误信息并且自定义值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        form {

            width: 100%;

            max-width: 400px;

            min-width: 200px;

            margin: 100px auto;

        }

        input {

            width: 100%;

            margin-top: 10px;

        }

        meter, progress {

            width: 100%;

        }

    </style>

</head>

<body>

<form action="" id="form">

    <fieldset>

        <legend>表头</legend>

        <label for="acount">账号：</label>

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

        <br><br>

        <label for="em">email：</label>

        <input type="email" name="em" id="em">

        <br><br>

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

    </fieldset>

</form>

<script>

    var inpArr = document.getElementsByTagName("input");

    inpArr[0].oninput = function () {

        console.log(this.value.length);

    }

    inpArr[1].oninvalid = function () {

        this.setCustomValidity("邮箱都能写错啊！天才");

    }

</script>

</body>

</html>

html5——表单的更多相关文章

  1. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  2. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  3. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  4. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  5. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  7. HTML5表单提交和PHP环境搭建

    HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

  8. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  9. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  10. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

随机推荐

  1. JVM即时编译（JIT）

    Java解释执行过程: 代码装入-代码校验-代码执行 Java字节码的执行方式分为两种:即使编译方式和解释执行方式.即时编译是值解释器先将字节码编译成机器码,然后执行该机器码.解释执行的方式是指解释器 ...

  2. WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize

    中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...

  3. vue2的简单时间选择组件

    github:  https://github.com/longfei59418888/vui   (记得给一个 start,以后有一起讨论,各种好组件) demo : http://60.205.2 ...

  4. Android百度地图SDK 导航初始化和地图初始化引起的冲突

    如题,相同是百度地图SDK开发过程中遇到的一个问题.交代下背景: 开发了一款内嵌百度地图的应用,因此里面差点儿相同将眼下百度地图SDK开放的主要功能都用到了,定位,地图显示,覆盖物标示.POI搜索,行 ...

  5. 【Spring四】AOP之XML配置

    AOP:Aspect Oriented  Programming 面向切面编程 面向切面编程的核心是动态代理设计模式.请先參见动态代理设计模式笔记. 以Hibernate保存一个对象到数据库为例,因为 ...

  6. 通过adb push 从电脑里复制文件到手机里

    在开发中.我们 常常 须要 从 电脑 拷贝 一些 文件 到  自己的 app 目录里. 我之前的 方式 是 将 手机 链接 电脑,然后 从 电脑里 找到 app 文件夹,然后 进行 拷贝. 可是 这种 ...

  7. bzoj1477 && exgcd学习笔记

    exgcd 由于忘记了exgcd,这道题就没做出来... exgcd的用处是求ax+by=gcd(a,b)这样方程的解 大概是这个样子的 void ext_gcd(long long a, long ...

  8. servlet3.0 JQuary Ajax基本使用

    servlet3.0 没有web.xml文件,需要使用注解进行配置. js: $(document).ready(function(){ $("#btn").click(funct ...

  9. U盘在电脑上安装CentOS 7 系统过程详解

    U盘制作CentOS系统启动盘 在电脑上下载并安装UltraISO软件,如百度云:http://pan.baidu.com/s/1hrGtvEG 打开UltraISO软件,找到CentOS.iso的映 ...

  10. 解决UTF-8方法归纳

    1:通过spring配置过滤器解决 <!-- 配置Spring提供的字符编码过滤器 --> <filter> <filter-name>SpringCharacte ...