涉及标签:
div:<div> 标签可以把文档分割为独立的、不同的部分。 它可以用作严格的组织工具,并且不使用任何格式与其关联。 任何类型的内容都可以放在 <div> 标签内! <div> 标签可用作 HTML 元素的容器,然后使用 CSS 设置样式或使用 JavaScript 进行操作。
label:
HTML <label> 元素(标签)表示用户界面中某个元素的说明。
属性
该元素包含 全局属性。
for: 即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素,如果可关联标签(labelable),则为已关联标签的控件,其标签就是这个 <label> 元素。如果这个元素不可关联标签,则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同,for 属性对这些元素也没有影响。
form:表示与 label 元素关联的 <form> 元素(即它的表单拥有者)。如果声明了该属性,其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置,而不仅作为 <form> 元素的后代。
input:素用于为基于 Web 的表单创建交互式控件,以便接受来自用户的数据。取决于设备和用户代理不同,表单可以使用各种类型的输入数据和控件。 <input> 元素是目前是 HTML 中最强大、最复杂的元素之一,因为它有大量的输入类型和属性组合。
网页效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
.main{
background-color: #eef5f0;
width: 400px;
height: 600px;
margin: 0 auto;
}
.header{
color: #0fa81e;
font-size: 26px;
text-align: center;
width: 400px;
height: 40px;
}
.one{
background-color: #0ddf53;
width: 400px;
height: 300px;
margin-top: 10px;
margin-bottom: 20px;
padding: auto;
}
.two{
background-color: #0ddf53;
width: 400px;
height: 230px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class ="main">
<div class="header">个人信息采集系统</div>
<div class="one">
<form name="personInfo">
<label >请输入姓名:</label><br>
<input type="text" id="name" name="name" onblur="verifyname(document.personInfo.name.value)"><br>
<label for="">请选择性别:</label><br>
<input type="radio" name="sex" id="t2" value="男" checked="checked">男
<input type="radio" name="sex" id="t3" value="女" checked="checked">女<br>
<label >请输入年龄:</label><br>
<input type="text" id="age" name="age" onblur="verifyage(document.personInfo.age.value)"><br>
<label >请输入邮箱:</label><br>
<input type="text" id="mail" name="mail" onblur="verifyemail(document.personInfo.mail.value)"><br>
<label >请输入电话:</label><br>
<input type="text" id="cellnumber" name="cellnumber" onblur="verifyphonenumber(document.personInfo.cellnumber.value)"><br>
<input type="button" id="btn1" value="保存" onclick=person.getinfo()><br>
</form>
</div>
<div class="two">
<form name="showinfo">
<input type="button" id="btn2" value="确认信息" onclick=person.showinfo()><br>
<textarea name="info" cols="30" rows="10" id="information">单击信息确认按钮获得个人信息,信息有错请重新输入,信息无误请按确定按钮</textarea><br>
<input type="button" id="btn3" value="确认">
</form>
</div>
</div>
<!-- <script type="text/javascript">
var t1 = document.querySelector('t1');
var t2 = document.querySelector('t2');
var t3 = document.querySelector('t3');
var t4 = document.querySelector('t4');
var t5 = document.querySelector('t5');
var t6 = document.querySelector('t6');
var div =document.querySelector('div');
var btn =document.querySelector('button');
//名字
t1.onblur = function(){
if(this.value !=""){
if(this.value.length <4||this.value.length>11){
console.log('错误')
}
}
}
</script>
-->
<script>
function getname(){
return document.personInfo.name.value;
}
function getgender(){
if(document.getElementById("man").checked){
return document.getElementById("man").value;
}
else{
return document.getElementById("women").value;
}
}
function getage(){
var age=parseInt(document.personInfo.age.value);
if(isNaN(age)){
return NaN;
}
else return age;
}
function getmail()
{
var mail=parseInt(document.personInfo.mail.value);
if(isNaN(mail)){
return NaN;
}
else return mail;
}
function getcellnumber()
{
var cellnumber=parseInt(document.personInfo.cellnumber.value);
if(isNaN(cellnumber)){
return NaN;
}
else return cellnumber;
}
function Person() {
this.getinfo=function(){
this.name=getname();
this.gender=getgender();
this.age=getage();
this.mail=getmail();
this.cellnumber=getcellnumber();
}
this.showinfo=function(){
document.showinfo.info.value="姓名"+this.name+"\n"
document.showinfo.info.value+="性别"+this.gender+"\n"
document.showinfo.info.value+="年龄"+this.age+"\n"
document.showinfo.info.value+="邮箱"+this.mail+"\n"
document.showinfo.info.value+="号码"+this.cellnumber+"\n"
}
}
function verifyname(obj){
var re=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$|^[a-zA-Z]{4,20}$/;
flag=re.test(obj);
if(flag==false){
alert("输入错误");
}
}
function verifyage(obj){
var re=/^\d{1,2}$/;
flag=re.test(obj);
if(flag==false)
alert("输入错误");
}
function verifyemail(obj){
var re=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9])+(\.[a-zA-Z]{2,3}){1,2}$/;
flag=re.test(obj);
if(flag==false)
alert("输入错误");
}
function verifyphonenumber(obj){
var re=new RegExp("^1[3|4|5|8][0-9]{9}$");
flag=re.test(obj);
if(flag==false)
alert("输入错误");
}
</script>
</body>
</html>