If I have a html form like the following:
<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?
Yup. Surround each label with a <label> tag:
<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">
Then give the label a width:
label {
display: inline-block; /* try "block" instead if this fails in IE */
min-width: 5em;
}
That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.
The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.
That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).
You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/
<ul>
<li>
<label><input /> Some Text</label>
</li>
</ul>
or
<ul>
<li>
<input /><label for="">Some Text</label>
</li>
</ul>
Rich
The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").
CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.
I don't see why you want to do that.
It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.
Perhaps you could use
CSS (and to a lesser extent- tables) are tools you are looking for.
Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.
Related
I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox.
Here is the JSFiddle: https://jsfiddle.net/vpm13m2b/
The HTML for the control is:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
<div class="form-group">
<div>
Attempt #2
<span class="red">*</span>
</div>
<label class="checkbox-inline">
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:
Here's what I am trying to do:
The styled checkbox is displayed next to the "Yes"
Selecting the text also selects the checkbox
Keep the solution clean (trying to avoid dealing with float:left or jquery click events on the text to check the checkbox)
It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the form-control class styling the checkbox for their nice inline examples.
Remove the class="form-control" from your checkboxes. As the bootstrap docs state:
All textual <input>, <textarea>, and <select> elements with
.form-control are set to width: 100%; by default.
jsFiddle example
The .form-control class has about a dozen properties being set that you most likely don't want or need.
Here's what I came up with to fix my issue. I need to retain the .form-control class on the checkbox element so that the checkbox control is styled by the bootstrap theme. My busines requirement is to use the themed, not default browser, checkbox.
See working JSFiddle here: https://jsfiddle.net/vpm13m2b/3/
input[type=checkbox].form-control {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: -8px;
}
The css above was added into my site's stylesheet so that the form-control checkboxes retain the style, and I don't have to change the existing code that has a label containing the checkbox and caption to the right of the checkbox vertically centered.
This works with my original attempt (#1) on the html below:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
The resulting output matches what I'm looking for in the original question:
OK so, I have an icon that when I put in front of an input it is pushing the input to the right by 5 pixels or so therefore, throwing the fields out of visual alignment. Is there a style I can throw on :before input or something that can make the icon move over the left a bit? My HTML looks like so:
<li>
<label>Date</label>
<img src="img/cal.png"/>
<input type="text"/>
</li>
Add a css negative margin on the img element:
<li>
<label>Date</label>
<img src="img/cal.png" style="margin-left: -5px;" />
<input type="text"/>
</li>
You could resize the text box itself:
<input type="text" style="width:40px" />
Probably from the implicit space between inline elements and carriage returns in the markup. Try this markup formatting "trick"
<li>
<label>Date</label>
<img src="img/cal.png"
/><input type="text"/>
</li>
or go all inline
<li><label>Date</label><img src="img/cal.png" /><input type="text"/></li>
I made a JSFiddle that demonstrates this.
I'm designing a form with a number of labels and input controls. They won't necessary fit within a tabular form because the columns do not line up in each row.
So, for example, it may look something like this:
Label1: Label2: Label3:
[Input1] [Input2 ] [Input3 ]
Label4: Label5:
[Input4 ] [Input5 ]
Label6: Label7: Label8:
[Input6 ] [Input7 ] [Input8 ]
The biggest issue is that I want the label to always be left-aligned with the input control. Can anyone make some suggestions as to the best way to style this? An existing example would be perfect!
Techniques I've considered include using a table, floating <div>s, and combinations of the two. I'm getting close but it's a lot of markup and I'm not confident that it's a good way to approach all browsers.
Thanks for any tips.
I would suggest that you should find the best structure for your form first before jumping into any design using CSS. The reason is that you'll be compromising users who doesn't have / disabled their CSS. See Progressive Enhancement.
Think of this way:
Am I making a tabular data? No? Then it's probably just a list of <label> and <input> pairs
Should they be listed by order? Then use <ol> No? Then use <ul>.
Are ALL these lists related to each other? No? then wrap them inside a <fieldset> not <div>s
Do they work and look ok even without any images or CSS? No? then Iterate from step 1.
Some things to consider:
<table> should only be used for tabular data, not for any layout. See Why tables for layout is stupid.
<input> and <label> are by default both an inline-level element, meaning, they will align on each other automatically. So using float:left or display: inline-block will not help, but rather create another problem you'll have to deal later on.
<div> (also <span>) should always be a last option. See Semantics.
Example:
In order for you to picture them out, here's the output:
Markup without CSS:
Markup with CSS:
The Semantic Markup:
<form action="" method="">
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input1">Label1: </label>
<input type="text" id="input1" size="31" />
</li>
<li>
<label for="input2">Label2: </label>
<input type="text" id="input2" size="31" />
</li>
<li>
<label for="input3">Label3: </label>
<input type="text" id="input3" size="31" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input4">Label4: </label>
<input type="text" id="input4" size="31" />
</li>
<li>
<label for="input5">Label5: </label>
<input type="text" id="input5" size="31" />
</li>
<li>
<label for="input6">Label6: </label>
<input type="text" id="input6" size="31" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input7">Label7: </label>
<input type="text" id="input7" size="31" />
</li>
<li>
<label for="input8">Label8: </label>
<input type="text" id="input8" size="31" />
</li>
<li>
<label for="input9">Label9: </label>
<input type="text" id="input9" size="31" />
</li>
</ol>
</fieldset>
</form>
The CSS Code:
ol {
margin-right: 1em;
padding-left: 0;
}
li {
display: inline-block;
}
fieldset {
border: 0;
}
input {
display: block;
}
legend {
display: none;
}
Further notes:
We included a size=31 because it will, at least accommodate more viewable space for users who input data in the field.
The <form> remains usable even when the CSS is not available or turned off.
The <legend> helps the user understand the relation of the fields on each other.
Make your labels inline-block elements, and give them a width that matches the associated inputs.
I think the best solution would be to wrap each row of inputs in its own div, then individually wrap each input and label in ITS own div, making it easy to left align the labels.
Here's an example: http://jsfiddle.net/5zNHj/24/
Here's something I quickly worked through using CSS and a little basic HTML knowledge. Might not be the prettiest way to do it, but it's definitely fast to code out. I've added comments in the code to explain myself (hopefully) relatively clearly. Feel free to ask any questions and I'll try to help you out, even though I'm still a beginner. Good luck! http://jsfiddle.net/Cwca22/Z2ySD/
I'm just starting to get the hang of HTML. I can't manage to align this to the right, it's part of a menu. I basically want it to align the search box to the right so it looks like facebook or something like that. Till now I've been using padding but I cannot keep it going any longer.
<li id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div>
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form></li>
Thanks
You have some options:
keep the div(bad way)
add align"right" to the div
on the form and remove the div (better way)
use float:right
text-align: right
And place that on the form and remove the div.
Also I recommend putting styling in a css and not in the html elements.
Personally I wouldn't use a list
<div id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div style="text-align: right;">
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form>
</div>
And I would also suggest you experiment with text-align
Add text-align:right; to your form and remove the unnecessary div.
Note that this will only work for inline elements: text, inputs, anchors, etc. If you want boxes (divs, forms, tables, etc.) to align to the right you need to use float:right; and set a height on the parent of the floated item, or add a clear div bellow the floated item. Also, besides being unnecessary, this second approach would be more complicated to use for you, as a beginner.
I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <div>s or <span>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS.
The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of display: block, but it doesn't really work in the situation I'm trying to handle now - a form with <input> fields. Something like this:
<form>
Thingy 1: <input class="a" type="text" name="one" />
Thingy 2: <input class="a" type="text" name="two" />
Thingy 3: <input class="b" type="checkbox" name="three" />
Thingy 4: <input class="b" type="checkbox" name="four" />
</form>
I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this:
input.a:after { content: "\a" }
But that didn't seem to do anything.
It'd be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.
Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.
<label>
Thingy one: <input type="text" name="one">;
</label>
then use CSS on your label elements...
label {display:block;clear:both;}
Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should. One of these things is generated content - it doesn't work for form controls. Instead, wrap the labels in <label> and use label:before { content: '\a' ; white-space: pre; }. You can also do it by floating everything and adding clear: left to the <label> elements.
It looks like you've got a bunch of form items you'd like to show in a list, right? Hmm... if only those HTML spec guys had thought to include markup to handle a list of items...
I'd recommend you set it up like this:
<form>
<ul>
<li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
<li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
</ul>
</form>
Then the CSS gets a lot easier.
the following would give you the newlines. It would also put extra spaces out in front though... you'd have to mess up your source indentation by removing the tabbing.
form { white-space: pre }
<form>
<label>Thingy 1: <input class="a" type="text" name="one" /></label>
<label>Thingy 2: <input class="a" type="text" name="two" /></label>
<label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
<label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>
and the following css
form label { display: block; }
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>
<form>
<label>thing 1:</label><input />
<label>thing 2:</label><input />
</form>
One option is to specify a XSLT template within your XML that (some) browsers will process allowing you to include presentation with mark-up, CSS, colors etc. that shouldn't affect consumers of the web service.
Once in XHTML you could simply add some padding around the elements with CSS, e.g.
form input.a { margin-bottom: 1em }
The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:
CSS
<style type="text/css">
.lb {
display:block;
clear:both;
}
</style>
HTML
<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
I agree with John Millikin. You can add in <span> tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <input> an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.
Even so, your best bet is to logically group the data up in <span> tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).
The CSS clear element is probably what you are looking for the get linebreaks.
Something along:
#login form input {
clear: both;
}
will make sure the no other floating elements are left to either side of you input fields.
Reference
The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.
Use javascript. If you're using the jQuery library, try something like this:
$("input.a").after("<br/>")
Or whatever you need.