The new semester has begun to close for two months, I still remember that in those days the National Day blog account application, can be had for a month have not started writing blog, (> _ <) a little lazy, but, learning still not falling, now write the code a little practice on the use of forms on a page, hoping to help to like me H5 of the white are also big brothers please exhibitions! !
First
first, before we knocked on the form style (see below):
first, before we knocked on the form style (see below):
Secondly, connected to the code acridine, Html5 code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/User.css"/>
</head>
<body οnlοad="show()">
<form action="server.html" method="post" name="f1" id="f1" οninput="out.innerHTML=age2.value" target="_blank" enctype="multipart/form-data">
<fieldset>
<legend>用户注册</legend>
<p>
<label for="name1">姓名：</label>
<input type="text" required="required" placeholder="输入名字..." name="name1" id="user"/><label>*</label>
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" required="required" name="pwd" id="pwd" placeholder="输入密码..."/><label>*</label>
</p>
<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" id="sex1" value="M" />男
<input type="radio" name="sex" id="sex2" value="F" checked/>女
</p>
<p>
<label for="date1">出生日期：</label>
<input type="date" name="date1" id="date1" min="1998-01-01" max="2000-12-30" required="required"><label>*</label>
</p>
<p>
<label for="zy">职业：</label>
<select name="zy" id="zy" size="1">
<option value="学生" selected>学生</option>
<option value="教师" disabled>教师</option>
<option value="军人" label="军人"></option>
<option value="医生" >医生</option>
<option value="工人">工人</option>
</select>
<label for="zj">祖籍：</label>
<select name="zj" id="zj"> <the Option value = "Shenzhen" label = "Shenzhen" selected> </ option> <the Option value = "Guangzhou" label = "Guangzhou"> </ the Option>
<optgroup label = "Guangdong Province">
<option value = "Zhuhai" label = "Zhuhai"> </ Option>
</ optgroup>
<optgroup label = "Hunan">
<option value = "Changsha"> Changsha </ Option>
<option value = "Xiangtan" > Xiangtan </ the Option>
<the Option value = "Yueyang"> Yueyang </ the Option>
<the Option value = "Hengyang"> Hengyang </ the Option>
</ optgroup>
<optgroup label = "Zhejiang">
<the Option value = " Wenzhou "> Wenzhou </ the Option>
<the Option value =" Hangzhou " > Hangzhou </ the Option>
<the Option value = "Ningbo"> Ningbo </ the Option>
</ optgroup>
<optgroup label = "Jiangxi">
<Option value = "Nanchang"> Nanchang </ Option>
<Option value = "Jingdezhen"> Jingdezhen </ Option>
<Option value = "Ichun"> Ichun </ Option>
</ optgroup>
</ the SELECT>
</ the p->
<the p->
<label for = "Hobby"> Hobbies: </ label>
<the INPUT of the type = "the CheckBox" name = "Hobby" the above mentioned id = "hobby1" value = "music" checked /> Music
<input type = "checkbox" name = "hobby" id = "hobby2" value = " programming" the checked /> programming
<input type = "checkbox" name = "hobby" id = "hobby3" value = " swim" /> Swimming
<input type="checkbox" name="hobby" id="hobby4" value="购物"/>购物
</p>
<p>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone" title="请输入11位数字...." pattern="13\d{9}"/>
</p>
<p>
<label for="myemail">邮箱：</label>
<input type="email" multiple="multiple" autofocus name="myemail" id="myemail" title="请输入邮箱地址...."/>
</p>
<p> </ the p-> <the INPUT of the type = "url" name = "WebUrl" the above mentioned id = "WebUrl" title = "Please enter the url address ...." />
<label for = "weburl"> Home: </ label>
<p>
<label for="num1">100内奇数：</label>
<input type="number" name="num1" id="num1" min="1" max="100" value="1" step="2"/>
<label for="num2">100内偶数：</label>
<input type="number" name="num2" id="num2" min="2" max="100" value="2" step="2"/>
</p>
<p>
<label for="age2">年龄范围：</label>
<input type="range" name="age2" id="age2" min="15" max="35" /><output id="out" name="out" form="f1" for="age2">20</output>岁
</p>
<datalist id="dlist">
<option label="1" value="计算机">计算机</option>
<option label="2">电子商务</option>
<option label="3">C语言</option>
<option>办公软件</option>
<option>数字处理</option>
<option>视频剪辑</option>
</datalist>
<p>
<label for="search">搜索：</label>
<input type="search" name="search" id="search" list="dlist"/>
<input type="button" value="go" class="bt1"/>
</p>
<p>
<label for="col">备注背景：</label>
<input type="color" name="col" id="col" value="#ff0000"/>
<input type="button" value="更改背景" class="bt" οnclick="changecol()"/>
</p>
<script>
function show()
{
document.getElementById("sp1").innerHTML=document.getElementById("age").value
}
function changecol()
{
document.getElementById("bz").style.backgroundColor=document.getElementById("col").value;
}
</script>
<p style="border: 0;">
<label for="pic "> Note: </ label>
<textarea id="bz" name="bz" rows="10" cols="28" placeholder="请输入备注..."></textarea>
</p>
<p style="text-align: center;border: 0;">
<input type="submit" value="发送" class="bt"/>
<input type="reset" class="bt"/>
<input type="button" value="单击" class="bt" οnclick="alert('hello!')"/>
</p>
</fieldset>
</form>
<p></p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/User.css"/>
</head>
<body οnlοad="show()">
<form action="server.html" method="post" name="f1" id="f1" οninput="out.innerHTML=age2.value" target="_blank" enctype="multipart/form-data">
<fieldset>
<legend>用户注册</legend>
<p>
<label for="name1">姓名：</label>
<input type="text" required="required" placeholder="输入名字..." name="name1" id="user"/><label>*</label>
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" required="required" name="pwd" id="pwd" placeholder="输入密码..."/><label>*</label>
</p>
<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" id="sex1" value="M" />男
<input type="radio" name="sex" id="sex2" value="F" checked/>女
</p>
<p>
<label for="date1">出生日期：</label>
<input type="date" name="date1" id="date1" min="1998-01-01" max="2000-12-30" required="required"><label>*</label>
</p>
<p>
<label for="zy">职业：</label>
<select name="zy" id="zy" size="1">
<option value="学生" selected>学生</option>
<option value="教师" disabled>教师</option>
<option value="军人" label="军人"></option>
<option value="医生" >医生</option>
<option value="工人">工人</option>
</select>
<label for="zj">祖籍：</label>
<select name="zj" id="zj"> <the Option value = "Shenzhen" label = "Shenzhen" selected> </ option> <the Option value = "Guangzhou" label = "Guangzhou"> </ the Option>
<optgroup label = "Guangdong Province">
<option value = "Zhuhai" label = "Zhuhai"> </ Option>
</ optgroup>
<optgroup label = "Hunan">
<option value = "Changsha"> Changsha </ Option>
<option value = "Xiangtan" > Xiangtan </ the Option>
<the Option value = "Yueyang"> Yueyang </ the Option>
<the Option value = "Hengyang"> Hengyang </ the Option>
</ optgroup>
<optgroup label = "Zhejiang">
<the Option value = " Wenzhou "> Wenzhou </ the Option>
<the Option value =" Hangzhou " > Hangzhou </ the Option>
<the Option value = "Ningbo"> Ningbo </ the Option>
</ optgroup>
<optgroup label = "Jiangxi">
<Option value = "Nanchang"> Nanchang </ Option>
<Option value = "Jingdezhen"> Jingdezhen </ Option>
<Option value = "Ichun"> Ichun </ Option>
</ optgroup>
</ the SELECT>
</ the p->
<the p->
<label for = "Hobby"> Hobbies: </ label>
<the INPUT of the type = "the CheckBox" name = "Hobby" the above mentioned id = "hobby1" value = "music" checked /> Music
<input type = "checkbox" name = "hobby" id = "hobby2" value = " programming" the checked /> programming
<input type = "checkbox" name = "hobby" id = "hobby3" value = " swim" /> Swimming
<input type="checkbox" name="hobby" id="hobby4" value="购物"/>购物
</p>
<p>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone" title="请输入11位数字...." pattern="13\d{9}"/>
</p>
<p>
<label for="myemail">邮箱：</label>
<input type="email" multiple="multiple" autofocus name="myemail" id="myemail" title="请输入邮箱地址...."/>
</p>
<p> </ the p-> <the INPUT of the type = "url" name = "WebUrl" the above mentioned id = "WebUrl" title = "Please enter the url address ...." />
<label for = "weburl"> Home: </ label>
<p>
<label for="num1">100内奇数：</label>
<input type="number" name="num1" id="num1" min="1" max="100" value="1" step="2"/>
<label for="num2">100内偶数：</label>
<input type="number" name="num2" id="num2" min="2" max="100" value="2" step="2"/>
</p>
<p>
<label for="age2">年龄范围：</label>
<input type="range" name="age2" id="age2" min="15" max="35" /><output id="out" name="out" form="f1" for="age2">20</output>岁
</p>
<datalist id="dlist">
<option label="1" value="计算机">计算机</option>
<option label="2">电子商务</option>
<option label="3">C语言</option>
<option>办公软件</option>
<option>数字处理</option>
<option>视频剪辑</option>
</datalist>
<p>
<label for="search">搜索：</label>
<input type="search" name="search" id="search" list="dlist"/>
<input type="button" value="go" class="bt1"/>
</p>
<p>
<label for="col">备注背景：</label>
<input type="color" name="col" id="col" value="#ff0000"/>
<input type="button" value="更改背景" class="bt" οnclick="changecol()"/>
</p>
<script>
function show()
{
document.getElementById("sp1").innerHTML=document.getElementById("age").value
}
function changecol()
{
document.getElementById("bz").style.backgroundColor=document.getElementById("col").value;
}
</script>
<p style="border: 0;">
<label for="pic "> Note: </ label>
<textarea id="bz" name="bz" rows="10" cols="28" placeholder="请输入备注..."></textarea>
</p>
<p style="text-align: center;border: 0;">
<input type="submit" value="发送" class="bt"/>
<input type="reset" class="bt"/>
<input type="button" value="单击" class="bt" οnclick="alert('hello!')"/>
</p>
</fieldset>
</form>
<p></p>
</body>
</html>
Finally, do not forget there oh CSS, CSS code is as follows:
form{
border: 10px #800 outset;
width: 325px;
margin: 0 auto;
padding: 25px;
font-size: 12px;
color: #666;
background:aliceblue ;
}
fieldset{
border: 1px dotted #800;
padding: 10px;
border-radius: 10px;
}
legend{
font-size: 16px;
color: #800;
font-weight: bold;
text-align: center
}
#user,#pwd,#sw{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 90px;
text-align: center;
margin-right: 15px;
}
#phone,#myemail,#weburl,#date1,#search{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 150px;
text-align: center;
margin-right: 15px;
}
#num1,#num2,#col{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 30px;
text-align: center;
margin-right: 15px;
}
#sp1,#out{
color: #880000;
font-weight: bold;
margin: 0 10px;
}
#zy,#zj{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 60px;
text-align: center;
margin-right: 15px;
font-size: 12px;
}
#zj optgroup{
color: #800;
}
#zj option{
color: #333;
}
#pic{
width: 200px;
}
p{
border-bottom: 1px #800 dotted;
padding: 5px 0;
margin: 0 10px;
line-height: 1;
}
p:hover{
background:;
}
.bt{
width: 70px;
height: 20px;
border: 0;
color: #800;
font-size: 12px;
border-radius: 5px 5px 0 0;
margin: 0 7px;
}
.bt1{
width: 40px;
height: 20px;
border: 0;
color: #800;
font-size: 12px;
border-radius: 20px;
margin: 0 7px;
}
label{
color: #880000;
font-weight: bold;
font-size: 14px;
font-family: "宋体";
}
label:hover{
color: #333;
}
.bt:hover,.bt1:hover{
background:azure;
color: #000;
}
#bz{
border-radius: 5px 5px 0 0;
padding: 5px;
border: 1px dotted #ccc;
}
#sw:hover,#bz:hover,#user:hover,#pwd:hover,#pic:hover{
background:azure;
}
border: 10px #800 outset;
width: 325px;
margin: 0 auto;
padding: 25px;
font-size: 12px;
color: #666;
background:aliceblue ;
}
fieldset{
border: 1px dotted #800;
padding: 10px;
border-radius: 10px;
}
legend{
font-size: 16px;
color: #800;
font-weight: bold;
text-align: center
}
#user,#pwd,#sw{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 90px;
text-align: center;
margin-right: 15px;
}
#phone,#myemail,#weburl,#date1,#search{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 150px;
text-align: center;
margin-right: 15px;
}
#num1,#num2,#col{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 30px;
text-align: center;
margin-right: 15px;
}
#sp1,#out{
color: #880000;
font-weight: bold;
margin: 0 10px;
}
#zy,#zj{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 60px;
text-align: center;
margin-right: 15px;
font-size: 12px;
}
#zj optgroup{
color: #800;
}
#zj option{
color: #333;
}
#pic{
width: 200px;
}
p{
border-bottom: 1px #800 dotted;
padding: 5px 0;
margin: 0 10px;
line-height: 1;
}
p:hover{
background:;
}
.bt{
width: 70px;
height: 20px;
border: 0;
color: #800;
font-size: 12px;
border-radius: 5px 5px 0 0;
margin: 0 7px;
}
.bt1{
width: 40px;
height: 20px;
border: 0;
color: #800;
font-size: 12px;
border-radius: 20px;
margin: 0 7px;
}
label{
color: #880000;
font-weight: bold;
font-size: 14px;
font-family: "宋体";
}
label:hover{
color: #333;
}
.bt:hover,.bt1:hover{
background:azure;
color: #000;
}
#bz{
border-radius: 5px 5px 0 0;
padding: 5px;
border: 1px dotted #ccc;
}
#sw:hover,#bz:hover,#user:hover,#pwd:hover,#pic:hover{
background:azure;
}
Operating results as follows:
