HTML: Formularios
Vamos a hablar muy brevemente de los formularios, algunos de los
elementos y de sus propiedades:
form: será el elemento padre que anide todos los elementos
HTML que representarán los campos de nuestro formulario,
incluido el botón de enviar.
o action: indica la URL a la que se enviará la petición HTTP
con toda la información del formulario
o method: indica si la petición HTTP será GET o POST
input: permite introducir diferentes tipos de campo de
formulario en base al valor del atributo type. En función del
valor indicado en type dispondremos de unos atributos u otros
(en total hay 30, pero no todos aplican a todos los casos):
o type (obligatorio): este valor puede tener muchos
valores: text, email, checkbox, color, date, file, hidden,
etc. en función del tipo de campo que queramos, los
nombres son bastante auto explicativos.
o id: este atributo es obligatorio si en el elemento label
tiene un atributo for, en tal caso deberá contener un
identificador único en la página.
o name: este atributo es opcional y representa el nombre
asignado al campo cuando se envíe la petición HTTP.
o value: este valor es opcional, pero representa el valor
que se asignará al campo cuando se envíe la petición
HTTP.
Por último, añadir que el elemento input no requiere una
etiqueta de cierre
select: nos permite crear una lista desplegable de opciones,
cada opción estará contenida como hija dentro de un
elemento option.
o id: igual que el elemento input
o name: igual que el campo input option: nos sirve para
"encapsular" cada opción de la lista.
o value: igual que el atributo value del campo input.
textarea: representa un campo que nos permite introducir
textos con saltos de línea incluidos, normalmente se usa cuando
hay que introducir: descripciones, biografías…
o id: igual que el elemento input y select.
o name: igual que el campo input y select.
label: se usa para especificar la etiqueta (o nombre) del campo
del formulario.
o for: debe tener el mismo valor que el atributo id del
campo (input, select o textarea) al que hace referencia la
etiqueta.
1
HTML: Formularios
button: representa un botón y el texto del botón está
representado por su contenido.
o type: define el comportamiento del botón cuando está
activado y puede contener tres valores: submit, reset,
button
Ejemplo de Formulario:
<form action="[Link]" method="GET">
<!-- Etiqueta y campo email -->
<label for="to">Para:</label>
<input id="to" type="email">
<!-- Etiqueta y campo desplegable topic -->
<label for="topic">Temática: </label>
<select id="topic" name="topic">
<option>-- Elige un tema --</option>
<option value="proposal">Propuesta</option>
<option value="report">Reporte</option>
<option value="other">Otro</option>
</select>
<!-- Etiqueta y campo subject -->
<label for="subject">Asunto: </label>
<input id="subject" name="subject" type="text">
<!-- Etiqueta y cuadro de texto cuerpo mensaje -->
<label for="body">Cuerpo:</label>
<textarea id="body" name="body"></textarea>
<!-- Etiqueta y botón enviar -->
<button type="submit">Enviar</button>
</form>
2
HTML: Formularios
Muchos de los elementos poden añadir (opcionalmente) otros
atributos como:
required a un elemento para que el navegador se encargue de
validar que este campo está relleno.
readonly si queremos que sea de sólo lectura.
placeholder si queremos que aparezca un texto de ayuda para
rellenar el campo value para introducir un valor por defecto en
el campo.
Validación
Que el código se muestre en nuestro navegador web como queríamos
no implica necesariamente que lo hayamos escrito bien. En muchas
ocasiones el navegador es capaz de detectar errores humanos y
corregirlos de manera automática para que el usuario vea bien la
página, pero esto no es siempre así. Si queremos asegurarnos de que
nuestra página está correctamente escrita podemos usar el Validador
de HTML del W3C, que además en caso de encontrar errores nos dará
pistas sobre cómo resolverlos.
Si abres el enlace verás que tienes 3 formas de validar código:
Validate URI: que te permite introducir la URL de una página
para comprobar su código. Como nosotros aún no hemos
alojado nuestra página en ningún servidor web no usaremos
esta opción (aún).
Validate by File Upload: que nos permite subir un fichero
HTML
3
HTML: Formularios
Validate by Direct Input: que nos permite introducir el código
dentro de un elemento textarea.
Acuerdos
Antes de terminar me gustaría explicarte algunas de las principales
convenciones o buenas prácticas que deberemos de tener en cuenta
a la hora de escribir código HTML:
Los nombres de los elementos HTML y sus atributos se deben
escribir en minúsculas.
Los valores de los atributos en HTML deben ir entre comillas
dobles:
La indentación se debe hacer con 2 espacios (prácticamente
todos los editores de código permiten configurar este valor).
No introducir espacios antes o después del signo "igual"
4
HTML: Formularios
Usar UTF-8 como encoding.
No cerrar elementos autocontenidos, por ejemplo, usa en lugar
de
Evita el uso de estilos en línea.
Evita el uso de entidades HTML siempre que sea posible (salvo
por ejemplo para < y & ).
Especifica el atributo lang en el elemento html.
Especifica siempre el atributo for cuando añadas un elemento
label.
Internet Explore soporta el uso de una etiqueta de
compatibilidad meta indicando cómo tratar el código, usar
siempre que se pueda:
Nombres de ficheros
Es recomendable seguir las siguientes convenciones:
Establecer los nombres de los ficheros en minúsculas, Windows
no hace distinción entre mayúsculas y minúsculas pero otros
sistemas sí, y esto puede provocar que una ruta funcione en un
sistema operativo, pero no en otro. Por ejemplo, si tenemos un
fichero llamado Logo_HTML5.jpg y una página que hace
referencia a él con logo_html5.jpg, esto funcionará en Windows,
pero en un sistema basado en Unix (Linux o Mac) no funcionará.
Dale un nombre que represente lo que contiene, esto no sólo
por usabilidad sino por posicionamiento (SEO) En lugar de
espacio usa un guión "-".
Nunca uses acentos ni caracteres especiales: ñ, ",", etc.
Extensión
Es recomendable que cada tipo de fichero tenga una extensión:
HTML: ".html"
JPEG: ".jpg"
GIF: ".gif"
5
HTML: Formularios
PNG: ".png"
Estructura de directorios
Conforme crezca tu proyecto agradecerás tener una estructura lógica
que te ayude a organizar todos los ficheros:
Donde:
resources: es un directorio que incluye los elementos que tú has
creado y que contiene tantos directorios como tipos de recursos
(css -> estilos, images -> imágenes, js -> JavaScript).
vendors: para almacenar recursos creados por terceros
Y en el fichero raíz colocar los ficheros HTML que necesites.
Errores frecuentes
Este es un listado de alguno de los errores más frecuentes en HTML:
No poner el encoding UTF-8 hará que algunos caracteres se
muestren de manera extraña
Poner dos identificadores iguales (suele pasar al copiar y pegar
código). Esto nos dará problemas de validación y al intentar
acceder al elemento usando JavaScript
Anidamiento incorrecto, ya sea por no cerrar tags en el orden
correcto como por anidar elementos de bloque en elementos en
línea, por ejemplo: <a href=”#”><h2>Título</h2></a>
Utilizar los elementos <b>o <i> para darle estilo.
Estos son sólo algunos errores frecuentes, pero en ningún libro,
manual, tutorial o curso encontrarás todos los errores que te pueden
suceder, por eso es importante que aprendas a buscar las soluciones
a los problemas que te vayan surgiendo, mis consejos:
Lee atentamente el error
Usa Google para buscar tu error (a ser posible busca en inglés)
Intenta reducir la frase a las palabras clave como el lenguaje, el
número de error, ...
