<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap-colorpicker/css/bootstrap-colorpicker.css">
<link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datetimepicker.min.css">
<style type="text/css">
.main-box {
width: 640px
margin: 40px auto
}
</style>
</head>
<body>
<div class="main-box">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入用户名">
</div>
</div>
<div class="form-group row">
<label for="pwd" class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
</div>
<div class="form-group row">
<label for="pwd2" class="col-sm-2 col-form-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd2" placeholder="请输入确认密码">
</div>
</div>
<div class="form-group row">
<label for="area" class="col-sm-2 col-form-label">区域</label>
<div class="col-sm-10">
<select class="form-control form-control-lg" id="area">
<option>四川省</option>
</select>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">性别</legend>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"
checked="true">
<label class="form-check-label" for="inlineRadio1">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">女</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<label for="age" class="col-sm-2 col-form-label">年龄</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="age" placeholder="请输入年龄">
</div>
</div>
<div class="form-group row">
<label for="age" class="col-sm-2 col-form-label">生日</label>
<div class="col-sm-10">
<input size="16" type="text" value="2012-06-15" readonly class="form-control form_datetime">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">手机号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" placeholder="请输入手机号">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">头像</label>
<div class="col-sm-10">
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="form-group row">
<label for="site" class="col-sm-2 col-form-label">主页</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="site" placeholder="请输入主页">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="请输入Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">喜欢的颜色</label>
<div class="col-sm-10">
<input id="likeColor" type="text" class="form-control" value="#5367ce" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
同意服务条款
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">注册</button>
<button type="submit" class="btn">取消</button>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script src="bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script>
$('#likeColor').colorpicker()
$(".form_datetime").datetimepicker({
format: 'yyyy-mm-dd',
weekStart: 1,
todayBtn: 1, //今日日期按钮
autoclose: 1, //自动关闭
todayHighlight: 1, //高亮今日日期
startView: 2, //从日期视图开始
minView: 2,
forceParse: 0
})
</script>
</body>
</html>
案例下载
首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签（还有一些新的特性，例如数据库和缓存等特性）
以下为此页面的结构代码：
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="revised" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="robots" content="all" />
<title>页面标题</title>
</head>
<body>
<header>
<div></div><!--登陆注册区域-->
</header><!--头部[html5新标签]-->
<nav></nav><!--导航[html5新标签]-->
<div></div><!--banner-->
<div></div><!--左上-->
<div></div><!--右上-->
<div></div><!--左下-->
<div></div><!--右下-->
<footer></footer><!--底部[html5新标签]-->
</body>
</html>
注：以上为页面的大的框架，相对用HTML5新的标签更合理的，全用上了新的带有语义标签。
另外多说一下，[注册登陆]这块在html5的新标签里面没有很合适的语义化的标签，所以依然采用原有的div标签为最合理。html5只是在原有的技术的基础上更细化了，咱在制作代码的过程中没必要必须用HTML5的代码，主要看是否合理，合理的为较合适的。
多说的：不管用XHTML还是HTML5写代码，结构（HTML5）与样式（CSS）尽量要分离！
希望能帮到你！
源码如下<script>
//先查看是否有本地数据（记住密码）
/* function myfunction(){
var email = localStorage.getItem("email")
var password = localStorage.getItem("password")
if(email!=null&&password!=null){
alert("邮箱："+email+"密码："+password)
$.ajax({
url : '../servlet/LoginServlet?choose=login',
data : {
email : email,
password : password
},
dataType : 'json',
success : function(data) {
if (data.msg == "") {
alert("用户名或密码错误")
} else {
//登录成功后保存session，如果选择了记住密码，再保
存到本地
//window.location.href ='../index/index.jsp'
}
},
error : function() {
alert("系统错误")
}
})
}else{
//alert("没有信息")
}
}
function saveStorage(){
var email = document.getElementById("email").value
localStorage.setItem("email",email)
var password = document.getElementById("password").value
localStorage.setItem("password",password)
}
function login(){
$.ajax({
url : '../servlet/LoginServlet?choose=login',
data : {
email : $('#loginform input[name=email]').val(),
password : $('#loginform input[name=password]').val()
},
dataType : 'json',
success : function(data) {
if (data.msg == "") {
alert("用户名或密码错误")
} else {
//登录成功后保存session，如果选择了记住密码，再保存到
本地
window.location.href ='../index/index.jsp'
}
},
error : function() {
alert("系统错误")
}
})
}
function reg(){
$.ajax({
url : 'servlet/LoginServlet?choose=reg',
data : {
username : $('#regform input[name=username]').val(),
password : $('#regform input[name=password]').val(),
email : $('#regform input[name=email]').val(),
},
dataType : 'json',
success : function(data) {
if(data.msg == false){
alert("注册失败")
}else{
alert("注册成功请返回登录")
}
},
error : function() {
alert("系统错误")
}
})
} */
$(document).ready(function(){
//读取 localStage 本地存储，填充用户名密码,如果自动登录有值直接跳转
；
//相反，跳转到本页面,等待登陆处理
var storage = window.localStorage
var getEmail = storage["email"]
var getPwd = storage["password"]
var getisstroepwd = storage["isstorePwd"]
var getisautologin = storage["isautologin"]
if("yes" == getisstroepwd)
{
if("yes" == getisautologin)
{
if(( ("" != getEmail) ||(null != getEmail)) &&(("" !=
getPwd) ||(null != getPwd)))
