codepen：https://codepen.io/kevin-chang-the-sasster/pen/MWKmbzM
<div class="box1">
<table><!--表格-->
<tr><!--第一列-->
<!--th代表標題列-->
<th>欄位一</th><!--第一行-->
<th>欄位二</th><!--第二行-->
<th>欄位三</th><!--第三行-->
</tr>
<tr>
<td>值1</td>
<td>值2</td>
<td>值3</td>
</tr>
<tr>
<td>值4</td>
<td>值5</td>
<td>值6</td>
</tr>
</table>
</div>
<div class="box2"><!--表單-->
<form action=""><!--寫入資料庫路徑-->
<!--text 代表文字輸入框-->
<input type="text" name="name">
<input type="text" name="tel">
<input type="text" name="email">
<!--submit 代表送出資料按鈕-->
<input type="submit" value="送出">
</form>
</div>
<div class="box3"><!--表單-->
<form action=""><!--寫入資料庫路徑-->
<!--text 代表單行文字輸入框-->
<label for="mail">姓名：</label>
<input id="mail" type="text" placeholder="請輸入姓名" name="name">
<label for="tel">電話：</label>
<input id="tel" type="text" placeholder="請輸入電話" name="tel">
<label for="mail">Mail：</label>
<input id="mail" type="text" placeholder="請輸入mail" name="mail">
<!--submit 代表送出資料按鈕-->
<input type="submit" value="送出">
</form>
</div>
<div class="box4">
<form action="">
<h2>性別：</h2>
<!--radio 單選-->
<input type="radio" name="sex" value="male"> 男生
<input type="radio" name="sex" value="woman"> 女生
<h2>興趣：</h2>
<!--checkbox 多選-->
<input type="checkbox" name="hobby" value="movie"> 看電影
<input type="checkbox" name="hobby" value="music"> 聽音樂
<input type="checkbox" name="hobby" value="sport"> 運動
<br>
<label for="bir">生日：</label>
<!--select 下拉選單-->
<select name="birth" id="bir">
<!--option 下拉選項-->
<option value="1989">1989</option>
<option value="1989">1990</option>
</select>
<br>
<!--textarea 多行文字輸入-->
<textarea name="content" id="" cols="" rows=""></textarea>
<br>
<input type="submit" value="送出">
</form>
</div>
.box1{
margin-bottom: 30px;
}
table {
margin-top: 20px;
margin-left: 20px;
}
table th, table td {
border: solid 1px black;
padding: 10px;
font-family: "微軟正黑體";
}
table th {
padding: 10px;
font-weight: bold;
background: #0984e3;
color: #fff;
}
.box2 {
margin-left: 20px;
margin-bottom: 30px;
}
.box3 {
margin-left: 20px;
margin-bottom: 30px;
}
.box4 {
margin-left: 20px;
}
.box4 h2, .box4 input, .box4 select, .box4 textarea {
margin-bottom: 10px;
}
.box4 textarea {
width: 300px;
height: 100px;
}
文章標籤
全站熱搜