網頁

▼

2019/8/5

HTML 練習 建立<input>欄位

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

請在文件中依序建立以下輸入欄位。

  1. 一般文字輸入欄位
  2. Email輸入欄位
  3. 密碼輸入欄位
  4. 日期輸入欄位
  5. 時間輸入欄位
  6. 數字輸入欄位
  7. 檔案上傳按鈕
  8. 提交按鈕
  9. 普通按鈕（加上屬性value="請點我"）

瀏覽器顯示如下。



建議完成後在試試每個欄位的輸入效果。

提示：
參考HTML <input> 輸入元素 Input element 簡介。
每個<input>元素各別包在<div>中來分列顯示。

<div>
    說明文字
    <input>
</div>

解答：

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <div>
        一般文字輸入欄位
        <input type="text">
    </div>
    <div>
        Email輸入欄位
        <input type="email">
    </div>
    <div>
        密碼輸入欄位
        <input type="password">
    </div>
    <div>
        日期輸入欄位
        <input type="date">
    </div>
    <div>
        時間輸入欄位
        <input type="time">
    </div>
    <div>
        數字輸入欄位
        <input type="number">
    </div>
    <div>
        檔案上傳按鈕
        <input type="file">
    </div>
    <div>
        提交按鈕
        <input type="submit">
    </div>
    <div>
        普通按鈕
        <input type="button" value="請點我">
    </div>
</body>

</html>

沒有留言:

張貼留言