網頁

▼

2019/8/14

HTML 練習 會員資料表

請建立一份HTML文件，檔名為member.html。請用VS Code編輯。

請在文件中建立如下的個人資料表填寫表格。



現有的CSS internal style sheet如下。

table {
    border-collapse: collapse;
    width: 40%;
}

table, th, td {
    border: solid 1px;
}

th, td {
    padding: 3px;
}

規格說明

表格標題，輸入欄位，下拉選單的標題背景為橘色(orange)

輸入標題請使用<label>並與右方的輸入欄位或下拉選單關聯。也就是用滑鼠點擊選輸入標題則右方的輸入欄位必須被focus並顯示輸入游標，如上例圖所示。

地址輸入欄位的長度為60。

下拉選單的值與顯示內容的關係如下：

值 文字內容
1 A
2 B
3 AB
4 O
5 其他

提示：
HTML <label> 標籤元素。
HTML 使用colspan屬性合併表格欄位。
HTML <input> size屬性。
HTML <select> 選單元素。


解答：

<!DOCTYPE html>
<html>

<head>
</head>
<style>
  table {
    border-collapse: collapse;
    width: 40%;
  }

  table, th, td {
    border: solid 1px;
  }

  th, td {
    padding: 3px;
  }

  .caption {
    background-color: orange;
  }
</style>

<body>

  <table>
    <thead>
      <tr>
        <th colspan="4" class="caption">會員資料</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="caption"><label for="name">姓名:</label></td>
        <td><input id="name" type="text"></td>
        <td class="caption"><label for="blood">血型:</label></td>
        <td><select id="blood">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">AB</option>
            <option value="4">O</option>
            <option value="5">其他</option>
          </select></td>
      </tr>
      <td class="caption"><label for="addr">地址:</label></td>
      <td colspan="3"><input id="addr" type="text" size="60"></td>
    </tbody>
  </table>

</body>

</html>

沒有留言:

張貼留言