Aprendiendo HTML: Formularios y Campos de Entrada

Formularios y Campos de Entrada

Formularios y Campos de Entrada en HTML

Los formularios son una parte esencial de muchas páginas web, ya que permiten a los usuarios enviar datos. En esta lección, aprenderemos a crear formularios básicos y a utilizar varios tipos de campos de entrada.

Formulario Básico

Un formulario en HTML se define con el elemento <form>. Aquí tienes un ejemplo de un formulario básico:

<form action="/submit" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre"><br><br>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Enviar">
</form>
        

Elementos de Entrada Comunes

HTML soporta varios tipos de campos de entrada que pueden ser utilizados en los formularios:

1. Campo de Texto

Utilizado para la entrada de una sola línea de texto.

<input type="text" name="nombre">
        

2. Campo de Correo Electrónico

Utilizado para la entrada de direcciones de correo electrónico.

<input type="email" name="email">
        

3. Campo de Contraseña

Utilizado para la entrada de contraseñas. El texto ingresado se muestra como puntos o asteriscos.

<input type="password" name="password">
        

4. Campos de Radio

Utilizados para seleccionar una opción entre un grupo de opciones.

<input type="radio" id="opcion1" name="grupo1" value="opcion1">
<label for="opcion1">Opción 1</label><br>
<input type="radio" id="opcion2" name="grupo1" value="opcion2">
<label for="opcion2">Opción 2</label>
        

5. Casillas de Verificación

Utilizadas para seleccionar una o más opciones de un grupo de opciones.

<input type="checkbox" id="opcion1" name="opcion1" value="opcion1">
<label for="opcion1">Opción 1</label><br>
<input type="checkbox" id="opcion2" name="opcion2" value="opcion2">
<label for="opcion2">Opción 2</label>
        

6. Menú Desplegable

Utilizado para seleccionar una opción de una lista desplegable.

<label for="opciones">Elige una opción:</label>
<select id="opciones" name="opciones">
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
</select>
        

7. Área de Texto

Utilizada para la entrada de texto en múltiples líneas.

<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
        

Resumen

En esta lección, hemos cubierto los fundamentos de los formularios HTML y varios tipos de campos de entrada que puedes utilizar. En la próxima lección, veremos cómo dar estilo a los formularios utilizando CSS.

© 2024 Programar desde cero