HTML conceptos avanzados: Formularios parte 1

Segun la W3C un formulario es un documento que incluye:

• Contenido normal
• Código
• Elementos especiales llamdos controles
• Rótulos para los controles

Los formularios se utilizan para que los usuarios envíen información al servidor.

Ejemplos:

• Formularios de registro
• Acceso a sitios web
•  Comentarios en redes sociales

Etiquetas de los formularios:

<form></form>  todos los datos que se quieran enviar deben encontrarse entre estas dos etiquetas. Esta etiqueta no tienen representación gráfica.

action

• El único atributo requerido para la etiqueta form. 
• Espera una cadena de texto que especifique una URL o ruta a la acción de destino que procese los datos de la petición.
• Es posible utilizar una ruta absoluto o relativa.

method

• Indica la forma de enviar la información.
• Acepta los valores GET y POST.
• Método por defecto GET.

Métodos de envío.

Es preciso distinguir entre dos tipos de peticiones que un cliente realiza a un servidor: GET y POST.
GET es el método que utilizamos habitualmente al navegar.

GET

• Al utilizarlo los datos son visibles en la URL como parejas nombre=valor
• Limitada, el límite depende del navegador.
• Lo utlilizaremos cuando el resultado sea siempre el mismo o pueda ser guardado como en un formulario de búsqueda.

 POST

• Más seguro al enviar información sensible, como contraseñas, los datos no son visibles.
• No tiene límite en el envío.
• Posibilita la subida de ficheros al servidor.

accept-charset 

• Espera una lista de juegos de caracteres separados por comas.
• Normalmente utiliza UTF-8 y en ocasiones ISO-8859-1 (Latin 1).
• No es muy común, casi nunca se utiliza.

enctype

• Especifica el tipo de codificación. por defecto "aplication/x-www-form-urlencoded" convierte todos lo espacios en símbolos suma.
• "multipart/form-data" se utiliza para subir ficheros mediante el formulario.
• "text/plain" sólo convierte los espacios en símbolos de sumar, pero los caracteres speciales no son convertidos.

<input />  Es de las etiquetas más utilizadas en los formularios. Con ellas podemos definir gran parte de los contenidos típicos de los formularios. 

• Entradas de tipo texto.
• Casillas de verificación.
• Casillas de opción (tipo radio)
• Archivos.
• Contraseñas
• Campos ocultos.
• Botones varios.

No tiene etiqueta de cierre, por lo que es conveniente cerrarla para cumplir con los estándares.

name es un atributo común a todos los campos de un formulario. Espera una cadena de texto que especifica el nombre que recibirá el campo al ser enviado.

ejemplo: <input name="email" /> 

type define en que se convertirá el control, no es obligatorio pero sí muy recomendable. 

• "text", por defecto.
• "checkbox" indica que el campo será una casilla de verificación.
• "radio" casilla de opción (radio).
• "file" muestra un botón que abrirá una ventana para seleccionar un archivo. Dependiendo del navegador también muestra el nombre o la ruta al archivo,
• "password" genera un campo de texto enmascarado.
• "hidden" es un campo oculto. Para incluir información que no rellena el usuario de forma activa como el tiempo que tardado en rellenar el formulario.
• "button" mostrará un botón.
• "submit" dibuja un botón enviar.
• "image" utiliza una imagen con la misma función que un botón del tipo submit. Poco utilizado.
• "reset" utiliza un botón que borrará el formulario.

disabled 

• Desabilita el campo para que no pueda ser utilizado. disabled = "disabled"

 readonly

• Opera de forma parecida a disabled, pero aplicado a un input de tipo "text" sería posible seleccionar el texto y copiarlo.

value 

• Ciertos campos necesitan de un atributo value para completar su funcionalidad.

Ejemplos con <input />

<input type="text" />  Los imput del tipo text son los más comunes. se utilizan por defecto. 

• Pueden limitar el número de caracteres que se insertan. Útil para controlar el tamaño de datos que están limitados en las bases de datos.
• maxlegth es el atributo encargado de ello y el valor es un entero distinto de cero.

 size  

• Se le atribuye un número y es la anchura del campo de texto en caracteres. 
• Está relacionado con el estilo por lo que se desaconseja el uso de este atributo.

value  

• En input de tipo texto nos indican el valor de ese campo por defecto. Ya no se utiliza, habría que borrarlo para poder escribir en su lugar.

<input type="checkbox" /> Insertan casillas de verificación.

name 

• Como las casillas se ordenan en grupo es importante que lleven el mismo nombre de modo que al recibirlas, el servicio de destino sepa que esos valores corresponden al mismo campo.

 checked 

• Toma como valor el texto "checked" indica que la casilla aparece marcada por defecto.

 value

• Indica al formulario que valor debe enviar al formulario si la casilla está activada. Si no se declara el formulario enviará inforamación imposible de procesar. 
  

<input type="radio" /> Insertan casillas de verificación tipo radio. Se diferencia de las casillas de verificación en que sólo es posible seleccionar una de las opciones.

name

• Todos los elementos deben tener el mismo valor del atributo name.

 checked 

• Toma como valor el texto "checked" indica que la casilla aparece marcada por defecto.

 value

•  Se enviará junto con el formulario.

  

<input type="file" /> nos permiten adjuntar archivos al envío del formulario.

accept

• En principo pensado para limitar el tipo de archivo que pueda ser subido, no está implentado por todos los navegadoresy siempre está activa la opción todos los archivos.

<input type="file" accept="image/gif" />

 Recordar que para el envío de archivos es necesaria la etiqueta:

<form enctype="multipart/form/data">
       <input type="file" ... />
<form />

Tipos de botones:

<input type="submit | reset | button | image"  />

submit: envía en formulario
reset: reinicia el formulario.
otro tipo de botones type="button" Para dotar de acciones a este tipo de botones utlizamos eventos de javascript.

• En intrusivo mediante onclick="javascript:function();"
• No intrusivo, mediante el uso de librerías. <script src="myNonIntrusiveLibrary.js"  />  <script>function();</script> no incrustados en el HTML.

value 

• Especifica el texto que aparece en los botones.

CONSEJOS

• Si el formulario no está entre las etiquetas <form> </form> no será enviado, pero sí pueden existir campos fuera de ellas.
• <input type="value" /> Especificar siempre el atributo type.
• <input type="submit" /> Siempre necesitaremos un botón de envío del formulario.
• Separa el contenido de los estilos. size, cols, row para eso está el CSS.

Más etiquetas en el próximo post

Post extraido del video del curso idesweb