Adding “required” text to HTML form via CSS

Question

I have a <form> that looks like this:

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

What I want to do is show the text, for example * or Required in the <span> element, instead of "hard-coding" the text for each such place, I need text to make the form look something like this:

 [input box] Required 

I googled around and found that this can be done using a CSS style using content , for example:

 .required:before { content: "aaaa" } 

But, should I use this technique (for example, is it supported in every major browser) or is there a more preferable way to do such things?

thanks

UPDATE . I do not want to use JavaScript for this, just CSS.

Answer 1

I agree that adding content using CSS is in most cases not correct. However, by visually highlighting the required field, I find it completely suitable for this.

content not widely supported (IE does not support it at all in IIRC).

What you can do is have the “required” range containing the background image containing the “necessary” text or asterisk. Using graphic text has some drawbacks, but none of them will have any jQuery based solution.

Answer 2

Note this: Content

also check this compatibility

Do not use

I feel that we should not use content ads at all. It adds content to the page, and CSS is for adding presentations to the page, not content. Therefore, I believe that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this to work.

Answer 3

u can use jQuery for this thing.

jQuery is a javascript library:

write this code in the header

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

but u should download this plugin. but you can also use javascript

Answer 4

You should definitely not use CSS for this! No, no !: P

As said above, use javascript, but if you want to avoid this, then you need to use server-side scripts. So, learn some PHP.

Answer 5

As others have noted, CSS can do this, but it is not fully supported, and it is also not the right approach to solve this problem. If it is absolutely necessary for the “required” text to appear, you must add it to the HTML. Javascript is a suitable solution to some extent, but only if you cannot edit the source code. Although content can be generated using JS, it will obviously only be displayed to people with JavaScript enabled, and this will add to the complexity of the service. When someone lokos on a page in five years to make changes to the code, they will initially wonder where the "required" text comes from.

Another option, which would be pretty quick and pretty neat, would be to give the gap a background image of an asterisk and include a key above the form:

 * required field 

Answer 6

I think you should look at JavaScript. Adding content to tags with specific classes / identifiers is what JavaScript is used for. There are many libraries that speed up development time - jQuery, Prototype, Dojo, and MooTools.

Answer 7

You really have to add this text in the HTML. Other available solutions - unsuspected users (for example) would not know that this field is necessary.