<datalist> 提供輸入建議<progress> 與 <meter> 的用途與差異<output> 元素，能顯示即時計算結果<body>
<h1>表單進一步互動</h1>
<label for="browser">常用瀏覽器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<br><br>
<label>檔案上傳進度：</label>
<progress value="70" max="100"></progress>
<br><br>
<label>電池電量：</label>
<meter value="0.6" min="0" max="1">60%</meter>
<br><br>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result">30</output>
</form>
</body>
<datalist> 當成下拉選單 → ✅ 它只是「建議」，使用者仍可輸入其他值<progress> 與 <meter> → ✅ 前者是進度，後者是範圍內的比例<output> 需要搭配計算 → ✅ 與 JS 或 oninput 搭配才能動態顯示<progress> 與 <meter> 加上適當標籤<datalist>，提供至少 3 個建議值<progress>，模擬讀取 50%<meter>，顯示 1~10 的評分在 7 的位置<output> 做簡單加法運算今天的學習讓我覺得表單不再只是「填空題」，而是能和使用者互動的工具。像 <datalist> 能提供建議，但仍保留彈性；而 <progress> 與 <meter> 則能即時呈現狀態，讓資訊更直觀。
我最喜歡 <output> 的部分，因為它能搭配簡單的 JS，直接在表單中顯示計算結果，這讓表單更像是「活的介面」。雖然還很基礎，但已經能感受到 HTML 與 JavaScript 結合的威力。
整體來說，這些元素雖然不是每天都會用，但在特定情境下能大大提升體驗。就像健身中有些輔助動作不是核心，但在需要的時候能補足效果。
iThome鐵人賽
看影片追技術