Ejemplo de Cómo Crear Un Formulario En HTML

Los formularios sirven para recoger datos de los usuarios, como información de contacto, o para permitir a los usuarios interactuar con el sitio web, como publicar comentarios o realizar búsquedas. En este artículo, aprenderemos cómo crear un formulario básico utilizando HTML.

Estructura de un Formulario HTML

Un formulario en HTML se crea utilizando la etiqueta <form>. Dentro de esta etiqueta, puedes tener una variedad de diferentes elementos de entrada, como campos de texto, botones, casillas de verificación, botones de opción y más.

<form>
<!-- Elementos de entrada van aquí -->
</form>

Elementos de Entrada

Campos de Texto

Los campos de texto se crean usando la etiqueta <input> con el atributo type establecido en "text". Por ejemplo:

<form>
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>

Teléfono

El elemento <input type="tel"> se utiliza para campos de entrada de números de teléfono.

<label for="phone">Teléfono:</label><br>
<input type="tel" id="phone" name="phone">

Fecha

El elemento <input type="date"> se utiliza para seleccionar una fecha.

<label for="dob">Fecha de nacimiento:</label><br>
<input type="date" id="dob" name="dob">

Contraseña

El elemento <input type="password"> se utiliza para campos de entrada de contraseña. El texto ingresado en este campo se muestra como puntos para ocultar la contraseña.

<label for="password">Contraseña:</label><br>
<input type="password" id="password" name="password">

Archivo

El elemento <input type="file"> se utiliza para permitir al usuario seleccionar un archivo de su sistema de archivos local.

<label for="file">Subir archivo:</label><br>
<input type="file" id="file" name="file">

Checkbox

El elemento <input type="checkbox"> se utiliza para campos de entrada que permiten al usuario seleccionar ninguna, una o varias opciones.

<label for="terms">Acepto los términos y condiciones</label>
<input type="checkbox" id="terms" name="terms">

Radio

El elemento <input type="radio"> se utiliza para campos de entrada que permiten al usuario seleccionar una opción de un conjunto de opciones.

<label for="gender">Género:</label><br>
<input type="radio" id="male" name="gender" value="male"> Hombre<br>
<input type="radio" id="female" name="gender" value="female"> Mujer

Número

El elemento <input type="number"> se utiliza para campos de entrada numéricos.

<label for="quantity">Cantidad:</label><br>
<input type="number" id="quantity" name="quantity">

Rango

El elemento <input type="range"> se utiliza para campos de entrada que deben contener un valor de una gama de valores.

<label for="volume">Volumen:</label><br>
<input type="range" id="volume" name="volume" min="0" max="10"><br>

Botones

Los botones se crean usando la etiqueta <input> con el atributo type establecido en "submit". Este botón, cuando se presiona, enviará los datos del formulario. Por ejemplo:

<form>
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Enviar">
</form>

Manejo de la Entrada del Formulario

Cuando se presiona el botón de envío, los datos del formulario se envían para ser procesados. Esto se hace a través de uno de dos métodos: GET o POST, que se especifican utilizando el atributo method en la etiqueta <form>.

Método GET

El método GET envía los datos del formulario como parte de la URL. Es útil para cosas como las búsquedas, donde los datos del formulario no son sensibles. Sin embargo, este método tiene limitaciones en términos de la longitud de los datos que se pueden enviar.

<form action="mi_script_de.php" method="get">
<!-- Elementos de entrada van aquí -->
</form>

Método POST

El método POST envía los datos del formulario separados de la URL. Esto es más seguro y puede manejar una cantidad mucho mayor de datos, por lo que se utiliza para cosas como el envío de formularios de contacto o de inicio de sesión.

<form action="mi_script_de.php" method="post">
<!-- Elementos de entrada van aquí -->
</form>

En ambos casos, el atributo action se utiliza para especificar la URL del script del lado del servidor que procesará los datos del formulario.

Ejemplo de formulario en HTML con todos los elementos 

A continuación un formulario que utiliza todos los elementos que revisamos en este artículo:

<!DOCTYPE html>
<html>
<body>
<h2>Formulario de Registro</h2>
<form action="/submit_form">
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Teléfono:</label><br>
<input type="tel" id="phone" name="phone"><br>
<label for="dob">Fecha de nacimiento:</label><br>
<input type="date" id="dob" name="dob"><br>
<label for="password">Contraseña:</label><br>
<input type="password" id="password" name="password"><br>
<label for="file">Subir archivo:</label><br>
<input type="file" id="file" name="file"><br>
<label for="terms">Acepto los términos y condiciones</label>
<input type="checkbox" id="terms" name="terms"><br>
<label for="gender">Género:</label><br>
<input type="radio" id="male" name="gender" value="male"> Hombre<br>
<input type="radio" id="female" name="gender" value="female"> Mujer<br>
<label for="quantity">Cantidad:</label><br>
<input type="number" id="quantity" name="quantity" min="1" max="10"><br>
<label for="volume">Volumen:</label><br>
<input type="range" id="volume" name="volume" min="0" max="10"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Este formulario tiene campos para nombre, apellido, correo electrónico, teléfono, fecha de nacimiento, contraseña, un campo para subir un archivo, un checkbox para términos y condiciones, radios para elegir género, y campos de número y rango para cantidad y volumen, respectivamente.

El botón "Submit" al final es el que se encargaría de enviar el formulario a la URL especificada en el atributo action de la etiqueta form (en este caso, "/submit_form"). Para que este formulario funcione en un sitio web real, necesitarías tener un servidor configurado para recibir y procesar la información de este formulario en la ruta "/submit_form".