How to fill an HTML form with CSS ?

Question

Hello,

I have an HTML form with radio buttons, check boxes, text fields and drop down lists. Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.

I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file). Is this possible ?

I would appreciate an example or any other idea ?

Thanks !

Answer 1

No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.

It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.

Answer 2

Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.

Answer 3

CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.

You can do this two ways:

1. Use a server side language like PHP/ASP.Net to pre-fill this information.
2. Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.

If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.

If this answer doesn't work for you, add more information to your question.

Answer 4

You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.

Here's a sample form:

<form ...>
   <input name="firstName" />
   <input name="lastName" />
</form>

And corresponding jQuery/JavaScript:

$(function () {
  $("input[name=firstName]").val("John");
  $("input[name=lastName]").val("Doe");
});

Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.