請建立一份HTML文件,檔名為inputs.html
。請用VS Code編輯。
請在文件中依序建立以下輸入欄位。
- 一般文字輸入欄位
- Email輸入欄位
- 密碼輸入欄位
- 日期輸入欄位
- 時間輸入欄位
- 數字輸入欄位
- 檔案上傳按鈕
- 提交按鈕
- 普通按鈕(加上屬性
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>
沒有留言:
張貼留言