請建立一份HTML文件，檔名為profile.html。請用VS Code編輯。
請在文件中建立如下的個人資料表填寫表格。
現有的CSS internal style sheet如下。
table {
border-collapse: collapse;
width: 40%;
}
table, th, td {
border: solid 1px;
}
th, td {
padding: 3px;
}
規格說明
姓名請用文字輸入欄位，限制輸入4個字。
生日請用日期輸入欄位。
手機請用電話輸入欄位，限制輸入10個字。
信箱請用Email輸入欄位。
網址請用URL輸入欄位，欄位長度為50。。
地址請用文字輸入欄位，欄位長度為50。
職稱請用文字輸入欄位。
薪資請用數字輸入欄位。
最下列的是一個置中的提交按鈕。
提示：
HTML 使用colspan屬性合併表格欄位。
HTML <input> 輸入元素 Input element 簡介。
HTML <input> size屬性。
HTML <input> maxlength屬性。
HTML <input> placeholder屬性。
置中效果必須套用CSS text-align: center;。
Answer：
profile.html
<!DOCTYPE html>
<html>
<head>
</head>
<style>
table {
border-collapse: collapse;
width: 40%;
}
table, th, td {
border: solid 1px;
}
th, td {
padding: 3px;
}
.center {
text-align: center;
}
</style>
<body>
<div>
<table>
<thead>
<tr>
<th colspan="4">個人資料表</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td><input type="text" placeholder="中文姓名" maxlength="4"></td>
<td>生日</td>
<td><input type="date"></td>
</tr>
<tr>
<td>手機</td>
<td><input type="tel" placeholder="e.g. 0933227666" maxlength="10"></td>
<td>信箱</td>
<td><input type="email" placeholder="e.g. 123@abc.com"></td>
</tr>
<tr>
<td>網址</td>
<td colspan="3"><input type="url" size="50" placeholder="e.g. https:\\www.mywebsite.com"></td>
</tr>
<tr>
<td>地址</td>
<td colspan="3"><input type="text" size="50"></td>
</tr>
<tr>
<td>職稱</td>
<td><input type="text"></td>
<td>薪資</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="center" colspan="4"><input type="submit"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
沒有留言:
張貼留言