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 !
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.
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.
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.
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:
Use a server side language like PHP/ASP.Net to pre-fill this information.
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.
Related
I just had a look at html of my twitter page as part of learning HTML. At the end of the page I can see a lot of state as the value of a hidden input tag (the value appears to be in json form).
I see no obvious form associated with this, and it doesn't appear in the html request.
I wonder if anyone might be able to guess how/why these inputs and their values might be used.
</body>
</html>
<input type="hidden" id="init-data" class="json-data" value="
{"scribeMetrics":0,"environment":"production","wtfOptions":
{"dismissable":true,"connections":true,"pc":true,"limit":3,"
disabled":false,"display_location":"wtf-component"}
........ and so on.
If you look at this javascript file, you see that the init-data element is used
var a=$("#init-data").val(),
b=JSON.parse(a),
c=$.makeArray(arguments);
b.moreCSSBundle?using("css!"+b.moreCSSBundle,d):d()}if($("html").hasClass("debug"))
//and so on
If you want to know, why they used a hidden field and not standard javascript variables, you have to ask the guys responsible for this at twitter themselves ;). I see no obvious reason and the minified code doesn't make it easier to understand what's going on.
I'm currently programming a html (php) menu where I want to use tooltips for the buttons.
As I want to use the form to transmit to me which button has been clicked (via method=POST) i don't use but instead .
My problem here is that I'm not sure what the best way is to create those tooltips (especially as I want the text to be dynamic......as I plan to use localization in the
future. Thus using images is out of the question there ).
I know how to use tooltips in combination with , but as indicated I'm not sure
what the best way is to use tooltips in combination with buttons.
Example sourcecode (as a note here I'm using a sessionvariable to see what language
the user has):
<input type='button' value="<?php translate('Messages');?>" class='messages'>
<input type='button' value="<?php translate('Logout');?>" class='logout'>
Tnx for all help there
The HTML5 spec defines a set of global attribute which almost all elements support. This includes the title attributes which in the specification is for storing additional information about the element. So you can dynamically output the tooltip text into the title attribute which will appear on rollover without and need for JavaScript. It also makes the text easily accessible if you choose to use JavaScript to extract the text and output it in a custom styled tooltip.
<input type='button' value="<?php translate('Messages');?>" id="messages_btn" title="<?php translate("tooltip_messages")?>">" class='messages'>
Hope this makes sense.
I want to be able to just click inside a text field, so that it highlights all the text inside it (and possibly also copies it). Although, I'm satisfied with just getting it highlighted if that's possible with HTML only. Many people are using NoScript and such nowadays, so I'm trying to stay away from JavaScript etc.
TinyPic is one example which uses this little 'feature'.
Thanks for your help.
I'm pretty sure you need to use some javascript; no matter how trivial it might be.
For example; this does what you're asking:
<input type="text" value="Click Me to Select Text" onclick="this.select()">
in the head section add this script:
<script language="JavaScript">
function highlight(field) {
field.focus();
field.select();}</script>
And then for each field that you want to select all the text in when clicked, add this:
onClick='highlight(this);
I hope it works, try it by the way
I'm using django-uni-form to style my form using the filter my_form|as_uni_form:
<form class="uniForm" id="my_form" method="post" action="./">
<fieldset class="inlineLabels">
{{ my_form|as_uni_form }}
<div class="form_block">
<input type="submit" value="Submit"/>
</div>
</fieldset>
</form>
It looks really good. But I need to customize it.
For example, one of the field "percentage" of the form is of the type IntegerField. It is being rendered as an <input type="text">. The problem is that the text box is really wide, I'd like to make it only 2 character wide. Also I want to add a percentage sign "%" right after the text box so that users know they if they put in the number "10" in the text box, it means 10%.
Is there anyway to do that with django-uni-form?
Thanks for your help.
You'll need to loop over the elements of your form and render the uniForm markup yourself. Either that, you can customize the look of each input based on an id or class.
What I'd do is look at the mark up it generates, and then loop over the elements generating that same markup and customize them. See the Django docs for more information.
I have the same question as yours. I think the length of the text input is easy to change via css. I'm more concerned about the custom html element behind the input, in your case percentage mark. I don't find an easy solution to it. Looks like either we have to mimick the way a field is rendered in django-uni-form template or write a filter of our own. I'm still waiting for a more elegant solution.
I was recently corrected, and according to the HTML4 DTD, it is legitimate to use a fieldset outside of a form:
http://www.w3.org/TR/html401/sgml/dtd.html#block
Previously I had not known this, and wonder if anyone can think of a legitimate use case for doing so. I feel like using one to decorate would be frowned upon by most designers. So is there a legitimate use case, or can you link to a site where this has been found appropriate and used as such?
I used a field set to decorate sections when printing documents. For example an invoice might have a Bill To and a Ship To, and drawing the frame around them with the legend text embeded in the frame can look really slick.
I think its more than legit to use it for decoration. Its simple and elegant and with the use of tag its pretty nice.
Check w3schools example out
I don't think there is a legitimate case to semantically have a fieldset outside a form element, since a fieldset is a set of (input) fields - the clue's in the name! If you have input fields, you will likely always have a form, even if you're not posting back to the server.
I have occasionally used from a presentational aspect, because the fieldset+legend combo is impossible to replicate exactly in CSS, specifically, the broken line behind the legend.
It is acceptable to use all form field control outside of a form element, including fieldset.
This is appropriate wherever you have fields that only talk to JavaScript, instead of ever being submitted back as to the server side.
(This didn't originally used to work in Netscape 4, but that's hardly a concern this century...)
Well, using it to decorate can be frowned upon by designers AND be legitimate, so there is a legitimate use case.
A form is simply a container for the fields you wish to submit via post back. Most regular site pages may not even have one. That said, using a fieldset as a styling tag is legitimate and has nothing at all to do with whether a form tag exists or not.
You can use a fieldset to wrap multiple form controls that you need to disable together:
<fieldset disabled>
<input type="text" placeholder="disableable input" />
<button type="button">Some action that needs to be disabled</button>
<button type="button">Some other action</button>
</fieldset>