<!DOCTYPE html>
<html lang="zh-tw">
<head>
<title>表單</title>
<link rel="shortcut icon" type="image/png" href="//s.plurk.com/b9d08226518da8fcd48ecd0e372d6c5b.png">
<!--上面這一行是偷來的噗浪的分頁圖示，具體使用方法未知-->
<meta charset="UTF-8">
<style>
.st1{/*class標籤*/
width:450px;
border-bottom: 1px solid #f0f0f0;/*如果只有border是框線，border-bottom是只有下底線*/
margin: 20px;
padding-bottom:10px;
}
.sub{
width:550px;
padding-bottom: 5px;
border-bottom: 1px solid #8C0044;
}
.title{
width:100px;
float: left;
text-align:right;
padding-right:3px
}
fieldset{
width:500px;
margin:15px;
border-radius:20px;
border: 1px solid #009FCC
}
em{
color: red
}
textarea{
resize: none;/*使輸入框的大小固定(右下角沒有可以拉大小的斜線，不可拉大小了)*/
}
</style>
</head>
<body>
<form action="#" method="get" enctype="multipart/form-data"><!-- 表單開始 -->
<!--enctype="multipart/form-data"是如果有要上傳檔案才要用的-->
<fieldset> <!-- fieldset一個大區間 -->
<legend>個人資料一<em>(必填)</em></legend><!-- legend：大區間的說明 -->
<div class="st1"><!-- div一個小區塊 -->
<label class="title" for="account"> 姓名：</label><input type="text" id="account" name="account" size="10" autofocus autocomplete="off" placeholder="guest" required>
<!-- for對應id，所以你把游標點到「姓名」時游標就會在欄位閃爍
type是輸入的資料類型
id對應for
name是變數名稱！最重要！之後聯到後端的識別方式
size是輸入的欄位的大小(非輸入的值的大小)
autofocus預設游標會在這個欄位
autocomplete設定off時，不會顯示上次傳送的紀錄
placeholder欄位裡淺淺的灰色字，一點就消失的那個
required必填
-->
</div><!-- div一個小區塊結束 -->
<div class="st1">
<label class="title" for="pwd"> 密碼：</label><input type="password" id="pwd" name="pwd" maxlength="8" size="10" autofocus required><br>
<!-- maxlength是欄位值的最大值 -->
</div>
<div class="st1">
<label class="title" for="gender">性別：</label>
<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
<!--type是radio，是單選
name要一樣，表示是同一欄位。因為性別沒有辦法點「性別」就知道是男是女，所以不能使用autocomplete -->
</div>
<div class="st1">
<label class="title" for="id1">身分證字號：</label>
<input type="text" id="id1" name="id1" size="10" autocomplete="off" placeholder="id"
pattern="[a-zA-Z]{1}[1-2]{1}\d{8}">
<!-- pattern可以簡單查錯，其中[]裡面限定尋查範圍，{裡面限定有幾個}，例如[A-Z]{1}就代表需要兩個A-Z的字
而\d{n}就是要有n個數字 -->
</div>
<div class="st1">
<label class="title" for="email">E-mail：</label>
<input type="email" id="email" name="email" placeholder="xxx@xxx.com">
<!-- type是email時，自動幫你看格式有沒有符合xxx@xxx -->
</div>
</fieldset><!-- fieldset一個大區間 結束-->
<fieldset>
<legend>地址<em>(必填)</em></legend>
<div class="st1">
<label class="title">縣市：</label>
<select name="add1" id="add1">
<!--select代表下拉式選單，加上multiple(複選)則預設所有選項攤開來(似乎沒法不攤開)，並且可以用ctrl複選-->
<option value="TPE" selected>台北市 </option><!--加上selected的是下拉式選單中預設初始選項，如果所有選項攤開來會成灰色但不會跑到第一個-->
<option value="TPH">新北市</option><!-- select選單中的選項使用option來建立 -->
<option value="TYC">桃園市</option>
</select>
</div>
<div class="st1">
<label class="title">完整地址：</label>
<input type="text" name="add2" size="30"><!-- 輸入框用text屬性，只有一行字 -->
</div>
</fieldset>
<fieldset>
<legend>個人資料二</legend>
<div class="st1">
<label class="title">照片：</label>
<input type="file" name="photo" >
<!-- 需要上傳的檔案類型設定為file -->
</div>
<div class="st1">
<label class="title">興趣：</label>
<input type="checkbox" name="hobby" id="misic" value="misic"><label for="misic">音樂</label>
<input type="checkbox" name="hobby" id="sport" value="sport"><label for="sport">運動</label>
<input type="checkbox" name="hobby" id="reading" value="reading"><label for="reading">閱讀</label>
<input type="checkbox" name="hobby" id="movie" value="movie"><label for="movie">電影</label>
<!-- 同一個欄位的選項，name需一致
type為checkbox，為複選 -->
</div>
<div class="st1">
<label class="title">Blog：</label>
<input name="hp" type="url" list="hpurls">
<!-- list也是下拉式選單 type是url，可以有可輸入的下拉式選單，但好像不是甚麼資料都可以用這個 -->
<datalist id="hpurls"><!-- datalist的id就是上面的list，用以跟list做連結 -->
<option value="http://www.plurk.com/top/"></option>
<option value="http://www.plurk.com/t/Taiwan#hot"></option>
</datalist>
</div>
<div class="st1">
<label for="memo" class="title">意見：</label>
<textarea cols="40" rows="5" id="memo" name ="memo" placeholder="請輸入建議"></textarea><br>
<!-- 超過一行的輸入欄位用testarea -->
</div >
</fieldset>
<div class="sub">
<input type="submit" value="送出">
<input type="reset" value="清除">
</div>
</form>//表單結束
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
