前端开发者| 前端开发共享 百度云 |
| 百度前端开发绩效 |
| 前端开发百度文库 |
| 前端开发传智播客百度资源 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<meta name=”Author” content=”aoliann” />
<meta name=”Keywords” content=”表单” />
<title>智能表单</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
height: 700px;
background: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1504410220&di=e0b2de3a8f48aee8d9750e9536f7b573&src=http://d.hiphotos.baidu.com/zhidao/pic/item/0824ab18972bd4072ef527017e899e510fb3091f.jpg)
no-repeat center center;
background-size: cover;
}
#box {
position: fixed;
top: 50%;
left: 50%;
width: 600px;
height: 480px;
padding: 30px 0px;
background: rgba(0, 0, 0, 0.5);
margin: -260px 0 0 -300px;
border-radius: 10px;
}
#box form {
height: 100%;
width: 90%;
}
#box form div.list {
width: 100%;
line-height: 35px;
margin: 20px 0;
text-align: center;
}
#box form div.list span {
display: block;
float: left;
width: 180px;
height: 35px;
line-height: 35px;
color: #fff;
text-align: right;
font-size: 16px;
}
#box form div.list input {
width: 280px;
height: 35px;
border: 0;
padding: 0 10px;
}
#box form div.list input.sub {
width: 140px;
background: #5ab6df;
color: #fff;
margin-top: 20px;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id=”box”>
<form action=”https://www.baidu.com” method=”post”>
<div class=”list”>
<span>姓名：</span>
<input
type=”text”
id=”txtName”
autofocus
required=”required”
/>
</div>
<div class=”list”>
<span>电话：</span>
<input type=”tel” id=”txtTel” required=”required” />
</div>
<div class=”list”>
<span>年龄：</span>
<input type=”number” id=”txtAge” required=”required” />
</div>
<div class=”list”>
<span>邮箱：</span>
<input type=”email” id=”txtEmail” required=”required” />
</div>
<div class=”list”>
<span>网址：</span>
<input type=”url” id=”txtUrl” required=”required” />
</div>
<div class=”list”>
<span>出生日期：</span>
<input type=”date” id=”txtDate” required=”required” />
</div>
<div class=”list”>
<span>所在城市：</span>
<input
type=”text”
id=”txtCity”
list=”dlCity”
required=”required”
/>
<datalist id=”dlCity”>
<option value=”北京”>北京</option>
<option value=”上海”>上海</option>
<option value=”广州”>广州</option>
<option value=”深圳”>深圳</option>
</datalist>
</div>
<div class=”list”>
<input class=”sub” type=”submit” value=”提交信息” />
</div>
</form>
</div>
</body>
</html>
| 百度前端开发 |
| web前端开发最佳实践百度云 |
| 百度前端开发者api |
» 本文来自：前端开发者 » 《前端开发实用的表单》
» 本文链接地址：https://www.rokub.com/6769.html
» 您也可以订阅本站：https://www.rokub.com
Satisfy 4个月前 (06-04)说：
Pitt 4个月前 (06-03)说：
评论前必须登录！
注册