Los formularios son una de las partes más importantes de la web. Sin ellos, no habría una forma fácil de recoger datos, buscar recursos o inscribirse para recibir información valiosa.
Los formularios se pueden incrustar en los sitios web con el elemento form HTML. Dentro del elemento formulario se anidan varias entradas. Estas entradas también se conocen como controles de formulario.
En este tutorial, exploraremos el elemento form HTML, los distintos tipos de entrada que admite y cómo crear un botón de envío con el que se envían los datos.
Al final, sabrás cómo funcionan los formularios y podrás hacerlos con confianza.
Sintaxis básica de los formularios HTML
<form action="wordesdecero.es" method="POST">
<!--Las entradas (input) de cualquier tipo y áreas de texto van aquí->
</form>Tipos de Formularios HTML
La etiqueta <input> se utiliza para crear varios controles de formulario en HTML. Es un elemento en línea y toma atributos como type, name, minlength, maxlength, placeholder, etc. Cada uno de ellos tiene valores específicos que toman.
El atributo placeholder es importante ya que ayuda al usuario a entender el propósito del campo de entrada antes de que escriba algo.
Hay 20 tipos de entrada diferentes, y los veremos uno por uno.
Type Text
Este tipo de entrada toma un valor de “text”, por lo que crea una sola línea de entrada de texto.
<input type="text" placeholder="Ingresa tu nombre" />Una entrada con el tipo de texto (“text“) se parece a la captura de pantalla siguiente:
Type Password
Como su nombre indica, una entrada con un tipo password crea una contraseña. Es automáticamente invisible para el usuario, a menos que sea manipulada por JavaScript.
<input type="password" placeholder="Ingresa tu contraseña" />
Type Email
Cualquier entrada con el tipo email define un campo para introducir una dirección de correo electrónico.
<input type="email" placeholder="Ingresa tu correo electrónico" />
Type Number
Este tipo de entrada permite al usuario insertar sólo números.
<input type="number" placeholder="Ingresa un número" />
Type Radio
A veces, los usuarios tendrán que elegir una de las numerosas opciones. Un campo de entrada con sus atributos de tipo establecidos en “radio” le permite hacer esto.
<input type="radio" />Un ejemplo más completo:
<!DOCTYPE html>
<html>
<h3>Ejemplo de Botones Radio</h3>
<body>
<form>
SELECCIONA GÉNERO
<br>
<input type="radio" name="gender" id="male">
<label for="male">Masculino</label><br>
<input type="radio" name="gender" id="female">
<label for="female">Femenino</label>
</form>
</body>
</html>
Type Checkbox
Así, con un tipo de entrada de radio, los usuarios podrán elegir una de las numerosas opciones. ¿Qué pasa si quieres que elijan tantas opciones como sea posible? Eso es lo que hace una entrada con un atributo de tipo establecido como checkbox.
<input type="checkbox" />Un ejemplo más completo:
<!DOCTYPE html>
<html>
<h3>Ejemplo de Checkboxes HTML</h3>
<body>
<form>
<b>SELECCIONA MATERIAS</b>
<br>
<input type="checkbox" name="subject" id="maths">
<label for="maths">Matemáticas</label>
<input type="checkbox" name="subject" id="science">
<label for="science">Ciencia</label>
<input type="checkbox" name="subject" id="language">
<label for="english">Idiomas</label>
</form>
</body>
</html>
Type Submit
Este tipo se utiliza para añadir un botón de envío a los formularios. Cuando un usuario hace clic en él, se envía automáticamente el formulario. Toma un atributo de valor, que define el texto que aparece dentro del botón.
<input type="submit" value="Enter para ganar" />
Type Button
Una entrada con un tipo establecido como button crea un botón, que puede ser manipulado por el tipo de oyente de eventos onClick de JavaScript. Crea un botón igual que una entrada de tipo submit, pero con la excepción de que el valor está vacío por defecto, por lo que hay que especificarlo.
<input type="button" value="Enviar" />
Type File
Define un campo para el envío de archivos. Cuando un usuario hace clic en él, se le pide que inserte el tipo de archivo deseado, que puede ser una imagen, un PDF, un archivo de documento, etc.
<input type="file" />El resultado de un tipo file de entrada tiene el siguiente aspecto:
Type Color
Se trata de un tipo de entrada elegante introducido por HTML5. Con él, el usuario puede enviar su color favorito, por ejemplo. El negro (#000000) es el valor por defecto, pero se puede anular estableciendo el valor a un color deseado.
Muchos desarrolladores lo han utilizado como truco para conseguir seleccionar diferentes tonos de color disponibles en formatos RGB, HSL y alfanuméricos.
<input type="color" />Este es el resultado de un tipo de entrada color:
Type Search
La entrada con el tipo search define un campo de texto al igual que un tipo de entrada de texto. Pero, esta vez tiene el único propósito de buscar información. Se diferencia del tipo text en que, una vez que el usuario comienza a escribir, aparece un botón de cancelación.
<input type="search" />
Type URL
Cuando el atributo type de una etiqueta de entrada se establece como url, muestra un campo donde los usuarios pueden introducir una URL.
<input type="url" />
Type Tel
Un tipo de entrada tel te permite recoger los números de teléfono de los usuarios.
<input type="tel" />
Type Date
Es posible que te hayas registrado en un sitio web en el que hayas solicitado la fecha de un determinado evento. El sitio probablemente utilizó una entrada con el valor de tipo establecido en date para lograr esto.
<input type="date" />Este es el aspecto de una entrada con tipo date:
Type Datetime-local
Esto funciona como el tipo de entrada date, pero también permite al usuario elegir una fecha con una hora determinada.
<input type="datetime-local" />
Type Week
El tipo de entrada week permite al usuario seleccionar una semana específica.
<input type="week" />
Type Month
La entrada con el tipo month rellena los meses para que el usuario los elija al hacer clic.
<input type="month" />
Textarea
Hay ocasiones en las que un usuario necesitará rellenar múltiples líneas de texto que no serían adecuadas en un tipo de entrada de texto (ya que especifica un campo de texto de una línea).
textarea permite al usuario hacer esto ya que define múltiples líneas de entrada de texto. Toma sus propios atributos como cols – para el número de columnas, y rows para el número de filas.
<textarea cols="50" rows="20"></textarea>
Selección Múltiple con select
Es como un botón de radio y una casilla de verificación en un solo paquete. Está incrustado en la página con dos elementos – un elemento de selección (select) y una opción (option), que siempre está anidada dentro de la selección.
Por defecto, el usuario sólo puede elegir una de las opciones. Pero, con los atributos múltiples, puedes permitir que el usuario seleccione más de una de las opciones.
<select>
<option value="HTML">Selecciona un Lenguaje</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">Java</option>
</select>
Cómo Etiquetar los Input HTML
Asignar etiquetas a los controles de formulario es importante. Cuando están correctamente conectadas al campo input a través de su atributo for y el atributo id del input, es más fácil para el usuario utilizarlas, ya que puede hacer clic en la propia etiqueta para acceder a la entrada.
<label for="name">Nombre</label>
<input type="text" id="name" /> <br />
<label for="check">Aceptar las condiciones</label>
<input type="checkbox" id="check" />
Cómo Funcionan los Formularios HTML
Cuando un usuario rellena un formulario y lo envía con el botón de envío (submit), los datos de los controles del formulario se envían al servidor a través de los métodos de petición HTTP GET o POST.
¿Cómo se indica al servidor? El elemento form toma un atributo action, cuyo valor debe ser la URL del servidor. También toma un atributo method, donde se especifica el método HTTP que utiliza para transmitir los valores al servidor.
Este método puede ser GET o POST. Con el método GET, los valores introducidos por el usuario son visibles en la URL cuando se envían los datos. Pero, con POST, los valores se envían en las cabeceras HTTP, por lo que esos valores no son visibles en la URL.
Si no se utiliza un atributo de método en el formulario, se asume automáticamente que el usuario quiere utilizar el método GET, porque es el predeterminado.
Entonces, ¿Cuándo debe utilizar el método GET o POST? Utiliza el método GET para enviar datos no sensibles o recuperar datos de un servidor (por ejemplo, durante las búsquedas). Utiliza la solicitud POST cuando envíes archivos o datos sensibles.
Mini Proyecto: Construir un Formulario de Contacto Básico
Tomemos lo que hemos aprendido sobre los formularios y utilicémoslo para hacer un simple formulario de contacto. También introduciré algunos conceptos nuevos a medida que avancemos para redondearlo todo.
Aquí está el HTML:
<form action=ejemplo-servidor.com">
<fieldset>
<legend>Contacto</legend>
<div class="form-control">
<label for="name">Nombre</label>
<input type="name" id="name" placeholder="Ingresa tu nombre" required />
</div>
<div class="form-control">
<label for="email">Email</label>
<input
type="email"
id="email"
placeholder="Ingresa tu correo"
required
/>
</div>
<div class="form-control">
<label for="message">Mensaje</label>
<textarea
id="message"
cols="30"
rows="10"
placeholder="Ingresa tu mensaje"
required
></textarea>
</div>
<input type="submit" value="Enviar" class="submit-btn" />
</fieldset>
</form>¿Qué ocurre en este código HTML?
En primer lugar, un elemento form está envolviendo a todos los demás elementos. Tiene una acción establecida para “ejemplo-servidor.com“, un servidor ficticio donde se recibirán los datos del formulario.
Después del elemento form, todos los demás elementos están también rodeados por un elemento fieldset con una etiqueta legend justo debajo.
Utilizamos el elemento o la etiqueta fieldset para agrupar las inputs relacionadas, y la etiqueta legend contiene una leyenda que transmite de qué trata el formulario.
Las inputs name, email y textarea están todas en un div con una clase form-control. Así que se comportan como un elemento de bloque, con el fin de hacer más fácil el estilo con CSS.
También se validan con el atributo required, por lo que el formulario no se envía cuando esos campos están vacíos o cuando el usuario no escribe los valores en el formato adecuado.
Después de todo esto, tendremos el resultado de la captura de pantalla de abajo:
¿Qué tan feo es eso? Tenemos que aplicarle un poco de estilo.
Aquí está el CSS:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: cursive;
}
input,
textarea {
width: 100%;
padding: 5px;
outline: none;
}
label {
line-height: 1.9rem;
}
input[type="submit"] {
transform: translate(2.2%);
padding: 3px;
margin-top: 0.6rem;
font-family: cursive;
font-weight: bold;
}
fieldset {
padding: 20px 40px;
}¿Qué hace el código CSS aquí?
Centramos todo en el cuerpo horizontalmente con Flexbox, y verticalmente con una altura de vista del 100%. Usamos un font-family de cursiva.
Le dimos a las inputs y al textarea un ancho de 100% para que se extiendan a lo largo de toda la página. Las etiquetas tienen una altura de línea mínima de 1,9rem (30,4px), para que no queden demasiado cerca de sus respectivas entradas.
Específicamente estilizamos el botón (tipo de entrada button) con la propiedad transform para empujarlo al centro ya que estaba un poco descentrado. Le dimos un padding de 3px para tener más espacio alrededor. Luego seleccionamos una fuente cursiva con un peso de negrita (bold).
Como el botón estaba demasiado cerca del textarea, le pusimos un margin-top de 0.6rem para empujarlo un poco hacia abajo.
Le dimos a nuestro elemento fieldset un padding de 20px en la parte superior e inferior, con 40px a la izquierda y a la derecha para apartar el borde que crea alrededor de los elementos del formulario en el que está envuelto.
Al final de todo, tenemos el hermoso formulario de abajo:
Conclusión
Espero que este tutorial te haya ayudado a entender cómo funcionan los formularios. Ahora deberías tener el conocimiento que necesitas para integrar formularios en tus sitios web para que puedas empezar a recoger datos.
Gracias por leer, y sigue codificando.
