Un formulario con etiquetas con estilo
Cómo aplicar estilo a una etiqueta de formulario con CSS. Un elemento de formulario que se utiliza para etiquetar los distintos campos y áreas de entrada en un formulario de página web es el elemento de etiqueta. Se puede diseñar utilizando las reglas de la hoja de estilo en cascada.
Paso 1
Para diseñar los elementos de la etiqueta de la forma en que aparecen en la imagen de la introducción, debe utilizar el elemento de etiqueta con el atributo "para". Además, debe cerrar el elemento de etiqueta antes de agregar el elemento de "entrada" en sí. El HTML para el formulario completo se muestra en la ilustración.
Video del día
Paso 2
Para diseñar los elementos de la etiqueta, hice que las etiquetas se mostraran como elementos de nivel de bloque, que flotaban hacia la izquierda. Luego asigné un ancho a las etiquetas para que todos los campos de entrada estuvieran a una distancia uniforme de las etiquetas. Le asigné un color e hice el texto en negrita. Usé contenido generado para agregar dos puntos (:) después de la etiqueta. (Es posible que los dos puntos no aparezcan en todos los navegadores).
Aquí está el CSS:
etiqueta {color: # B4886B; font-weight: negrita; bloqueo de pantalla; ancho: 150px; flotador izquierdo; } etiqueta: después de {contenido: ":"}
Paso 3
Solo para completar, también le mostraré el CSS utilizado para diseñar el conjunto de campos, ya que los elementos de la etiqueta están encerrados por un conjunto de campos bordeado.
Aquí está ese CSS:
fieldset {border: 1px solid # CCA383; ancho: 400px; fondo: # FFE8EF; relleno: 3px; } leyenda del conjunto de campos {fondo: # CCA383; relleno: 6px; font-weight: negrita; }
Paso 4
Puede hacer muchas otras cosas para diseñar los elementos de la etiqueta. Mi ejemplo es solo una forma de hacerlo.
El formulario HTML
Cosas que necesitará
Un conocimiento práctico de HTML
Un conocimiento práctico de CSS
