FORMULARIOS

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.
La etiqueta form:
La etiqueta <form> es el elemento fundamental para crear formularios en HTML. Define
el inicio y el final de una sección (formulario HTML) de una página web donde los
usuarios pueden introducir y enviar datos.

Entre sus etiquetas de inicio <form> y cierre </form>, se agrupan diferentes tipos de
elementos de entrada, como campos de texto, botones de opción, casillas de
verificación, botones de envío, etc., que permiten a los usuarios enviar datos al servidor
para su procesamiento.
¿Cómo usar la etiqueta form?

Primero debemos crear la etiqueta de inicios <form> y dentro de ella introducimos los
atributos necesarios
Segundo, introducimos todos lo elementos HTML necesarios para crear nuestro
formulario HTML.
Y tercero, cerramos el elemento HTML que nos permite crear un formulario con la
etiqueta de cierre </form>.
Ejemplo de sintaxis básica de etiqueta <form>:
Atributos importantes de la etiqueta form:

action: Especifica la URL a la que se enviarán los datos del formulario cuando se envíe. Por
ejemplo: action="/ruta/al/servidor". Si se omite, los datos del formulario se enviarán al
mismo lugar donde se encuentra la página actual.

method: Define el método HTTP utilizado para enviar los datos del formulario. Los valores
más comunes son:

GET: Los datos del formulario se enviarán como parte de la URL en la barra de direcciones
del navegador. Es adecuado para formularios que envían datos pequeños y no
confidenciales.
POST: Los datos se envían en el cuerpo de la petición HTTP. (Más seguro que GET para datos
sensibles)

enctype: Define el tipo de codificación de los datos del formulario. El valor más común y el
que se aplica por defecto si no se especifica el mismo es: application/x-www-form-
urlencoded.
 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

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.
El HTML:
<form action=servidor-ejemplo.com">
<fieldset> <div class="form-control">
<legend>Contacto</legend> <label for="message">Mensaje</label>
<div class="form-control"> <textarea
<label for="name">Nombre</label> id="message"
<input type="name" id="name" placeholder= cols="30"
"Introduce tu nombre" required /> rows="10"
</div> placeholder="Introduce tu mensaje"
required
<div class="form-control"> ></textarea>
<label for="email">Email</label> </div>
<input <input type="submit" value="Enviar" class="submit-btn" /
type="email" </fieldset>
id="email" </form>
placeholder="Introduce tu Email"
required
/>
</div>
¿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 forma, 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:

El CSS:
label {
body {
line-height: 1.9rem;
display: flex;
}
align-items: center;
justify-content: center;
input[type="submit"] {
height: 100vh;
transform: translate(2.2%);
font-family: cursive;
padding: 3px;
}
margin-top: 0.6rem;
font-family: cursive;
input,
font-weight: bold;
textarea {
}
width: 100%;
padding: 5px;
fieldset {
outline: none;
padding: 20px 40px;
}
}
¿Qué hace el código CSS aquí?
Centramos todo en el cuerpo horizontalmente con Flexbox y verticalmente con una altura de ventana del
100 %. Usamos una familia tipográfica de cursiva.

Le dimos a las entradas y a textarea un ancho del 100% para que tomen todo el ancho del contenedor
padre. Las etiquetas tienen una altura de línea mínima de 1,9 rem (30,4 px), por lo que no se quedan
demasiado cerca de sus respectivas entradas.

Diseñamos específicamente el botón (botón de tipo de entrada) con la propiedad de transformación para
empujarlo hacia el centro, ya que estaba un poco descentrado. Le dimos un relleno de 3px para tener más
espacio alrededor. Luego seleccionamos una familia de fuentes cursiva para él con un peso de negrita.

Porque el botón estaba demasiado cerca del textarea, establecemos un margen superior de 0,6 rem para
empujarlo un poco hacia abajo.
Le dimos a nuestro elemento fieldset un relleno de 20 px en la parte superior e inferior, con 40
px a la izquierda y a la derecha para separar el borde que crea alrededor de los elementos de
formulario en los que está envuelto.

Al final de todo, tenemos el hermoso formulario de la imagen: