HTML parte 2

Atributos
¿Qué es un atributo?
Cualquier etiqueta HTML puede contener uno o más atributos, separados por espacios, que
permiten especificar la etiqueta. El código fuente tiene el siguiente aspecto:

El valor de cada atributo es asignado mediante el signo igual "=" (salvo en el caso de los
atributos booleanos, que no requieren asignación). Cada atributo puede contener más de un
valor, separados por un espacio, por lo que los valores no pueden contener espacios
internos.
Además, el valor de un atributo debe estar entre comillas (atributo="valor1 valor2") aunque
esto puede omitirse en el caso de que el atributo contenga solo un valor (atributo=valor1).

Existen una serie de atributos comunes a todas las etiquetas y algunas etiquetas tienen
unos atributos específicos.

En esta lección comentamos algunos de los atributos principales:

●​ Atributo class​
El atributo class permite definir clases de elementos. Dada su importancia, se
explica en la lección sobre Clases.​
Las hojas de estilo pueden hacer referencia a los elementos con atributo class, como
se comentará en la lección sobre Selectores.
●​ Atributo id​
El atributo id permite identificar de forma unívoca un elemento en un documento. Por
ello, en una página web no puede haber dos elementos con el mismo valor en el
atributo id. Además, un elemento sólo puede tener un atributo id, es decir, el atributo
id no puede contener espacios en blanco.​
En HTML 5 el atributo id puede empezar y contener cualquier carácter (salvo
espacios en blanco). Además, todos los elementos pueden tener el atributo id.
●​ Atributo style​
El atributo style permite definir propiedades de estilo a un elemento determinado.

Se desaconseja el uso de este atributo, puesto que uno de los principios del diseño de
páginas web mediante hojas de estilo es precisamente concentrar todo lo relacionado con el
formato en las hojas de estilo.
 Clases
Asignar clases a elementos: el atributo class
Dado que el número de etiquetas del HTML es reducido, es probable que en una página
web se quiera dar un formato distinto a elementos con la misma etiqueta. Se puede sortear
esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página
web.

Las clases se asignan con el atributo class. El valor del atributo class (el nombre de
la clase) sólo pueden contener caracteres ingleses, números, guiones y subrayados,
aunque el primer carácter no puede ser ni un número ni un guión.

Cuando se define una clase de elemento, la regla se aplica únicamente a los

elementos de ese tipo que tienen esa clase. En el ejemplo siguiente, en la hoja de
estilo está definida la clase aviso para la etiqueta <span> (trabajaremos sobre reglas
de estilo en las lecciones de la semana siguiente). Esa regla no se aplica a ningún
elemento, puesto que en la página web la etiqueta <span> no tiene atributo class y la
clase aviso está asignada a una etiqueta diferente (<p>).

Los navegadores distinguen los nombres de clases escritos en mayúsculas o

minúsculas. En estos apuntes se recomienda utilizar únicamente minúsculas.
A un elemento con clase se le aplica tanto la regla de la clase como la regla de la
etiqueta general (esta es una característica del mecanismo de cascada de las hojas
de estilo).

En el ejemplo siguiente, en la hoja de estilo se ha escrito una regla para párrafos en

general y otra regla para los párrafos de clase aviso. El elemento con clase hereda las
propiedades de los elementos sin clase.

Combinar varias clases simultáneamente

Un elemento puede tener asignado varias clases. Para asignar varias clases a un
elemento, hay que escribir en el atributo class los nombres de todas las clases que se
quieren aplicar, separados por espacios.
El orden en que se escriban los nombres de las clases en el atributo class no es
importante, aunque sí que es importante el orden de las reglas en la hoja de estilo.
Como muestran los dos ejemplos siguientes, si la misma propiedad está definida en
varias clases y un elemento tiene asignadas varias clases, se aplica la definición de la
clase que aparece después en la hoja de estilo (esta es una característica del
mecanismo de cascada de las hojas de estilo).

Se puede escribir un selector que se aplique únicamente a los elementos que tienen
definidas varias clases.
Asignar la misma clase a distintos elementos
Se pueden asignar la misma clase a elementos distintos. Definiendo la clase para
cada elemento, en cuyo caso cada elemento puede tener propiedades distintas
aunque el nombre de la clase sea el mismo:

Definiendo una clase universal, en cuyo caso todos los elementos tienen las mismas
propiedades:
 Formularios
El formulario: <form>
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación,
botones radio, etc.) que permiten al usuario introducir datos y enviarlos al servidor web para
su procesamiento.

La etiqueta que delimita un formulario es la etiqueta <form> ...</form>.

Los atributos más importantes de la etiqueta <form> son:

action: contiene el nombre del agente que procesará los datos remitidos al servidor (por
ejemplo, un script de PHP).​
*Si querés saber más sobre servidores e infraestructura revisá el curso Preparatorio de
Fase 2.
method: define la manera de enviar los datos al servidor. Los valores posibles son:
●​ get: los valores enviados se añaden a la dirección indicada en el atributo
action.
●​ post: los valores se envían de forma separada.
Si el atributo method no está establecido, el formulario se comporta cómo si el valor fuera
get.
¿Quieres saber sobre qué tratan get y post?, entra aquí
(opens in a new tab)

Los etiquetas que crean los controles en los formularios son <input>, <button>,
<select>, <optgroup>, <option> y <textarea>.
Además, se pueden estructurar los controles con las etiquetas <fieldset> y <legend>.
Por último, la etiqueta <label> permite mejorar la accesibilidad de los controles.

Atributos
​ Atributo type​
El atributo type de la etiqueta <input /> indica el tipo de control de que se trata.
​
​ Atributo name​
El atributo name identifica al control. Todos los controles de un formulario deben
tener el atributo name porque, en general, sólo se envían los controles que lo tienen
(aunque hay excepciones, como los controles de tipo imagen o los botones, que no
los necesitan).
​ ​
En general, los atributos name no se deben repetir, porque no se recibiría toda la
información al enviarla. La única excepción es el botón radio, como se explica en el
apartado correspondiente.
​
​ Atributo value​
El atributo value permite establecer el valor inicial de un control, aunque cada control
lo utiliza de una forma ligeramente distinta y algunos controles no lo admiten (área
de texto, archivo o imagen).
​ ​
En algunos casos (botones) el valor se muestra al usuario y el mismo no puede
modificarlo. En otros casos (cajas de texto, contraseña) el valor se muestra en la
página y el usuario puede modificarlo. En otros casos (casillas de verificación,
botones radio, opciones de menú, oculto) el valor no se muestra en la página y el
usuario no puede modificarlo.​
 En algunos casos (botones, oculto, botones radio) el atributo value es necesario. En
otros casos (casilla de verificación, opciones de menú) es conveniente. En otros
casos (cajas de texto, contraseña, imagen) puede omitirse. En el caso del selector
de archivo, los navegadores no lo admiten por motivos de seguridad.

​ Atributo required​
El atributo required permite indicar qué controles es obligatorio rellenar para enviar el
formulario.

Si alguna de las opciones de un botón radio tiene establecido el atributo required, el

control es obligatorio.

Atributo placeholder
El atributo placeholder permite mostrar en los controles de texto un texto que desaparece al
escribir en el control.

Atributo size
El atributo size permite establecer la longitud de los controles de texto (text, password,
search, etc.). Por omisión, las cajas suelen tener 20 caracteres de longitud.
Atributos maxlength y minlength
Los atributos maxlength y minlength permiten establecer la longitud máxima y mínima,
respectivamente, que puede escribir el usuario en un control de texto (text, password,
search, etc.).

Atributo disabled
El atributo disabled permite deshabilitar el control. Una vez deshabilitado, el control ni
siquiera puede realizar el foco.

Controles: <input> y otros

Los controles son los elementos que permiten al usuario introducir información. La mayoría
de controles se obtienen mediante mediante la etiqueta vacía <input>.
Botones: <input> y <button>
Los botones se crean mediante la etiqueta <input> o mediante la etiqueta <button>. La
diferencia entre ellos es que <input> sólo puede contener texto, mientras que <button>
permite incluir elementos html como imágenes.
El contenido del botón <input> se define mediante el atributo value, por lo que sólo puede
contener texto.

Caja de texto de contraseña: <input type="password">

Las cajas de texto de una sola línea específicas para contraseñas se crean mediante
una etiqueta <input> cuyo atributo type tiene el valor password.
Al escribir en una caja de contraseña, en vez de letras aparecen puntos gruesos. Es
importante señalar que estas cajas no proporcionan ninguna seguridad en la
transmisión, simplemente ocultan al usuario lo que este escribe.
Número: <input type="number">
Las cajas de texto de una sola línea específicas para números se crean mediante una
etiqueta <input> cuyo atributo type tiene el valor number.
En principio, los valores admitidos por el control son números enteros, aunque el
atributo step permite aceptar números decimales. Los navegadores alertan al usuario
cuando no ha escrito un valor correcto, como mínimo al enviar el formulario.
●​ El atributo min establece un valor mínimo en la respuesta.
●​ El atributo max establece un valor máximo en la respuesta.
●​ El atributo step establece la cantidad, entera o decimal, en la que
aumenta o disminuye el valor:

Casilla de verificación: <input type="checkbox">

Las casillas de verificación se crean mediante una etiqueta <input> cuyo atributo type
tiene el valor checkbox.

Botón radio: <input type="radio">

Los botones radio se crean mediante una etiqueta <input> cuyo atributo type tiene el
valor radio.

Lo botones radio que tienen el mismo atributo name forman un grupo, es decir, que si
se marca uno de ellos se desmarca automáticamente el resto.