3.1 Element <input type="button">
The <input type="button"> element is used to create a button that doesn't have a default behavior.
Unlike submit and reset buttons that perform certain actions when clicked, the button is often used in combination with JavaScript to execute specific tasks.
Example usage:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Key attributes:
1. Attribute value: sets the text that will be displayed on the button.
<input type="button" value="Click Me">
2. Attribute onclick: defines a JavaScript function that will execute when the button is clicked.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Example usages:
Calling a JavaScript function:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Changing element style:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Element <input type="checkbox">
The <input type="checkbox"> element is used to create checkboxes that allow users to select one or multiple options from the given choices. A checkbox can be toggled on or off.
Example usage:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Key attributes:
1. Attribute name: sets the name of the form element that will be sent to the server with the data.
<input type="checkbox" name="subscribe">
2. Attribute value: sets the value that will be sent to the server if the checkbox is checked.
<input type="checkbox" name="subscribe" value="yes">
3. Attribute checked: determines if the checkbox should be checked by default.
<input type="checkbox" name="subscribe" value="yes" checked>
Example usages:
Multiple checkboxes:
<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>
Checkbox with pre-selected value:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Element <input type="radio">
Radio Button Field (type="radio")
The <input type="radio"> element is used to create radio buttons that allow users to select only one option from a group. Radio buttons are grouped together by using the same name attribute value.
Example usage:
<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>
Key attributes:
Attribute name: sets the name of the radio button group. All radio buttons with the same name will belong to one group, and the user can select only one of them.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Attribute value: sets the value that will be sent to the server if the radio button is selected.
<input type="radio" name="gender" value="male">
Attribute checked: determines if the radio button should be selected by default.
<input type="radio" name="gender" value="male" checked>
Example usages:
Group of radio buttons to select one option:
<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>
Radio button with pre-selected value:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION