H5新增表单控件

最新推荐文章于 2024-04-27 21:00:39 发布

proud1212

最新推荐文章于 2024-04-27 21:00:39 发布

阅读量1.2k

点赞数 4

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44309299/article/details/123543682

版权

新增表单控件
   数据列表
       <input type="" list="">
<datalist id="id 值">
    <option value="值">文本</option>
</datalist>
       电子邮箱
<input type="email">
       url
<input type="url">
       数字域
<input type="number">
       搜索域
<input type="search">
       手机号码
<input type="tel">
       日期控件
           年月
<input type="month">
           年周
<input type="week">
           年月日
<input type="date">
           时间
<input type="time">
           UTC 时间
<input type="datetime">
           本地时间
<input type="datetime-local">
       滑动条
<input type="range">
       拾色器
<input type="color">

案例一个学员登记表的实现

要求

1.登陆名文本框内的值不能修改,只能查看(注:可以先在文本框内填入值）
2.真实姓名只能输入汉字，必填项，且自动获取焦点
3.真实年龄必须在[15，120]范围内，必填项
4.出生日期，必填项
5.身份证号码必填项，能够纯数字18位身份证号
6.手机号码，必须填写，11位数字
7.个人主页，选填项，默认为http://www.baidu.com，获取焦点后，有下拉列表可供选择
8.幸运色，可以自选，默认为黄色
9.为学员登记表增加背景图片
10.不让浏览器自动记录之前输入的值

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="01.css"/>
	</head>
	<body>
		<div class="content">
		<div class="table">
			<p class="header">学员登记表</p>
		<form action="" method="">
			<div class="item load">
				用户登录名：<input type="text" value="myemail@163.com" readonly="" />
			(不能修改，只能查看)
			</div>
			<div class="item">
				真实姓名：<input type="text" placeholder="例如：王明" autofocus="autofocus" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"/>(不能填写，只能输入汉字)
			</div>
			<div class="item">
				真实年龄：<input type="number" min="15" max="120" required="required" value="24" / >(必须填写)
			</div>
			<div class="item">
				出生日期：<input type="date" required="required"/>(必须填写)
			</div>
			<div class="item">
				电子邮箱：<input type="email" placeholder="123456@126.com" required="required"/>(必须填写)<br>
			</div>
			<div class="item">
				身份证号：<input type="text" pattern="/d{18}(/d|X|x)" required="required"/>(必须填写,能够纯数字、字母x18位身份证号)
			</div>
			<div class="item">
				手机号码：<input type="text" pattern="/d{11}"  required="required"/>(必须填写)
			</div>
			<div class="item">
				个人主页：<input list="browsers" placeholder="http://www.itcast.cn">(请选择网址)
			<datalist id="browsers">
				<option value="Safari"></option>	
				<option value="Internet Explorer"></option>	
				<option value="Opera"></option>	
				<option value="Firefox"></option>
			</datalist>
			</div>
			<div class="item">
				幸运颜色：<input type="color" value="#ffff00"/>(请选择你喜欢的颜色)
			</div>
			<div class="item">
				<input type="submit" value="提交" class="buttom"/>
				<input type="reset" value="重置" class="buttom"/>
			</div>
		</form>
		</div>
	</body>
</html>

css代码

.content
{
	width: 1442px;
	height: 717px;
	margin: 0 auto;
	background-image: url(img/form_bg.jpg);
	background-repeat: no-repeat;

}
.table
{
	float: right;
	width: 600px;
	height: 700px;
	margin-right: 40px;

}
.table .item
{
	width: 600px;
	margin-top: 15px;
	font-size: 14px;
}
.table .header
{
	font-size: 24px;
	font-weight: 500;
	margin-left: 120px;
	margin-top: 150px;
}
.table .load
{
	margin-left: -18PX;
}
.table .buttom
{
	width: 100px;
	height: 30px;
	background-color: #92b614;
	color: #ffffff;
	margin-left: 18PX;
	border: none;
}

具体实现

proud1212

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
H5新增表单控件

新增表单控件数据列表 <input type="" list=""><datalist id="id 值"> <option value="值">文本</option></datalist> 电子邮箱<input type="email"> url<input type="url"> 数字域<input type="number...
复制链接

扫一扫