整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!-- 定义表单 -->
<form action='#' method='post'>
<table border='1' align='center' width='500'>
<tr>
<td><label for='username'>用户名</label></td>
<td><input type='text' name='username' id='username'></td>
</tr>
<tr>
<td><label for='password'>密码</label></td>
<td><input type='password' name='password' id='password'></td>
</tr>
<tr>
<td><label for='email'>Email</label></td>
<td><input type='email' name='email' id='email'></td>
</tr>
<tr>
<td><label for='name'>姓名</label></td>
<td><input type='text' name='name' id='name'></td>
</tr>
<tr>
<td><label for='tel'>手机号</label></td>
<td><input type='text' name='tel' id='tel'></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type='radio' name='gender' value='male'>男
<input type='radio' name='gender' value='female'>女
</td>
</tr>
<tr>
<td><label for='birthday'>出生日期</label></td>
<td><input type='date' name='birthday' id='birthday'></td>
</tr>
<tr>
<td><label for='checkcode'>验证码</label></td>
<td><input type='text' name='checkcode' id='checkcode'>
<img src='image/verify_code.jpg'>
</td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='注册'>
</td>
</tr>
</table>
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
/*总体的样式*/
<style>
/*盒子样式*/
#box{
width: 350px; //宽
height: 450px; //高
border: 1px solid black; //边框
border-radius: 10px; //边框弧度
font-family: 黑体; //字体
letter-spacing:8px; //段间距
word-spacing: 10px; //字间距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //内边框
}
/*给'注册'赋予样式*/
.register{
width:280px ; //宽
height: 50px; //高
background-color: skyblue; //背景颜色
border-radius: 10px; //边框弧度
}
/*将所有边框都改变*/
*{
border-radius: 5px; 边框弧度
}
/*使用class选择器，赋予number宽高和边框*/
.number{
width: 185px; //宽
height: 27px; //高
border-width: 1px; //边框宽度
}
/*id选择器*/
#two{
width: 55px; //宽
border-width: 1px; 边框宽度
}
/*id选择器*/
#phone{
width: 103px; //宽
}
/*class 选择器*/
.boxs{
zoom: 75%; //清除浮动
color: darkgray; //颜色
}
/*class选择器*/
.box_a{
width: 50px; //宽
height: 50px; //高
background-image: url("../image/04.jpg "); //背景图片
background-repeat: no-repeat; // 是否平铺
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相对定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
<label for="name">用户名</label>
<input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
<label for="phone">手机号</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
<label for="mima">密 码</label>
<input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
<label for="mima">验证码</label>
<input type="password" placeholder="请输入验证码" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">阅读并接受协议<br>
</div>
<input type="submit" value="注册" class="register" >
</form>
</div>
</body>
</html>
在这里插入图片描述单数据提交是网站中比较常见的用户交互行为，在html页面中常见的是注册表单，提交数据前，会检查表单数据的完整性，是否出现漏填、误填）。如果出现漏填、误填会提示用户提示用户，确保填写数据准确有效。在检查表单数据数据一般都是使用php或者JavaScript，今天为大家介绍怎么使用html5新增元素制作用户注册页面并进行检查的数据检查。
html5代码如下:
页面运行结果
分析
1、H5中的fieldset标签
fieldset标签用于表单中的元素组合起来，标签会在相关表单元素周围绘制边框，大部分浏览器支持这个标签，本实例中fieldset标签把表单中所有的元素都包裹起来。
2、input标签
input标签用户信息，type有不同的值，输入字段有很多形式。比如说文本字段、复选框、按钮（单选、复选），input不是html5新增的元素，html4也可以支持iuput标签。只是h5新增加了一些新的input属性，比如说本例中的required属性，它告诉用户输入字段的值是必需的，不能为空，input的placeholder属性用于帮助用户填写输入字段的提示。input标签的list属性，表示输入字段的预定义选项的 datalist 。
3、output标签
output是h5中的新标签，它定义不同类型的输出。onforminput是input标签的属性，h5支持onforminput属性，它表示户输入时运行的脚本。本例中是用户输入时运行“value=range1.value”。
4、datalist标签
datelist定义选项列表，和input元素配合使用，input 元素的 list 属性来绑定 datalist标签，不能单独使用。本例中的datelist标签是提示输入的个人主页的示例列表。注意的是ie不支持datelist标签这一点是需要注意的。
5、label标签
label标签不会向用户呈现任何效果，如果在 label 元素内点击文本，会触发控件。它不是h5中的新标签。
关于“html5新增元素制作用户注册页面”先聊到这。每天学习一个知识点，每日寄语”每一个成功者都有一个开始。勇于开始，才能找到成功的路。”如转载请标注出处。
*请认真填写需求信息，我们会在24小时内与您取得联系。
