Formularios HTML

Los formularios son una de las partes más importantes de la web. Sin
ellos, no habría una manera fácil de recopilar datos, buscar recursos o
registrarse para recibir información valiosa.

Puede incrustar formularios en sitios web con el elemento HTML form.

Dentro del elemento de formulario, se anidan varias entradas. Estas
entradas también se conocen como controles de formulario.

En este tutorial, exploraremos el elemento HTML form, los diversos tipos

de entrada que toma y cómo crear un botón de envío con el que se
envían los datos.

Al final, sabrá cómo funcionan los formularios y podrá crearlos con

confianza.

Sintaxis básica del formulario HTML

<form action="mipaginaweb.com" method="POST">

<!--La entrada de cualquier tipo y áreas de texto entra aquí-->

</form>

Tipos de entrada de formularios HTML

Usas la etiqueta <input> para crear varios controles en HTML. Es un

elemento en línea y toma atributos
como type, name, minlength, maxlength, placeholder, y así. Cada uno
de estos tiene valores específicos que toman.

El atributo placeholder es importante, ya que ayuda al usuario a

comprender el propósito del input antes de escribir algo.

Hay 20 tipos inputs diferentes, y los veremos uno por uno.

Type text

Este tipo de input toma un valor de "texto", por lo que crea una sola
línea de entrada de texto.

<input type="text" placeholder="Introduce nombre" />

Un input con el type="text" se parece a la siguiente captura de pantalla:

Type Password

Como su nombre lo indica, una entrada con un tipo de contraseña crea

una contraseña. Es automáticamente invisible para el usuario, a menos
que sea manipulado por JavaScript.

<input type="password" placeholder="Enter your password" />

Type Email

Cualquier entrada con el tipo de correo electrónico define un campo para

ingresar una dirección de correo electrónico.

<input type="email" placeholder="Enter your email" />

Type Number

Este tipo de entrada permite al usuario insertar solo números.

<input type="number" placeholder="Enter a number" />

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" />

Type Checkbox

Por lo tanto, con un tipo de entrada de radio, los usuarios podrán elegir
una de numerosas opciones. ¿Qué pasa si quieres que elijan tantas
opciones como sea posible? Eso es lo que una entrada con un atributo
de tipo establecido en checkbox hace.

<input type="checkbox" />

Type Submit
Utilice este tipo para agregar un botón de envío a los formularios.
Cuando un usuario hace clic en él, 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 to Win" />

Type Button

Una entrada con un tipo establecido en button crea un botón, que puede
ser manipulado por el tipo de detector de eventos onClick de JavaScript.
Crea un botón como un tipo de entrada de envío, pero con la excepción
de que el valor está vacío de forma predeterminada, por lo que debe
especificarse.

<input type="button" value="Submit" />

Type File

Esto define un campo para el envío de archivos. Cuando un usuario hace

clic en él, se le solicita 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 input con el type="file" se ve así:

Type Color

Este es 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 predeterminado, pero se puede anular configurando el valor
en el color deseado.

Muchos desarrolladores lo han utilizado como truco para llegar a

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 de color:

Type Search

La entrada con el tipo de búsqueda define un campo de texto como un

tipo de entrada de texto. Pero esta vez tiene el único propósito de
buscar información. Se diferencia de escribir texto en que aparece un
botón de cancelar una vez que el usuario comienza a escribir.

<input type="search" />

Type URL

Cuando el atributo de tipo de una etiqueta de entrada se establece en

URL, muestra un campo donde los usuarios pueden ingresar una URL.

<input type="url" />

Type Tel
Un tipo de entrada de tel le permite recopilar números de teléfono de los
usuarios.

<input type="tel" />

Type Date

Es posible que se haya registrado en un sitio web donde solicitó la fecha

de un evento determinado. La web probablemente usó una entrada con
el valor de tipo establecido "date" para lograr esto.

<input type="date" />

Así es como se ve una entrada con tipo de fecha:

Type Datetime-local
Esto funciona como el tipo de entrada fecha, pero también le permite al
usuario elegir una fecha con una hora en particular.

<input type="datetime-local" />

Type Week

El tipo de entrada de semana permite al usuario seleccionar una semana

específica.

<input type="week" />

