html表單是為了製作像會員註冊表這樣的表格設計的，下面製作了一個html檔，叫form。
body裡面有三格，裡面分別可以插入姓名、密碼和文字區塊。
- 加入文字
- text:文字輸入列（單行）
- password:密碼輸入
- textarea:文字區塊（多行）
- 進行選擇
- radio:單選鈕
- checkbox:勾選框（複選）
- select；下拉式選單
- 按下按鈕
- submit:送出按鈕
- reset:清除資料
- button:沒有任何預設功能的按鈕
- 上傳檔案
- file:檔案上傳
控制項的樣式設定可以用.class在style裡面設定
<!DOCTYPE html>
<html lang = "zh-tw">
<meta charset="utf-8">
<head>
<title>form</title>
<style>
em{color:red}
fieldset{
width: 500px;
margin:15px;
border:1px solid green;
border-radius: 10px;
}
.st1{
width: 450px;
margin:20px;
border-bottom: 1px solid #e0e0e0;
}
.sub{
width:450px;
margin:20px;
text-align: center;
}
.title{
width:100px;
float:left;
text-align:right;
padding-right:3px;
}
</style>
<script>//JS</script>
</head>
<body>
<form action="#" method="post";>
<fieldset>
<legend>個人資料<em>（必填）</em></legend>
<div class="st1">
<label class="title" for="account1">姓名：</label><input type="text" name="account" size="10" value="guest" id="account1"/>
</div>
<div class="st1">
<label class="title" for="password1">密碼：</label><input type="password" name="password" size="10" id="password1" />
</div>
<div class="st1">
<span class="title">性別</span>
<input type="radio" name="gender" value="male1" id="male1" /><label for="male1">男</label>
<input type="radio" name="gender" value="female" id="female"/><label for="female">女</label>
</div>
</fieldset>
<fieldset>
<legend>地址<em>（必填）</em></legend>
<div class="str1">
<label class="title">縣市:</label>
<select name="address">
<option value="1">台北市</option>
<option value="2">新北市</option>
<option value="3">桃園市</option>
</select>
</div>
<div class="st1">
<label class="title">完整地址</label>
<input type="text" name="add2" size="30" />
</div>
</fieldset>
<fieldset>
<legend>個人資料二</legend>
<div class="st1">
<label class="title" for="photo">照片：</label><input type="file" name="photo" />
</div>
<div class="st1">
<label class="title" for="commend1">意見：</label><textarea cols="40" rows="5" id="commend1">意見回復</textarea>
</div>
<div class="st1">
<label class="title">興趣</label>
<input type="checkbox" name="music" value="1" />音樂
<input type="checkbox" name="sport" value="2" />運動
<input type="checkbox" name="movie" value="2" />電影
</div>
<div class="sub">
<input type="submit" value="送出" />
<input type="reset" value="清除" />
</div>
</fieldset>
</form>
</body>
</html>
文章標籤
全站熱搜
留言列表
