Hoy en día, los formularios HTML son bastante utilizados dentro de las páginas web. Esto es debido a que permiten reunir información sobre los visitantes, para luego realizar distintas acciones con ella. Y es muy frecuente observar formularios de contacto o formularios de registro, que permiten a los dueños de los sitios web almacenar los datos de sus usuarios.
En este tutorial, te mostraremos cuáles son los pasos para que puedas crear formularios en tu web.
Pasos para crear un formulario en HTML
En primer lugar, se debe indicar en el documento HTML que se construirá un nuevo formulario, para ello se emplean las etiquetas <form> y </form>. Estas etiquetas admiten una serie de atributos, pero los más importantes son:
- ACTION: Señala a qué dirección o página se va a enviar el formulario.
- METHOD: Señala el método por el cual se enviará la información; su valor admitido puede ser get o post
<form action="envio.php" method="post">
</form>
Luego, dentro de las etiquetas <form> y </form> se podrán incluir varios elementos según lo que se necesite. Los más básicos son:
- <input></input>: Es el elemento más importante del formulario HTML, debido a que muestra controles que permiten a los usuarios ingresar datos. Es posible cambiar las características de este elemento gracias al atributo type (tipo). Este atributo especifica cuál es el tipo de entrada esperada desde el usuario.
Con el paso de los años, HTML ha ampliado las posibilidades para este elemento. Algunos de sus valores más comunes son:
- text: Para entradas de texto en general.
- password: Para el ingreso de contraseñas de forma segura.
- submit: Simboliza un botón que, al presionarlo, envía el formulario.
- email: Representa una entrada para direcciones de correo electrónico.
- button: Representa un botón que no cuenta con una acción predefinida.
- file: Representa un control que permite seleccionar archivos.
- number: Para entradas de tipo numéricas.
- <select></select>: Este elemento muestra una lista desplegable con algunos valores posibles que se podrán elegir. Dentro de estas etiquetas, se pueden agregar las opciones posibles a través de las etiquetas <opcion> y </opcion>.
- <textarea></textarea>: Define un cuadro de texto de varias líneas, donde el usuario tiene la posibilidad escribir más palabras de las que permite el input de tipo text.
Además, puedes acompañar cada elemento del formulario con etiquetas; para ello, se pueden crear utilizando <label> y </label>.
Ejemplo de formulario básico en HTML:
<form action="envio.php" method="post">
<label>Nombre:</label>
<input type="text" name="nombre"> <!-- campo para el nombre -->
<br><br>
<label>Apellido:</label>
<input type="text" name="apellido"> <!-- campo para el apellido -->
<br><br>
<label>Email:</label>
<input type="email" name="email"> <!-- campo para el email -->
<br><br>
<input type="submit" value="Enviar"> <!-- botón para enviar el form -->
</form>Por último, una vez que se haya construido el formulario en HTML, lo ideal sería crear un archivo en el backend (con su respectivo código), que permita almacenar toda la información que se manda desde el formulario en una base de datos.
