Un elemento clave de la Web 2.0 es la oportunidad que ofrece al usuario de dar información al servidor. Los formularios nos permiten que los transeúntes de nuestras webs dejen su huella. Pero ATENCIÓN, por ahora los formularios que vamos a aprender NO serán útiles. ¿Por qué? Lo primero será aprender cómo se construien con HTML y más tarde cómo se almacena y manipula la información recogida a través de ellos.
Comprender bien cómo funcionan las etiquetas y atributos necesarios para
crear formularios con HTML es algo complejo. La red está llena de
descripciones muy técnicas (¡y correctas!) pero por desgracia difíciles
de entender sin leer y releer (y agotar la paciencia). Mi intención es
hacer una explicación amistosa que ayude a comprender los rasgos
principales para que luego puedas consultar cualquier texto más técnico
sin problemas.
El elemento principal: <form></form>
La etiqueta principal es la etiqueta "form". Todo el texto HTML que pertenezca al formulario debe ir entre las etiquetas <form> y </form>, de la misma manera que todo el código HTML que forma la web debe ir entre las etiquetas <html> y </html>. Sin estas etiquetas no habrá formulario.
Por cierto, este elemento no da ningún resultado visual, es tan solo una orden necesaria para el navegador.
Atributos para el elemento "form"
- action="dirección" en él debemos dejar clara la dirección donde debemos enviar la información del formulario. Debes poner OBLIGATORIAMENTE este atributo, porque si no todo lo que haya rellenado el usuario no irá a ninguna parte. Pero tranquilo, no hablaremos más de ésto hasta que sea el momento de enviar información a sistemas de datos u otros lugares.
- method="get/post" aquí debemos aclarar si queremos mandar la información con el métedo GET (para que toda la información se publique en la URL) o POST (donde la información solo se pasará por privado). Es importante conocer la diferencia entre estas dos opciones, pues GET transformará los resultados en públicos mientras que POST los hace privados, así como con GET hay límite de carácteres y con POST no. Si no ponemos nada será GET por defecto. Recomiendo escribirlo igualmente (facilita la información para el desarrollador a la hora de arreglar o consultar cualquier cosa).
- accept-charset="codificación de caracteres" sirve para definir qué juego de caracteres queremos usar. Es raro que alguna vez vayas a utilizar este atributo (a no ser que necesites hacer páginas para rusos, chinos, árabes, etc...). Si no lo pones será por defecto el UTF-8 o ISO-8859-1 (caracteres latinos).
- enctype="tipo de codificación" por defecto es "application/x-www-form-urlencoded" nos permite escoger nosotros el tipo de codificación que queramos usar para enviar la información. En el valor ya nombrado la codificación transforma los espacios en "+" y los caracteres especiales con su referencia de caracteres. Los otros dos valores del atributo son "multipart/form-data" (para enviar archivos) y "text/plain" (para no codificar los caracteres especiales). No voy a entrar en detalles porque por ahora no vamos a usar este atributo un tanto complejo (tan solo quería que conocieras la existencia).
Elementos visibles: <input />
Nos sirve para definir la gran mayoria de controles típicos de los formularios. Este elemento no tiene etiqueta de cierre, y se define el tipo de control con los atributos que se escriban.
Lo primero que debes saber es que todos los elementos tipo "input" deberán contener el atributo name="nombre". Allí debes escoger el nombre de ese control. Por ejemplo: si vamos a crear un cuadro de texto para que el usuario ponga su correo electrónico podríamos crear el elemento con el atributo name="correo" y así cuando llegue la información a su destino quedará clasificada de la siguiente manera:
correo=pepito@ejemplo.com
Si todos los elementos "input" tienen su atributo "name" nos aseguraremos de que luego los programas encargados de reconocer la información puedan hacerlo de una manera bien ordenada. ¿Queda claro?
Una vez dicho ésto el siguiente paso es determinar qué tipo de control será con el atributo type="tipo". Veamos una lista de diferentes tipos útiles.
type="text"
Por defecto los elementos "input" son del tipo "text". Recomiendo igualmente definir el tipo siempre para una mayor comprension del desarrollador. Este controlador es un rectangulo donde el usuario podrá escribir un texto. Los atributos combinables con este tipo de control son size="número" para elegir el tamaño (no lo uses, recuerda que HTML es para la estructura del contenido, deja todo lo relacionado con el diseño y la estética para otros lenguajes) y value="valor" que da un valor predeterminado (un texto).
type="checkbox"
Estas casillas de verificación sirven para seleccionar una, dos, tres... todas o ninguna de las opciones. Los atributos combinables con este tipo de control son checked (no necesita valor, es booleano) que permite dejar la caja marcada de manera predeterminada y value="valor" que es imprescindible e indica qué valor debe enviar si la casilla está activada. En este tipo de control la etiqueta name="nombre" debe contener el mismo nombre para todo el conjunto de casillas de verificación.
type="radio"
La característica principal que tiene la casilla de opción es que solo te permite escoger una única casilla entre todo el conjunto. En este tipo de control la etiqueta name="nombre" debe contener el mismo
nombre para todo el conjunto de casillas de opición. Los atributos convinables con este tipo de control son checked (no necesita valor, es booleano) que permite dejar la casilla marcada de manera predeterminada y value="valor" que es imprescindible e indica el valor que debe enviar según la casilla que esté activada.
type="file"
Este botón nos servirá para enviar archivos adjuntos del ordenador usuario con el formurlario. Se supone que con el atributo accept="image/gif" podemos especificar el tipo de archivo que se pueda subir, pero ni funciona en todos los navegadores, ni impide que la opción "Todos los archivos" que sale en la ventana de selección de archivos aparezca. Recuerda que para que sea posible debes tener el atributo enctype="multipart/form-data" en el elemento <form></form>.
type="password"
En este caso el texto que se escriva no se podrá ver, sino que en su lugar veremos puntos o asteriscos. Muy útil para información secreta como la contraseña de acceso. Las opciones son las mismas que con type="text".
type="hidden"
Este tipo de control no es visible para el usuario y sirve para enviar información extra (como podría ser el tiempo que tarda el usuario en completar el formulario). Normalment se implementa con JavaScript. En este caso solo son compatibles los atributos name="nombre" y value="valor".
Botones
Los botones son muy importantes para el formulario, aunque cada vez se usan menos los predeterminados del navegador (por una cuestión de estética). El botón type="button" sirve para crear un botón que debe ser implementado con otro lenguaje como JavaScript (aquí no trataremos este tema). Con type="reset" creas un botón para borrar toda la información del formulario y que el usuario pueda empezar de nuevo. Con type="submit" se crea el botón necesario para enviar la información del formulario una vez completo. Con type="image" se crea un botón con la forma de una imagen (no se recomienda usar HTML para esilo y diseño, así que este tipo de elementos debe ser creado con CSS) y se puede convinar con los atributos src="direccion" para escoger la imagen y alt="texto" para incluir el texto alternativo.
Todos los botones se combinan con el atributo value="nombre" que incluyen el texto del botón (excepto los de tipo imagen).
Otros atributos para <input />
Los siguientes atributos son compatibles con los explicados anteriormente y sus efectos son iguales para todos los tipos. Es probable que no vayas a usarlos, pero es importante que los conozcas por si algún día los necesitas.disabled="disabled"
Sirve para inhabilitar el elemento. A simple vista es un poco inútil. El valor del atributo debe ser el mismo nombre del atributo (tal y como sale en el ejemplo de entrada).
readonly="readonly"
Es idéntico al atributo anterior, y también debe tener como valor el mismo nombre del atributo, pero en este caso el texto que pueda llegar a salir escrito como predeterminado se puede seleccionar para copiar, pero no borrar ni modificar.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)