Adición de “requerido” de texto a un formulario HTML a través de CSS

Question

Tengo una <form> que tiene este aspecto:

<form> 
    <input type="text" name="name" id="name" /><span class="required"></span> 
</form> 

Lo que quiero hacer es mostrar un poco de texto, como * o Required en el elemento <span>, en lugar de "codificación duro" el texto para cada uno de esos lugar que necesitan que el texto así que la forma es como la siguiente:

[input box] Required 

Busqué en google y encontré que podría hacerse mediante un estilo CSS usando content tales como:

.required:before 
{ 
    content: "aaaa" 
} 

Pero, debo utilizar esta técnica (¿es compatible con todos los navegadores importantes, por ejemplo) o hay una manera más preferida de hacer este tipo de cosas?

Gracias

ACTUALIZACIÓN Ps. No quiero usar JavaScript para esto, simplemente CSS.

Answer 1

Acepto que agregar contenido mediante CSS no es correcto en la mayoría de los casos. Sin embargo, destacando visualmente un campo obligatorio, me parece totalmente correcto hacerlo de esta manera.

content no es lo suficientemente compatible (IE no lo admite en absoluto IIRC).

Lo que podría hacer es tener el lapso "requerido" contener una imagen de fondo que contiene el texto "requerido" o un asterisco. Usar texto gráfico tiene algunos inconvenientes, pero ninguno que una solución basada en jQuery tampoco tendría.

Answer 2

Creo que debería estar mirando JavaScript. Agregar contenido a etiquetas con clases/ID específicas es una cosa para la que se usa JavaScript. Hay muchas bibliotecas para acelerar el tiempo de desarrollo: jQuery, Prototype, Dojo y MooTools.

Answer 3

puede usar jQuery para esto.

jQuery es una librería javascript:

escritura en la cabecera de este código

$(document).ready(function(){ 
    $(span[class=required]).innerText='<sometext>'; 
}); 

pero u debe descargar este plugin. pero también puede usar javascript

Answer 4

¡Definitivamente no debería usar CSS para hacer eso! ¡Dios no! : p

Como dije anteriormente use javascript - pero si quiere evitar eso, entonces tiene que usar Server Side Scripting - Así que aprenda algo de PHP.

Answer 5

Comprobar esto: Content

aslo comprobar esta compatibilidad

No utilice

Siento que no hay que utilizar la declaración de contenido en absoluto. Agrega contenido a la página y CSS está destinado a agregar presentaciones a la página y no a contenido. Por lo tanto, creo que debería usar JavaScript si desea generar contenido dinámicamente. CSS es la herramienta incorrecta para este trabajo.

Answer 6

Como otros han notado que CSS puede hacer esto, pero no es totalmente compatible y tampoco es la forma correcta de abordar este problema. Si es absolutamente crucial que aparezca el texto "requerido", entonces debe agregarlo en el HTML. Javascript es una solución adecuada hasta cierto punto, pero solo si no puede editar el código fuente. Mientras que el contenido se puede generar usando JS, obviamente solo aparecerá a las personas con JavaScript habilitado, y se agrega a la complejidad del mantenimiento. Cuando alguien lokos en la página dentro de cinco años para hacer un cambio de código, inicialmente se preguntará de dónde viene el texto "requerido".

Una otra opción que sería bastante rápido y bastante ordenada sería dar el lapso de una imagen de fondo de un asterisco e incluir una clave por encima de la forma:

* required field 

Answer 7

que realmente debería añadir este texto en el HTML. Las otras soluciones no son accesibles: los usuarios no videntes (por ejemplo) no sabrán que el campo es obligatorio.