HTML5+CSS：02用戶註冊表單
- 2019 年 11 月 5 日
- 筆記
新的學期已開始接近兩個月了，還記得是在國慶節那幾天申請的部落格帳號，可過了一個月都還沒開始寫部落格，（>_<)有點小偷懶了，不過，學習還是不能落下的，今寫一個有點實踐運用的關於表單網頁的程式碼，希望能夠幫助到跟我一樣H5的小白們，也請各位大佬多多指教！！
首
先，先上我們敲的表單樣式（如下）：
先，先上我們敲的表單樣式（如下）：其次，程式碼接上吖，Html5程式碼如下：
<!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”>
<optgroup label=”廣東省”>
<option value=”廣州” label=”廣州”></option>
<option value=”深圳” label=”深圳” selected></option>
<option value=”珠海” label=”珠海”></option>
</optgroup>
<optgroup label=”湖南省”>
<option value=”長沙”>長沙</option>
<option value=”湘潭”>湘潭</option>
<option value=”岳陽”>岳陽</option>
<option value=”衡陽”>衡陽</option>
</optgroup>
<optgroup label=”浙江省”>
<option value=”溫州”>溫州</option>
<option value=”杭州”>杭州</option>
<option value=”寧波”>寧波</option>
</optgroup>
<optgroup label=”江西省”>
<option value=”南昌”>南昌</option>
<option value=”景德鎮”>景德鎮</option>
<option value=”宜春”>宜春</option>
</optgroup>
</select>
</p>
<p>
<label for=”hobby”>愛好：</label>
<input type=”checkbox” name=”hobby” id=”hobby1″ value=”音樂” checked/>音樂
<input type=”checkbox” name=”hobby” id=”hobby2″ value=”編程” checked/>編程
<input type=”checkbox” name=”hobby” id=”hobby3″ value=”游泳”/>游泳
<input type=”checkbox” name=”hobby” id=”hobby4″ value=”購物”/>購物
</p>
<p>
<label for=”phone”>電話：</label>
<input type=”tel” name=”phone” id=”phone” title=”請輸入11位數字….” pattern=”13d{9}”/>
</p>
<p>
<label for=”myemail”>郵箱：</label>
<input type=”email” multiple=”multiple” autofocus name=”myemail” id=”myemail” title=”請輸入郵箱地址….”/>
</p>
<p>
<label for=”weburl”>主頁：</label>
<input type=”url” name=”weburl” id=”weburl” title=”請輸入url地址….”/>
</p>
<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”>備註：</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”>
<optgroup label=”廣東省”>
<option value=”廣州” label=”廣州”></option>
<option value=”深圳” label=”深圳” selected></option>
<option value=”珠海” label=”珠海”></option>
</optgroup>
<optgroup label=”湖南省”>
<option value=”長沙”>長沙</option>
<option value=”湘潭”>湘潭</option>
<option value=”岳陽”>岳陽</option>
<option value=”衡陽”>衡陽</option>
</optgroup>
<optgroup label=”浙江省”>
<option value=”溫州”>溫州</option>
<option value=”杭州”>杭州</option>
<option value=”寧波”>寧波</option>
</optgroup>
<optgroup label=”江西省”>
<option value=”南昌”>南昌</option>
<option value=”景德鎮”>景德鎮</option>
<option value=”宜春”>宜春</option>
</optgroup>
</select>
</p>
<p>
<label for=”hobby”>愛好：</label>
<input type=”checkbox” name=”hobby” id=”hobby1″ value=”音樂” checked/>音樂
<input type=”checkbox” name=”hobby” id=”hobby2″ value=”編程” checked/>編程
<input type=”checkbox” name=”hobby” id=”hobby3″ value=”游泳”/>游泳
<input type=”checkbox” name=”hobby” id=”hobby4″ value=”購物”/>購物
</p>
<p>
<label for=”phone”>電話：</label>
<input type=”tel” name=”phone” id=”phone” title=”請輸入11位數字….” pattern=”13d{9}”/>
</p>
<p>
<label for=”myemail”>郵箱：</label>
<input type=”email” multiple=”multiple” autofocus name=”myemail” id=”myemail” title=”請輸入郵箱地址….”/>
</p>
<p>
<label for=”weburl”>主頁：</label>
<input type=”url” name=”weburl” id=”weburl” title=”請輸入url地址….”/>
</p>
<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”>備註：</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>
最後，別忘了還有CSS哦，CSS程式碼如下：
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;
}
運行結果為：
