3.1 元素 <input type="button">
元素 <input type="button"> 用於創建一個沒有內建預設行為的按鈕。 不同於 submit 和 reset 按鈕會在點擊時執行特定動作，button 按鈕通常與 JavaScript 結合使用來執行特定任務。
使用示例：
HTML
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
基本屬性：
1. 屬性 value: 設定按鈕上顯示的文本。
HTML
<input type="button" value="Click Me">
2. 屬性 onclick: 定義當按鈕被點擊時執行的 JavaScript 函數。
HTML
<input type="button" value="Click Me" onclick="myFunction()">
JavaScript
function myFunction() {
alert('Button clicked!');
}
使用例子：
調用 JavaScript 函數：
HTML
<input type="button" value="Show Alert" onclick="showAlert()">
JavaScript
function showAlert() {
alert('This is an alert!');
}
更改元素樣式：
HTML
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
JavaScript
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 元素 <input type="checkbox">
元素 <input type="checkbox"> 用於創建核取方塊，允許用戶從提供的選項中選擇一個或多個。核取方塊可以被選中或取消選中。
使用示例：
HTML
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
基本屬性：
1. 屬性 name: 設置表單元素的名稱，該名稱將隨數據一起發送到伺服器。
HTML
<input type="checkbox" name="subscribe">
2. 屬性 value: 設置當核取方塊被選中時發送到伺服器的值。
HTML
<input type="checkbox" name="subscribe" value="yes">
3. 屬性 checked: 定義核取方塊是否應該預設被選中。
HTML
<input type="checkbox" name="subscribe" value="yes" checked>
使用示例：
多個核取方塊：
HTML
<p>Select your interests:</p>
<input type="checkbox" name="interest" value="sports">Sports<br>
<input type="checkbox" name="interest" value="music">Music<br>
<input type="checkbox" name="interest" value="movies">Movies<br>
預設選中的核取方塊：
HTML
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 元素 <input type="radio">
單選按鈕 (type="radio")
元素 <input type="radio"> 用於創建「單選按鈕」，允許用戶從組中選擇唯一選項。單選按鈕通過相同的 name 屬性值進行分組。
使用示例：
HTML
<p>Choose your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
基本屬性：
屬性 name: 設定單選按鈕組的名稱。所有具有相同名稱的單選按鈕將屬於同一組，使用者只能選擇其中一個。
HTML
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
屬性 value: 設置當單選按鈕被選中時發送到伺服器的值。
HTML
<input type="radio" name="gender" value="male">
屬性 checked: 定義單選按鈕是否應該預設被選中。
HTML
<input type="radio" name="gender" value="male" checked>
使用示例：
選擇單項的單選按鈕組：
HTML
<p>Choose a color:</p>
<input type="radio" name="color" value="red">Red<br>
<input type="radio" name="color" value="green">Green<br>
<input type="radio" name="color" value="blue">Blue<br>
預設選中的單選按鈕：
HTML
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION