h5新增的表单标签 - 蓝蓝设计_UI设计公司

帝皇彩票官网

h5新增的表单标签

2020-2-21 释然 前端及开发文章及欣赏

h5新增的表单标签
原创weixin_46366721 最后发布于2020-02-29 12:27:39 阅读数 13  收藏
展开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
       /* 谷歌 */
       input::-webkit-input-placeholder{
           color:blue;
       }
       /* 火狐19+ */
       input::-moz--input-placeholder{
           color:blue
       }
       /* 火狐4-18 */
       input:-moz-input-placeholder{
           color:blue;
       }
       /* ie高版本,ie+ */
       input::-ms-input-placeholder{
           color:blue;
       }
       /* 欧鹏 */
       input::-o-input-placeholder{
           color:blue;
       }
       
   </style>
</head>
<body>
<form action="" novalidate>
    <input type="email">
    <input type="submit">
    <br>
    <input type="url">
    <input type="submit">
    <br>
    <input type="range">
    <input type="submit">
    <br>
    <input type="number">
    <input type="submit">
    <br>
    <input type="search">
    <input type="submit">
    <br>
    <input type="color">
    <input type="submit">
    <br>
   <input type="time">
   <br>
   <input type="month">
   <br>
   <input type="week">
   <br>
   <!-- <input type="datetime-local> -->
   <input type="date">
   <br>
   <!-- <input type="text" required>
   <input type="submit"> -->
    <br>
    <input type="number" step="3">
    <input type="submit">
    <br>
    <input type="text" name="aa" autocomplete="off">
    <input type="submit">
    <br>
    <input type="text"  value="" placeholder="请输入您的姓名:"  autofocus>
    <input type="submit">
    <br>
    <input type="text" placeholder="请输入您的手机号:" pattern="^1[3|5|8]\d{9}$">
    <input type="submit">
    <br>
    <input type="file" multiple>
    <br>
    <input type="url" list="lll">
    <datalist id="lll">
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sina.com" label="新浪"></option>
        </datalist>
    <input type="submit">
</form>
</body>
</html>

h5新增type类型:

Type=“email” 限制用户必须输入email类型
Type=“url” 输入的网址前面必须加上http://
Type=“range” 产生一个滑动条表单
Type=“number” 必须输入的是数字,调整数字大小(谷歌浏览器输入字母不可以,但是可以输入e;火狐可以输入字母,不能提交)
Type=“search” 产生一个搜索意义的表单(火狐浏览器没有叉号,谷歌有)
Type=“color” 生成一个颜色选择的表单;
产生很大的兼容问题:

type=“time” 限制用户必须输入时间类型
type=“month” 限制用户必须输入月份类型(火狐浏览器不显示)
type="week"限制用户必须输入周类型
type="datetime-local"选取本地时间
type=“date”
新增表单属性:

required 检测是否为空;

min:最小值

max:最大值

step:数值增加的幅度; 如果输入的是step=“3”,搜索框输入2,按住上键调的话,会是3,因为法定值:-3 0 3 6 9

autocomplete是否自动提示信息 on(默认值)off;和name="" 一起使用;

placeholder:文本框的提示信息(value的值得手动删除,而placeholder不用删除,可以直接输入内容)

autofocus:自动聚焦,一个页面只能存在一个聚焦(auto:自动)

pattern:后面的属性值是一个正则表达式
//手机号验证pattern=“^1[3][5]\d{9}$”

novalidate:取消验证,放在form里面

multiple:选择多个文件上传

list:提示信息;必须结合datalist标签,绑定datelist (谷歌提示value和label,而火狐只有label提示)

h5:新增的表单标签

datalist
option
output:计算结果输出、脚本的输出

标签: h5新增的表单标签

Powered by sitemap
pk10怎么玩 吉利彩票导航 华夏彩票注册 帝皇彩票登陆 迪士尼彩乐园 吉利彩票导航 桔子彩票平台 博发彩票登陆 帝皇彩票平台 吉利彩票投注