专栏首页eadelaHTML5-新增type属性

HTML5-新增type属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    用户名:<input type="text" name="userName"> <br>
    密码:<input type="password" name="userPwd"> <br>
    <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->
    邮箱:<input type="email"> <br>
    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
    电话:<input type="tel"> <br>
    <!--验证只能输入合法的网址:必须包含http://-->
    网址:<input type="url"> <br>
    <!--number:只能输入数字(包含小数点),不能输入其它的字符
    max:最大值
    min:最小值
    value:默认值-->
    数量:<input type="number" value="60" max="100" min="0"> <br>
    <!--search:可以提供更人性化的输入体验-->
    请输入商品名称:<input type="search"> <br>
    <!--range:范围-->
    范围:<input type="range" max="100" min="0" value="50"> <br>
    颜色:<input type="color"> <br>
    <!--日期时间相关-->
    <!--time:时间:时分秒-->
    时间:<input type="time"> <br>
    <!--date:日期:年月日-->
    日期:<input type="date"> <br>
    <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
    日期时间:<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间:<input type="datetime-local"> <br>
    月份:<input type="month"> <br>
    星期:<input type="week">
    <!--提交-->
    <input type="submit">
</form>
</body>
</html>

 其他属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="myForm">
    <!--placeholder:提示文本,提示占位-->
    <!--autofocus:自动获取焦点-->
    <!--autocomplete:自动完成:on:打开  off:关闭
    1.必须成功提交过:提交过才会记录
    2.当前添加autocomplete的元素必须有name属性-->
    用户名:<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
    <!--tel并不会实现验证,仅仅是在移动端能够弹出数字键盘-->
    <!--required:必须输入,如果没有输入则会阻止当前数据提交-->
    <!--pattern:正则表达式验证
    *:代表任意个
    ?:代表0个或1个
    +:代表1个或多个-->
    手机号:<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
    <!--multiple:可以选择多个文件-->
    文件:<input type="file" name="photo" multiple> <br>
    <!--email:有默认验证  在email中,multiple允许输入多个邮箱地址,以逗号分隔-->
    邮箱:<input type="email" name="email" multiple><br>
    
    <!--提交:-->
    <input type="submit"> <br>
</form>
<!--下面这个表单元素并没有包含在form中:默认情况下面表单元素的数据不会进行提交-->
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候,也会将当前表单元素的数据一起提交-->
地址:<input type="text" name="address" form="myForm">
</body>
</html>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5-autio、video视频音频

    eadela
  • java--反射原理及操作

    eadela
  • JSP基础--EL表达式

    JSP2.0要把html和css分离、要把html和javascript分离、要把Java脚本替换成标签。标签的好处是非Java人员都可以使用。

    eadela
  • input的类型汇总

    贵哥的编程之路
  • HTML5新增表单类型

    HTML5新增了input更多类型的框,如颜色,邮箱,多文件还有对正则表达式的支持!

    十月梦想
  • 面试常考:Synchronized 有几种用法?

    我们都知道 Synchronized 是线程安全同步用的,大部分程序可能只会用到同步方法上面。其实 Synchronized 可以用到更多的场合,栈长列举了以下...

    Java技术栈
  • 单例模式(含多线程处理)

    单例,顾名思义一个类只有一个实例。为什么要使用单例模式,或者说什么样的类可以做成单例的?在工作中我发现,使用单例模式的类都有一个共同点,那就是这个类没有状态,也...

    烂猪皮
  • 【入门指导】入门javascript需要看的书

    JavaScript权威指南(第6版) ? 对于 JavaScript 新手入门来说,其实看什么书不重要,重要的是要能引起你兴趣使得你愿意动动手做做项目。在动手...

    程序员互动联盟
  • 教程 | TensorFlow 官方解读:如何在多系统和网络拓扑中构建高性能模型

    选自Tensorflow 机器之心编译 参与:黄玉胜、黄小天 这个文档和附带的脚本详细介绍了如何构建针对各种系统和网络拓扑的高性能可拓展模型。这个技术在本文档中...

    机器之心
  • 使用三拼域名的“奢分期”再融千万!

    2017年9月,金融消费分期平台“奢分期”正式对外宣布已完成数千万人民币pre-A轮融资,由海朋资本领投,疯蜜投资跟投。此前奢分期已获得腾讯众创、知...

    躲在树上的域小名

扫码关注云+社区

领取腾讯云代金券