Botones en formularios
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 45 de 60.
Los botones juegan un papel clave en los formularios, donde ayudan a enviar datos o restablecer campos. Veamos cómo funcionan:
Botón de envío:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": Envía los datos del formulario al servidor.
Botón de reinicio:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": Borra todos los campos y los restablece a sus valores predeterminados.
Desafío
FácilCrea un documento HTML que incluya un formulario con diferentes tipos de botones. El formulario debe tener los siguientes elementos:
- Un campo de entrada de texto con el name "message" y un placeholder que diga "Enter your message".
- Añade un botón de envío (
<button type="submit">) con el texto "Send". - Añade un botón de reinicio (
<button type="reset">) con el texto "Clear". - Añade un botón genérico (
<button>) con el texto "Click Me".
Hoja de referencia
Los botones en los formularios tienen diferentes tipos para funciones específicas:
Botón de envío:
<button type="submit">Submit</button>type="submit": Envía los datos del formulario al servidor
Botón de reinicio:
<button type="reset">Reset</button>type="reset": Borra todos los campos y los restablece a sus valores predeterminados
Botón genérico:
<button>Click Me</button>- Botón predeterminado sin un comportamiento de formulario específico
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<!-- Escribe código aquí -->
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta
IngredientesPasos2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2