AdSense

網頁

2019/8/11

HTML 練習 個人資料表

請建立一份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>

沒有留言:

AdSense