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