Todo sobre formularios HTML con ejemplos. Los formularios en HTML son una herramienta importante para la recopilación de datos e interacción con los usuarios en un sitio web. Aquí te explico cómo crear formularios en HTML y te doy algunos ejemplos:
Creando un formulario en HTML
El elemento <form> se utiliza para crear un formulario en HTML. El atributo action se utiliza para especificar el destino de los datos del formulario, y el atributo method se utiliza para especificar el método HTTP que se utilizará para enviar los datos.
<form action="procesar.php" method="post">
<!-- contenido del formulario -->
</form>
Dentro del elemento <form> se colocan los elementos del formulario, como campos de entrada, botones, casillas de verificación y otros elementos.
Ejemplos de formularios en HTML
Formulario de contacto
Este es un ejemplo simple de formulario de contacto con campos de nombre, correo electrónico, asunto y mensaje.
<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<label for="asunto">Asunto:</label>
<input type="text" id="asunto" name="asunto" required>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" required></textarea>
<button type="submit">Enviar</button>
</form>
Formulario de registro
Este es un ejemplo de formulario de registro con campos de nombre, correo electrónico, contraseña y fecha de nacimiento.
<form action="procesar.php" method="post">
<label for="nombre">Nombre completo:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
<label for="fecha_nacimiento">Fecha de nacimiento:</label>
<input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required>
<button type="submit">Registrarse</button>
</form>
Formulario de encuesta
Este es un ejemplo de formulario de encuesta con preguntas de opción múltiple y una pregunta de respuesta abierta.
<form action="procesar.php" method="post">
<label for="pregunta1">¿Cuál es tu color favorito?</label><br>
<input type="radio" id="pregunta1_opcion1" name="pregunta1" value="rojo" required>
<label for="pregunta1_opcion1">Rojo</label><br>
<input type="radio" id="pregunta1_opcion2" name="pregunta1" value="azul" required>
<label for="pregunta1_opcion2">Azul</label><br>
<input type="radio" id="pregunta1_opcion3" name="pregunta1" value="verde" required>
<label for="pregunta1_opcion3">Verde</label><br>
<label for="pregunta2">¿Qué tipo de comida te gusta más?</label><br>
<input type="checkbox" id="pregunta2_opcion1" name="pregunta2" value="italiana">
<label for="pregunta2_opcion1">Italiana</label><br>
<input type="checkbox" id="pregunta2_opcion2" name="pregunta2" value="mexicana">
<label for="pregunta2_opcion2">Mexicana</label><br>
<input type="checkbox" id="pregunta2_opcion3" name="pregunta2" value="china">
<label for="pregunta2_opcion3">China</label><br>
<label for="pregunta3">¿Cuál es tu película favorita?</label><br>
<select id="pregunta3" name="pregunta3" required>
<option value="">Selecciona una opción</option>
<option value="1">El Padrino</option>
<option value="2">El señor de los anillos</option>
<option value="3">Star Wars</option>
</select>
<label for="pregunta4">¿Qué piensas de nuestro sitio web?</label><br>
<textarea id="pregunta4" name="pregunta4"></textarea>
<button type="submit">Enviar</button>
</form>En este ejemplo, la pregunta 1 es una pregunta de opción única con tres opciones posibles. La pregunta 2 es una pregunta de opción múltiple con tres opciones posibles. La pregunta 3 es una pregunta de selección con tres opciones posibles. La pregunta 4 es una pregunta de respuesta abierta que utiliza un elemento textarea.
Es importante notar que algunos de los elementos tienen el atributo required para obligar al usuario a proporcionar una respuesta. También hay un botón de envío (submit) para enviar los datos del formulario.
Espero que estos ejemplos te hayan ayudado a entender cómo crear formularios en HTML. Recuerda que hay muchos otros elementos y atributos que puedes utilizar para personalizar tus formularios y hacerlos más útiles para tus necesidades específicas.
