Formulario en HTML

Expliquemos antes que son los formularios lo definiré son un conjunto de elementos que permiten la entrada de información un ejemplo muy básico es los comentarios de esta web que de paso si dejas un comentario estarías usando un formulario 

Quiero que nos formulemos una pregunta ¿Qué contienen los formularios?

La respuesta  es botones pero son todos iguales pues no, tenemos algunos para ingresar texto, contraseñas, números, casillas de chequeo por ejemplo para  aceptar las condiciones entre otras más y que tal si te digo que todas estas funcionalidades están en el mismo elemento  input pero no nos liemos que no es nada complicado veamos.

El elemento input:

Empecemos a desglosar toda la información habíamos hablado antes  que el elemento input iba a ser de varios tipos como definimos esto entonces pues fácil veamos.

Veamos sus valores para ir comprendiendo esto un poco.

<input type="el tipo de variable a introducir" name="el nombre del elemento"  value="el valor" width=# height=#>

type:este atributo digamos que es el que nos va a decir que va a ser el elemento input si va a contener letras  si va a ser un boton de enviar etc.

Los valores que puede tomar el atributo input y su respectivo ejemplo en la web.

type="text" 

type="password"

type="radio"

 

type="checkbox"

type="file"

type="reset"

Para este botón no hay ejemplo porque no estamos en un formulario ya lo explicaré más adelante.

type="submit" 

A este elemento le he agregado el atributo value para que tuviera un mejor enfoque al igual que el siguiente que veremos 

type="button"

type="hidden"

Para este botón no hay ejemplo es invisible.

Expliquemos cada uno.

 text:Va a crear una caja de textos donde obviamente se puede introducir el texto números y otros caracteres .Son innumerables de seguro las veces que los hemos visto en la web las podemos encontrar cuando nos piden  poner un Nombre Apellidos Dirreccion etc. 

password:Digamos que es igual a la anterior nos va a permitir escribir textos,números y otros caracteres  ya que esta no codifica la información sino es más bien visual porque si  el usuario accede a nuestro sitio y él está en un lugar público donde haya muchas personas no querrá que vean su clave por eso los caracteres se ocultan con asteriscos, en cuanto a un ejemplo está más que claro en toda web que nos pidan introducir alguna clave.

radio:es una selección se usa por lo general para escoger una de todas las que hay un ejemplo de estos botones de selección se muestra cuando nos preguntan el sexo puede ser masculino o femenino no podemos elegir los dos otro ejemplo tu música favorita es decir si quieres que los usuarios solo escojan una opción entre varias.

checkbox:las cajas de selección podemos escoger varios aunque más bien  se usa para escoger una sola opción que es el caso cuando nos preguntan si aceptamos las condiciones y nosotros decimos que si sin saber a qué le dimos aceptar si eres una de esas personas dímelo en los comentarios.

Nota:para checkbox y radio hay un atributo que no admite valor que es checked y lo que hace es que de forma predeterminada cuando carguemos el navegador estos valores ya estén chequeados es decir que estén aceptados por así decirlo.

file:sirve para enviar archivos ejemplo imágenes videos u otro tipo un ejemplo en la web por ejemplo subimos un archivo por lo general lo hacemos a través de este tipo de botón. 

Los botones de tipo archivo poseen un atributo llamado multiple el cual no posee valor que permite enviar varios archivos al servidor a la vez

reset:aunque ya casi no se usa es un botón que nos permitirá restablecer todos los datos que hemos ingresado en nuestro formulario. 

submit:este botón enviara toda la información del formulario digamos que es el típico botón que dice enviar.

button:este es un botón que si no aprendemos JavaScript no nos será de ninguna utilidad ya que este botón no viene con ningún tipo de función predefinida por lo que no lograremos nada con solo HTML.

hidden:he dejado este último valor no porque no sea importante sino porque por lo menos yo no lo uso para mis desarrollos, en cuanto a los usos que yo le he dado es para limitar la entrada de archivos con un tamaño mayor al que yo proponga pero esto digamos que esta ya más enfocado en el lenguaje de servidor PHP.

Sigamos definiendo algunas cosas.

value:este atributo  va a  contener el valor  el texto que le va ser mostrado al usuario  se pude usar en el input de tipo submit por ejemplo y así ayudar al usuario de forma visual que es un botón de enviar.

<input type="submit" value="enviar">

width:define la anchura que tendrá el elemento en px,cm,% entre otras.

height:define la altura del elemento en px,cm,% entre otra.

Comento que pasa con name.

El atributo name sirve para  agrupar los botones de tipo radio para poder seleccionar uno definiéndole a los dos un mismo valor de name.

