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. 【坑】Mybatis原始获取配置方式，获取配置失败

    错误环境: mysql版本:6.0.6 mybatis 3.4.1 idea 2017.1.2 maven 3.5.0 错误描述: 配置经路径见图1,classpath是java文件夹 获取配置的代码 ...

  2. 自己手写实现Dubbo

    目录 dubbo 简单介绍 为什么手写实现一下bubbo? 什么是RPC? 接口抽象 服务端实现 注册中心 消费者端: dubbo 简单介绍 dubbo 是阿里巴巴开源的一款分布式rpc框架. 为什么 ...

  3. Codeforces 1187 G - Gang Up

    G - Gang Up 思路: 每个点按时间拆点建边,然后跑最小费用流 一次走的人不能太多,假设每次走的人为k (k*k-(k-1)*(k-1))*d <= c+d k <= 24 代码: ...

  4. xml树结构

    概念:XML 指可扩展标记语言(eXtensible Markup Language).    XML 被设计用来传输和存储数据.经常被用来作为配置文件使用. XML 使用DTD(document t ...

  5. AGC刷题记

    已经刷不了几天了... AGC001 A-BBQ Easy 排个序就过了 B-Mysterious Light 手膜一下,你会发现魔改一下\(gcd\)就行了 C-Shorten Diameter 刚 ...

  6. Unity 截图选择框，中间全透明，边缘半透明

    效果:点击白色框可拖拽选择区域 代码: using System.Collections; using System.Collections.Generic; using UnityEngine; u ...

  7. setTimeout设置为0 为啥不能立马执行

    setTimeout(function(){}, timer) 是指延时执行.第一个参数是回调函数,第二个参数是指延时多久执行回调函数. setTimeout(function(){console.l ...

  8. BZOJ 3038: 上帝造题的七分钟2 / BZOJ 3211: 花神游历各国 (线段树区间开平方)

    题意 给出一些数,有两种操作.(1)将区间内每一个数开方(2)查询每一段区间的和 分析 普通的线段树保留修改+开方优化.可以知道当一个数为0或1时,无论开方几次,答案仍然相同.所以设置flag=1变表 ...

  9. centos6.5linux安装docker之升级内核

    一.运行docker Linux内核版本需要在3.8以上,针对centos6.5 内核为2.6的系统需要先升级内核.不然会特别卡 在yum的ELRepo源中,有mainline(4.5).long-t ...

  10. 上下文管理器和else块

    一.if 语句之外的 else块 else 子句不仅能在 if 语句中使用,还能在for.while和try语句中使用. (1)for :仅当 for 循环运行完毕时(即 for 循环没有被break ...