7

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 some text, such as * or Required in the <span> element, instead of "hard coding" the text for every such place I need the text so the form looks something like this:

[input box] Required

I googled around and found that it could be done by a CSS style using content such as:

.required:before
{
  content: "aaaa"
}

But, should I be using this technique (is it supported in every major browser for example) or is there a more preferred way to do this sort of thing?

Thanks

UPDATE Ps. I don't want to use JavaScript for this, just plain CSS.

Improve this question

7 Answers 7

Reset to default
6

Check this : Content

aslo check this compatiblity alt text

Don't use

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

microsoft strikes again... :(
But if CSS is meant for presentation only, what's the reason that CSS has the content attribute? I googled to W3C (w3.org/TR/2009/CR-CSS2-20090908/generate.html#propdef-content) and it says: "Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)." So that means it is really "presentation" and not adding "content" to the page, right?
I don't think I buy into this argument that it shouldn't be used because it adds "content" to the page. Adding a little "required" blurb is no more content than a background image, or icon, or informative colors that CSS already conveys. It shouldn't be used to insert paragraphs, but for something like this, I think it's perfectly semantically suitable. That said... IE doesn't support it very well. What I would do is use the darn tag, then us JS to fix it only in the broken browsers.
@Mark: “Adding a little "required" blurb is no more content than a background image, or icon, or informative colors that CSS already conveys.” If CSS is the only way a user is being informed that the field is required, then it’s content, and shouldn’t be in the CSS.
@Paul: Maybe. But it's still not mission-critical. Presumably you have some kind of validation on the form. It's all just sprinkles.
|
3

I agree that adding content using CSS is not right in most cases. However, visually highlighting a required field I find totally okay to do this way.

content is not supported widely enough (IE doesn't support it at all IIRC).

What you could do is have the "required" span contain a background image containing the "required" text or an asterisk. Using graphical text has some downsides, but none that a jQuery based solution wouldn't have either.

Improve this answer

5 Comments

Pls see my comment @Pranay Rana above as well. If I use the "background-image" attribute, isn't it the same as the "content" attribute, with the only difference being that in case of "content" I add a string and with "background-image" I add a picture? Neither is "content", but both are adding some visually-presented "data", right?
@Zabba strictly speaking, yes. It is both not in sync with the philosophy of separating content and presentation. But if this works for you, though, taking into account all the downsides (graphical text is not readable in Screenreaders, doesn't get printed etc.) I tend to say it doesn't matter.
@Zabba: The difference is that background-image is widely supported.
Accepted; and I think @Mark in the comment of @Pranay Rana has a very good point too. In all, i think it's best to go with @Pekka's solution to use the CSS content attribute and then use JavaScript for the poor IE users :)
Adding a word to signify the type of something should not be considered content. It gives no more information than putting the background red, if that happens to be your convention. It's a stylistic choice, even if it happens to be letters. It belongs in css.
2

Definitely shouldn't be using CSS to do that! God no! :p

As said above use javascript - but if you want to avoid that then you have to use Server Side Scripting - So get learning some PHP.

Improve this answer

2 Comments

I disagree in this specific case: Starting to use a server side language to build a form is much more kludgy than a bit of CSS to render, say, an asterisk. In general, though, you are right.
no, fair enough - i did say to use javascript, but the work around is server side scripting.
2

u can use jQuery for this thing.

jQuery is a javascript library:

write in header this code

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

but u must download this plugin. but u can use javascript too

Improve this answer

2 Comments

This is a perfectly fine solution, even with a code example.: +1. Consider using "you" instead of "u" though, it will make your writing style look more mature
Did not work for me (syntax error). One way I could get it to work was: $(document).ready(function(){ $('span.required').text('*'); });
2

As others have noted CSS can do this but it is not fully supported and it's also not the right way to approach this problem. If it's absolutely crucial for the "required" text to appear, then you must add it in the HTML. Javascript is a suitable solution to some extent but only if you can't edit the source code. Whilst content can be generated using JS, it's obviously only going to appear to people with JavaScript enabled, and it adds to the complexity of maintenance. When someone lokos at the page in five years' time to make a code change, they are initially going to wonder where the "required" text comes from.

One other option which would be fairly quick and quite neat would be to give the span a background image of an asterisk and include a key above the form:

* required field
Improve this answer

1 Comment

I like the part "When someone looks at the page in five years' time to make a code change" - thanks, didn't think of that angle.
1

I think you should be looking at JavaScript. Adding content to tags with specific classes/ID is one thing JavaScript is used for. There are many libraries to speed up development time - jQuery, Prototype, Dojo and MooTools.

Improve this answer

2 Comments

Thanks Extrakun, I should have mentioned I wanted to avoid JavaScript for this. Updated the question.
I don't think there's any other client-side solution besides JavaScript. You may then want to look at server-side programming which allows you to use templates and some simple programming to duplicate content.
1

You really should add this text in the HTML. The other solutions aren’t accessible — non-sighted users (for example) wouldn’t be aware that the field is required.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.