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. Django的ORM获取单表数据的三种方法

    前言主题是从数据库取数据,把数据展现到前端客户端 一共有三种方法如下: 1,以对象的方法: 2,以字典的方法: 3,以元组的方法: 以对象的方法 说明:获取的是QuerySet类型,输出的是每个元素都 ...

  2. C# 对象和类型(2) 持续更新

    类 class PhoneClass  { public const string DayOfSendingBill = "Monday"; public int Customer ...

  3. Mybatis一对一和一对多配置

    作者:夕下奕林 问题描述 现在有三张数据表,表名为orders,orderdetail,items,分别表示订单,订单详情,商品. 其中一个订单包含多个订单详情,表示订单中的不同个具体的商品,订单详情 ...

  4. TypeHandler简介及配置(mybatis源码篇)

    作者:南柯梦 Mybatis中的TypeHandler是什么? 无论是 MyBatis 在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时,都会用类型处理器 ...

  5. django nginx uwsgi 502 Gateway

    前提:腾讯云服务器有个内网ip和外网ip 首先检查使用的端口是否正常可用 1.检查端口是否开放,在腾讯云控制台安全组查看 2.检查防火墙端口是否开放 systemctl start firewalld ...

  6. log4j.xml常用配置

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  7. jmeter-post请求自动变成get,提示请求方式错误,修改协议即可

    修改协议: http  改为  https  或反之

  8. C语言位运算题解

    #include <stdio.h> #include <stdlib.h> #include <string.h> //#define NONBLANK 1 ma ...

  9. webpack给目录起别名

    1. 配置文件目录: build>webpack.base.config.js: resolve: { alias: { '@': resolve('src'), 'styles': resol ...

  10. node 中的global对象和process对象

    官方文档:http://nodejs.cn/api/ 因为Node.js是运行在服务区端的JavaScript环境,服务器程序和浏览器程序相比,最大的特点是没有浏览器的安全限制了,而且,服务器程序必须 ...