input 表单
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 表单的更多相关文章
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- 不让input表单的输入框保存用户输入的历史记录
如何不让input表单的输入框保存用户输入的历史记录. 有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...
- input type类型和input表单属性
一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- JavaWeb后台从input表单获取文本值的两种方式
JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- 让input表单输入框不记录输入过信息的方法
有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...
- mui弹出输入法遮住input表单元素
转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素 问题如下:当我用mui开发app时,在mui-sc ...
- 自定义常用input表单元素三：纯css实现自定义Switch开关按钮
自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...
- react中使用Input表单双向绑定方法
input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete="ne ...
随机推荐
- 一周死磕fastreport ----ASP.NET （二）
前一章忘了为什么要死磕fastreport 了,这次简单说一下, 公司本来有一个winfrom 窗体打印程序,可是上司觉得太麻烦了,(前几天 我一直在做web版看板,然后发现还不错,于是 想把公 ...
- java_八大数据类型
一.整型 1.byte 1个字节(8位--一个字节占8位)-128~127 2.short 2个字节 -32768~32767 3.int 4个字节(常用) 4.long 8个字节 ...
- ARM体系结构与编程读书笔记——处理器的寄存器
ARM处理器共有37个寄存器,其中包括: 31个通用寄存器,包括程序计数器(PC)在内,寄存器都是32位: 6个状态寄存器,这些寄存器都是32位的,目前只使用了其中12位: 通用寄存器 可以分为下面3 ...
- jemeter生成测试报告
Jmeter生成测试报告 相对于Loadrunner,Jmeter其实也是可以有测试报告产出的,虽然一般都不用(没有Loadrunner的报告那么强大是一方面),还是顺手写一下吧,其实方法在用命令 ...
- oppo面经-java开发
Oppo一面(1)自我简介(2)介绍一个自己做过的最得意的项目,项目的细节,难点,怎么解决的,还存在的问题,有什么优化的想法吗(这个我说了很长时间,面试官说非计算机专业的,有这种实习经验确实能加分)( ...
- python打包工具distutils、setuptools的使用
python中安装包的方式有很多种: 源码包:python setup.py install 在线安装:pip install 包名(linux) / easy_install 包名(window) ...
- zencart单独屏蔽左右边栏代码
1.屏蔽左栏:打开模板目录下的tpl_main_page.php文件,找到以下代码 if (!isset($flag_disable_left) || !$flag_disable_left) { 在 ...
- jQuery.trim()方法
定义和用法 $.trim() 函数用于去除字符串两端的空白字符. 注意:$.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符.如果这些空白字符在字符串中间时,它们将 ...
- Aizu - 1383 Pizza Delivery (最短路图+DAG上的割边)
题意:给出一张有向图,每条边有长度,对于每条边,你要回答将该边的方向取反后,从起点到终点的最短距离是增加or减小or不变. 首先求出起点到所有点的最短距离和所有点到终点的最短距离(两次DIjkstra ...
- LaTeX新人使用教程[转载]
LaTeX新人教程,30分钟从完全陌生到基本入门 by Nan 对于真心渴望迅速上手LaTeX的人,前言部分可以跳过不看. 本教程面向对LaTeX完全无认知无基础的新人.旨在让新人能够用最简单快捷的方 ...