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. 《Python数据科学手册》

    <Python数据科学手册>[美]Jake VanderPlas著 陶俊杰译 Absorb what is useful, discard what is not, and  add wh ...

  2. Spark（一）wordcount

    Spark(一)wordcount 一.新建一个scala项目 在maven中导入 <!-- https://mvnrepository.com/artifact/org.apache.spar ...

  3. Js操作DOM元素及获取浏览器高宽

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...

  4. 认识Caffe与Caffe2

    认识Caffe与Caffe2 目录: 一.Caffe的作者-贾扬清 二.Caffe简介--Caffe.Caffe2.Caffe2Go 三.认识Caffe 四.认识Caffe2 五.认识Caffe2Go ...

  5. C++-cin与scanf cout与printf效率问题

    http://blog.csdn.net/l2580258/article/details/51319387 void cin_read_nosync() { freopen("data.t ...

  6. CentOS下更改yum源

    centos下下载工具为yum,对应的源在/etc/yum.repos.d/CentOS-Base.repo文件下,修改其URI中前面的网络地址即可

  7. solr不是自启动，添加code失败

    原文:https://blog.csdn.net/qq_30242987/article/details/100044964 我主要的问题是  conf要复制  configests/sample_t ...

  8. linux基础_用户组的管理

    1.创建组 语法:groupadd 组名 2.删除组 语法:groupdel 组名 3.创建用户时,直接指定组 语法:useradd -g 用户组 用户名 4.修改用户的组 语法:usermod -g ...

  9. Fiddler 显示客户端请求时间，请求耗时，服务器地址

    # 效果图 打开 CustomRules.js (C:\Users\UsersName\Documents\Fiddler2\Scripts):打开 fiddler 时 windows 快捷键 -&g ...

  10. Codeforces Round #346 (Div. 2) A题 [一道让我生气的思维题·]

    A. Round House Vasya lives in a round building, whose entrances are numbered sequentially by integer ...