Entendiendo HTML, input (Entrada), Textarea y formularios ...

Formularios HTML

Esta lección es muy fácil de entender, pero es esencial debido a que en este nuevo conocimiento, se transmitirá toda la interactividad de Internet. Hay algunas etiquetas HTML adicionales que debemos analizar antes de terminar el Pre-Work: son las primeras formas posibles de interacción que se introdujeron en HTML: las entradas o inputs y los formularios.

Como siempre, comparemos nuestro sitio web con un documento de MS Word... En algún momento, los científicos necesitaban crear formularios como los que llenamos cuando pagamos nuestros impuestos: con espacios en blanco disponibles para que el usuario los llene con su Nombre, Apellido, Fecha de nacimiento, etc.

Los elementos que el usuario completa en un formulario se denominan <input> y siempre tienen que estar envueltos dentro de una etiqueta <form>. También puedes utilizar todas las demás etiquetas HTML que aprendimos en las lecciones anteriores sin ningún problema.

Aquí hay un ejemplo de un formulario simple en HTML:

La siguiente es una lista de todos los elementos posibles que podemos usar para recibir cualquier entrada o input del usuario:

Name	Declaration	Description
Texto	<input type="text">	El input de texto está destinada a recibir cualquier pequeño string de caracteres como: nombre de usuario, nombre, apellido, fecha de nacimiento, etc. <input type="text" name="Name" />name="comments"><textarea/>
Textarea	<textarea>	El área de texto es ideal para inputs de texto largos. Su principal diferencia respecto al input de texto es su capacidad de permitir múltiples líneas. <textarea name="comments"><textarea/>
Contraseña	<input type="password" />	Esto es como un tipo de input = "texto" pero con la única diferencia de que los caracteres están ocultos como viñetas: el usuario no puede ver lo que están escribiendo. <input type="password" name="password" />
Radiobutton	<input type="radio">	Permite al usuario seleccionar sólo una de todos los inputs con el mismo nombre. <input type="radio" name="color" value="red" /> <input type="radio" name="color" value="green" />
Checkbox	<input type="checkbox">	Debes usar corchetes en el nombre del input para permitir que el usuario seleccione múltiples opciones al mismo tiempo. <input type="checkbox" name="color[]" value="green" /> <input type="checkbox" name="color[]" value="blue" />
Archivo	<input type="file">	Esta es la única manera de trabajar con archivos. Por ejemplo: es lo que usan los sitios web cuando te piden que subas una foto. <input type="file" name="photo" value="" />
Botón de Enviar	<input type="submit">	Cuando el formulario está listo para ser enviado, el usuario presiona este botón "enviar" y todo se envía al servidor para su procesamiento. <input type="submit" value="Send Form" />
Select	<select>	Pide al usuario que elija uno o más elementos de una lista de opciones. <select name="color" /> <option value="red">Red </option> <option value="yellow">Yellow</option> <select />

Atributos del Input o Entrada

Al igual que cualquier otra etiqueta HTML, las etiquetas de input tienen varios atributos que se pueden configurar para describir su comportamiento de manera más específica:

VALUE: Puedes especificar un valor predeterminado que debe tener el input antes de que el usuario la complete:

1<input type="text" name="firstname" value="John">

READ ONLY: Determina si el usuario puede cambiar el valor del input.

1<input type="text" name="firstname" value="John" readonly>

DISABLED: Determina si el input será gris y de solo lectura. Los inputs deshabilitados no se envían al servidor: actúan como si nunca hubieran existido.

1<input type="text" name="firstname" value="John" disabled>

SIZE: El número máximo de caracteres permitidos para ese input.

1<input type="text" name="firstname" value="John" size="40">

Las formas METHOD y ACTION

Los dos atributos más importantes que deben establecerse en la etiqueta <form> son la action y el method:

Action: Es la URL donde se enviarán los datos recopilados del formulario.

Method: Puede ser "POST" o "GET". Las principales diferencias serán: (1) Cómo se enviarán los datos recopilados a la página de destino una vez que lleguemos allí y (2) Cómo se envían los datos del formulario al servidor.

Usando el método GET	Usando el método POST
Todos los datos del formulario están codificados en la URL. Esto significa que adjuntará toda la información del formulario al final de la URL de destino, por ejemplo: http://www.mydestinationurl.com?input_name1=value1&input_name2&value2….	Los datos se ocultarán al usuario final. La URL permanecerá como se definió en el atributo "acción" y solo un desarrollador podrá solicitar la información del formulario.

☝️ Si vas a utilizar el <input type =" file "> el único método admitido es POST.