Type Month
La entrada con el tipo de mes completa los meses para que el usuario
elija cuando se hace clic.

<input type="month" />

Textarea

Hay ocasiones en las que un usuario necesitará completar varias 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 porque define múltiples líneas de

entrada de texto. Toma sus propios atributos, tales como cols – para el
número de columnas, y rows para el número de filas.

<textarea cols="50" rows="20"></textarea>

Multiple Select Box

Esto 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 select y option, que siempre está anidado dentro de select.

De forma predeterminada, el usuario solo puede elegir una de las

opciones. Pero con múltiples atributos, puede permitir que el usuario
seleccione más de una de las opciones.

<select>

<option value="HTML">Select a Language</option>

<option value="HTML">HTML</option>

<option value="CSS">CSS</option>

<option value="JavaScript">JavaScript</option>

<option value="React">React</option>

</select>

Cómo etiquetar entradas HTML

Es importante asignar etiquetas a los controles de formulario. Cuando

están correctamente conectados al campo de entrada a través de su
atributo for y el atributo id, es más fácil de usar para el usuario, ya que
simplemente puede hacer clic en la etiqueta para acceder a la entrada.

<label for="name">Name</label>

<input type="text" id="name" /> <br />

<label for="check">Agree with terms</label>

<input type="checkbox" id="check" />

Cómo funcionan los formularios HTML

Cuando un usuario completa un formulario y lo envía con el botón

Enviar, los datos en los controles del formulario se envían al servidor a
través de métodos de solicitud HTTP GET o POST.

Entonces, ¿cómo se indica el servidor? El elemento de formulario toma

un atributo de acción, que debe tener su valor especificado en la URL del
servidor. También toma un atributo de método, donde se especifica el
método HTTP que utiliza para transmitir los valores al servidor.

Este método podría ser GET o POST. Con el método GET, los valores
ingresados por el usuario son visibles en la URL cuando se envían los
datos. Pero con POST, los valores se envían en encabezados HTTP, por lo
que esos valores no son visibles en la URL.

Si no se usa un atributo de método en el formulario, se asume

automáticamente que el usuario quiere usar el método GET, porque es
el predeterminado.

Entonces, ¿cuándo debería usar los métodos GET o POST? Usa el

método GET para enviar datos no confidenciales o recuperar datos de un
servidor (por ejemplo, durante búsquedas). Utilizar el POST al enviar
archivos o datos confidenciales.

Mini Proyecto: Crea un formulario de contacto básico

Tomemos lo que hemos aprendido sobre los formularios y usémoslo para
hacer un formulario de contacto simple. También presentaré algunos
conceptos nuevos a medida que avanzamos.

El HTML:

<form action=servidor-ejemplo.com">

<fieldset>

<legend>Contacto</legend>

<div class="form-control">

<label for="name">Nombre</label>

<input type="name" id="name" placeholder="Introduce tu

nombre" required />

</div>

<div class="form-control">

<label for="email">Email</label>

<input

type="email"

id="email"

placeholder="Introduce tu Email"

required

/>

</div>

<div class="form-control">

<label for="message">Mensaje</label>

<textarea

id="message"

cols="30"
 rows="10"

placeholder="Introduce tu mensaje"

required

></textarea>

</div>

<input type="submit" value="Enviar" class="submit-btn" />

</fieldset>

</form>

¿Qué está pasando en este código HTML?

Primero, un elemento form está envolviendo todos los demás elementos.

Tiene una acción establecida para “servidor-ejemplo.com”, un servidor
ficticio donde se recibirán los datos del formulario.

Después del elemento de form, todos los demás elementos también

están rodeados por un elemento fieldset con la etiqueta legend debajo.

Usamos el elemento fieldset para agrupar las entradas relacionadas, y la

etiqueta legend contiene un título que transmite de qué se trata el
formulario.

Los campos name, email, y textarea están todos en un elemento div con
la clase asignada "form-control". Por lo tanto, se comportan como un
elemento de bloque para facilitar el estilo con CSS.

También están validados con el atributo required, en consecuencia, el

formulario no se envía cuando esos campos están vacíos o cuando el
usuario no ingresa los valores en el formato apropiado.

Después de todo eso, tendremos el resultado en la siguiente captura de

pantalla: