1：datalist元素，一般与input组建配合使用，以定义可能输入的值，例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <text>输入你最喜欢的汽车</text>

    <input list="cars" />

    <datalist id="cars">

        <option value="BMW">

        <option value="Ford">

        <option value="Volvo">

    </datalist>

</body>

</html>

可自行复制运行。

2：placeholder定义出现在输入框内的提示文本

密码：<input type="password" name="pwd2" id="pwd1" required placeholder="请输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

3:required的属性，检测输入框内是否有内容。

4：autocomplete保护用户敏感信息，如：输入密码的时候不进行显示。

5：下列代码对所介绍的属性进行了一次运用，如有不懂请留言

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5 Forms</title>

    <style>

    *{margin:0;padding:0;}

    h1{

        text-align: center;

        background:#ccc;

    }

    form{

        /* text-align:center; */

    }

    div{

        padding:10px;

        padding-left:50px;

    }

    .prompt_word{

        color:#aaa;

    }

    </style>

</head>

<body>

    <h1>用户注册表</h1>

    <form id="userForm" action="#" method="post" oninput="x.value=userAge.value">

        <div>

            用户名：<input type="text" name="username" required pattern="[0-9a-zA-z]{6,12}" placeholder="请输入用户名">

            <span class="prompt_word">用户名必须是6-12位英文字母或者数字组成</span>

        </div>

        <div>

            密码：<input type="password" name="pwd2" id="pwd1" required placeholder="请输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

            <span class="prompt_word">密码必须是英文字母开头和数字组成的10-20位字符组成</span>

        </div>

        <div>

            确认密码：<input type="password" name="pwd2" id="pwd2" required placeholder="请再次输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

            <span class="prompt_word">两次密码必须一致</span>

        </div>

        <div>

            姓名：<input type="text" placeholder="请输入您的姓名" />

        </div>

        <div>

            生日：<input type="date" id="userDate" name="userDate">

        </div>

        <div>

            主页：<input type="url" name="userUrl" id="userUrl">

        </div>

        <div>

            邮箱：<input type="email" name="userEmail" id="userEmail">

        </div>

        <div>

            年龄：<input type="range" id="userAge" name="userAge" min="1" max="120" step="1" />

            <output for="userAge" name="x"></output>

        </div>

        <div>

            性别：<input type="radio" name="sex" value="man" checked>男<input type="radio" name="sex" value="woman">女

        </div>

        <div>

            头像：<input type="file" multiple>

        </div>

        <div>

            学历：<input type="text" list="userEducation">

                    <datalist id="userEducation">

                        <option value="初中">初中</option>

                        <option value="高中">高中</option>

                        <option value="本科">本科</option>

                        <option value="硕士">硕士</option>

                        <option value="博士">博士</option>

                        <option value="博士后">博士后</option>

                    </datalist>

        </div>

        <div>

            个人简介：<textarea name="userSign" id="userSign" cols="40" rows="5"></textarea>

        </div>

        <div>

            <input type="checkbox" name="agree" id="agree"><label for="agree">我同意注册协议</label>

        </div>

    </form>

    <div>

        <input type="submit" value="确认提交" form="userForm" />

    </div>

</body>

</html>

input 表单的更多相关文章

  1. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  2. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

  3. input type类型和input表单属性

    一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...

  4. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  5. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  6. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  7. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

  8. mui弹出输入法遮住input表单元素

    转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素   问题如下:当我用mui开发app时,在mui-sc ...

  9. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  10. react中使用Input表单双向绑定方法

    input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete="ne ...

随机推荐

  1. PHP中pdo的使用

    <?php /** *下面代码中information为表名 * */ //1.先要连数据库 $pdo=new PDO('mysql:host=localhost;dbname=数据库名','用 ...

  2. 飞漫魏永明：从MiniGUI看嵌入式十年得与失

    日前,飞漫软件创始人魏永明,在飞漫成立十周年之际,回顾了公司发展这十年,同时也回顾了嵌入式发展的这十年.魏永明以自身涉及嵌入式产业的方方面面,创新.人员管理.工程管理.教育培训.经营策略等多方面,并且 ...

  3. python基础：流程控制案例：

    1,简述编译型与解释型的语言,且分别列出你知道的哪些语言属于编译型,哪些属于解释型. 答:简单理解编译型语言类似谷歌翻译,整篇读入整篇翻译,代表语言有C语言,解释型语言类似同   声传译,读入一行翻译 ...

  4. sysbench 数据库性能测试工具的使用

    sysbench 数据库性能测试 Mac上安装sysbench测试工具 brew install sysbench 测试sysbench 是否安装成功 //执行这条指令 sysbench cpu -- ...

  5. string::assign

    string (1) string& assign (const string& str); substring (2) string& assign (const strin ...

  6. Linux文件系统之删除文件、文件夹（rm,rmdir）

    rm命令,rmdir命令 rm命令Remove,功能:1)删除目录,2)删除文件.  (可以递归的删除指定目录的所有文件及子目录) 注意:rm是一个危险的命令,使用的时候要特别当心,尤其对于初学者来说 ...

  7. CF732F Tourist Reform[边双缩点]

    题意:给无向图每一条边定向,使得每个点可达点数$R_i$最小值尽可能大,求方案. 条件反射想到二分答案,然后看怎么检验,发现要让所有点$R_i$大于等于某一个值,首先我们关注某些特殊的子图:如果有环的 ...

  8. [MySQL优化] -- 如何使用SQL Profiler 性能分析器

    mysql 的 sql 性能分析器主要用途是显示 sql 执行的整个过程中各项资源的使用情况.分析器可以更好的展示出不良 SQL 的性能问题所在. 下面我们举例介绍一下 MySQL SQL Profi ...

  9. python的内置函数（一）

    1.数学计算函数 abs(x) 求绝对值1.参数可以是整型,也可以是复数2.若参数是复数,则返回复数的模 complex([real[, imag]]) 创建一个复数 divmod(a, b) 分别取 ...

  10. javascript内置对象一： Array数组

    在JavaScript中的任何事物,字符串,数组,函数等等都是对象. 理解:浏览器自己封装好的对象,可以直接使用. push   /pʊʃ/  增加 在末尾增加              unshif ...