Ejemplo

<input type="radio" name="musica">

Rap

<input type="radio" name="musica">

Rock

Resultado.

Rap Rock

También se usa en algunos  elementos del formulario  para poder acceder a la información que  sera procesado por un lenguaje del servidor que usemos  esta información solo se limita a HTML por lo que caer ahí seria pasar a un lenguaje mucho más complejo.

Los elementos select y option:

Va a crear un cuadro de selecciones donde nosotros los programadores le daremos a escoger al usuario las opciones que nosotros definamos mirad su estructura.

<select name="nombre">

<option>

Opcion1

<option>

Opcion2

<option>

Opcion3

<option>

Opcion4

</select>

Va a crear un menú despegable con una lista de opciones donde el usuario escogerá una sola opción en este caso la Opcion1 u Opcion2 y así sucesivamente como se ve en el ejemplo a continuación.

Opcion1 Opcion2 Opcion3 Opcion4

Nota el elemento option no se escribe

<option>

</option>

porque los navegadores interpretan que

<option>

contiene una etiqueta de cierre asi que no es obligatoriamente necesario que lo definamos podemos ahorrarnos un poco de tiempo al escribir. 

Al igual que radio y checkbox tenemos un atributo para tener una opción predeterminada esta es selected y quedaría asi.

<select name="nombre">

<option >

Opcion1

<option>

Opcion2

<option>

Opcion3

<option selected>

Opcion4

</select>

Ahora   la Opcion4 ya estara seleccionada una vez que abra la pagina.

Opcion1 Opcion2 Opcion3 Opcion4

Elemento textarea:

El elemento textarea tiene un apartado distinto a los inputs por la sencilla razón de que no es uno es un elemento totalmente aparte pese a que su uso es parecido a los input de tipo texto posee características distintas que ya veremos.

Nos permite ingresar varias líneas a diferencia de los input de tipo texto su diseño se asemeja a un editor de texto sencillo en cuanto a los usos se ve en comentarios descripciones etc.

Ahora veamos algunos atributos 

rows: va a ser número de líneas de la caja de texto.

cols: el número de caracteres visibles de cada línea. 

Observemos como se veria textarea con atributos .

<textarea rows=#  cols=#>

</textarea>

 

En donde dice # ponemos el valor que deseemos.

Aquí tenéis como se ve el textarea en accion con rows=7 y cols=40.

El elemento form:

Los formularios están delimitados por las etiquetas

<form>

para abrir y

</form>

para cerrar  y dentro de estas dos etiquetas colocaremos todos los inputs y textarea veamos 

<form action="url del archivo que procesara el formulario" method="metodo">

<input   type="tipo de entrada" value="valor">

<select name="nombre">

<option>

Opcion1

<option>

Opcion2

<option>

Opcion3

<option>

Opcion4

</select>

<textarea>

</textarea>

</form>

Los formularios están compuestos por esos tipos de entradas un formulario llamémoslo así será el que agrupe a todos esos tipos de datos por lo que veamos un ejemplo y los atributos que este posee 

Nota importante :los inputs si no están colocados dentro de las etiquetas

<form>

y

</form>

no se podrá enviar información posteriormente al servidor ya verás porque 

action:aquí se encontrara la url del archivo que procesara el formulario que enviaremos digamos que aquí es donde se enviaran los datos del formulario y este archivo los captara ( por lo general es un archivo PHP lenguaje del lado del servidor que procesa los datos del formulario y les da un uso especificado por el programador) 

method:el método es la forma en que se pasaran esos datos puede tomar dos valores el atributo method veamos

GET:envía los datos a través de la URL por lo general no se usa para temas seguros como puede ser enviar la contraseña y otros datos de privacidad 

POST:este método es todo lo contrario del anterior no se envía a través de la URL y tiene una mayor seguridad digamos 

Aquí les voy a dejar un formulario básico que he creado en HTML para que veáis la capacidad de los formularios digo básico ya que no le voy a establecer estilos ni usare JavaScript veamos

En este link podras ver el ejemplo que he creado de un formulario y el código  

Bueno esa es la estructura de los formularios si ves que te ha quedado algo cutre y ves sitios webs con una gran complejidad visual no te  preocupes luego podréis agregar un estilo para que nuestros formularios sean muchos más visuales y atractivos al usuario esto fue la estructura para crear formularios. Recuerda que debemos colocar todos los input  textarea y option  para decir que están en un formulario dentro de las etiquetas form

Espero que les haya gustado si teneis alguna duda házmelo saber en los comentarios nos vemos en otra entrada Chao