3.1 Elemento <input type="button">
El elemento <input type="button"> se usa para crear un botón que no tiene un comportamiento predeterminado integrado.
A diferencia de los botones submit y reset, que realizan acciones específicas al hacer clic, el botón generalmente
se usa en combinación con JavaScript para realizar tareas específicas.
Ejemplo de uso:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Atributos principales:
1. Atributo value: establece el texto que se mostrará en el botón.
<input type="button" value="Click Me">
2. Atributo onclick: define la función de JavaScript que se ejecutará al hacer clic en el botón.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Ejemplos de uso:
Llamada a función de JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Cambio de estilo de un elemento:
<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 Elemento <input type="checkbox">
El elemento <input type="checkbox"> se usa para crear casillas de verificación que
permiten a los usuarios seleccionar una o varias opciones de las ofrecidas. La casilla puede estar activada o desactivada.
Ejemplo de uso:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Atributos principales:
1. Atributo name: establece el nombre del elemento del formulario que se enviará al servidor junto con los datos.
<input type="checkbox" name="subscribe">
2. Atributo value: establece el valor que será enviado al servidor si la casilla está marcada.
<input type="checkbox" name="subscribe" value="yes">
3. Atributo checked: determina si la casilla debe estar marcada por defecto.
<input type="checkbox" name="subscribe" value="yes" checked>
Ejemplos de uso:
Varias casillas de verificación:
<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>
Casilla con valor preestablecido:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Elemento <input type="radio">
Campo para seleccionar botón de radio (type="radio")
El elemento <input type="radio"> se usa para crear "botones de radio" que permiten a los usuarios
seleccionar solo una opción de un grupo. Los botones de radio se agrupan mediante el mismo valor de atributo name.
Ejemplo de uso:
<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>
Atributos principales:
Atributo name: establece el nombre del grupo de botones de radio. Todos los botones de radio con el mismo nombre pertenecerán
a un solo grupo, y el usuario podrá elegir solo uno de ellos.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Atributo value: establece el valor que será enviado al servidor si se selecciona el botón de radio.
<input type="radio" name="gender" value="male">
Atributo checked: determina si el botón de radio debe estar seleccionado por defecto.
<input type="radio" name="gender" value="male" checked>
Ejemplos de uso:
Grupo de botones de radio para seleccionar una opción:
<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>
Botón de radio con valor preestablecido:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION