
Question:
How to position a complex form with multiple fields in line across the screen?
Solution:1
Why are people so hell-bent on avoiding tables?
Tables are not deprecated and should be used when displaying content which logically belongs in a table.
If your form is logically grouped such that a table would be intuitive, please use a table.
Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."
If you want a fluid form with a variable number columns, then disregard this.
Solution:2
I prefer the slightly-more-semantic way, using a definition list:
<dl class="form"> <dt><label for="input1">One:</label></dt> <dd><input type="text" name="input1" id="input1"></dd> <dt><label for="input2">Two:</label></dt> <dd><input type="text" name="input2" id="input2"></dd> </dl>
Then your CSS:
dl.form { width:100%; float:left; clear:both; } dl.form dt { width:50%; float:left; clear:left; text-align:right; } dl.form dd { width:50%; float:left; clear:right; text-align:left; }
This should produce a form centered in the page, with the labels in the left column and the inputs in the right
Solution:3
There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:
<div class="formWrapper"> <form> <div class="formItem"> <label for="firstName">First Name:</label> <input name="firstName" id="firstName" class="required" type="text" /> <span class="validator" style="display: none;">*</> </div> ... <!-- Rinse repeat --> </form> </div> <style type="text/css"> .formWrapper { width: 400px } .formWrapper .formItem { line-height: 35px; height: 35px; } .formWrapper label { width: 50px; } .formWrapper input { width: 100px; border: 1px solid #000; } .formWrapper .validator { padding-left: 10px; color: #FF0000; } </style>
Hope that helps.
Solution:4
After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive
and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.
<style> .formcol{ float: left; padding: 2px; } .formcol label { font-weight: bold; display:block;} </style> <div class="formcol"> <label for="org">organization</label> <input type="text" id="org" size="24" name="org" /> </div> <div class="formcol"> <label for="fax">fax</label> <input type="text" id="fax" name="fax" size="2" /> </div> <div class="formcol"> <label for="3">three</label> <input type="text" id="3" name="3" /> <label for="4">four</label> <input type="text" id="4" name="4" /> <label for="5">five</label> <input type="text" id="5" name="5" /> </div> <div class="formcol"> <label for="6">six</label> <input type="text" id="6" name="6" /> </div>
Solution:5
Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151
Solution:6
I suggest you blueprint CSS framework. Have a quick look at the demo page.
Solution:7
This is what I usually use when I need to design pretty complex forms.
HTML:
<fieldset>
<legend>Consent group</legend>
<form>
<fieldset class="nolegend">
<p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p>
<p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p>
<p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p>
</fieldset>
<fieldset class="nolegend">
<p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p>
</fieldset>
<input type="submit" value="Submit" />
</form>
</fieldset>
CSS:
body, input, textarea, select {
font: 1em Arial, Helvetica, sans-serif;
}
input, textarea, select { font-size: .8em }
fieldset,
fieldset legend {
background-color: #EEE;
}
fieldset {
border: none;
margin: 0;
padding: 0 0 .5em .01em;
top: 1.25em;
position: relative;
margin-bottom: 2em;
}
fieldset fieldset {
margin: 0 0 1em 0;
}
fieldset legend {
padding: .25em .5em 0 .5em;
border-bottom: none;
font-weight: bold;
margin-top: -1.25em;
position: relative;
*left: -.5em;
color: #666;
}fieldset form,
fieldset .fieldset {
margin: 0;
padding: 1em .5em 0 .5em;
overflow: hidden;
}
fieldset.nolegend {
position: static;
margin-bottom: 1em;
background-color: transparent;
padding: 0;
overflow: hidden;
}
fieldset.nolegend p,
fieldset.nolegend div {
float: left;
margin: 0 1em 0 0;
}
fieldset.nolegend p:last-child,
fieldset.nolegend div:last-child {
margin-right: 0;
}
fieldset.nolegend label>span {
display: block;
}
fieldset.nolegend label span {
_display: block;
}
I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.
Solution:8
Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?
Solution:9
That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).
Solution:10
input fields, by default, are inline. Therefore, you can simply use line them up without
Another option if you want them lined up correctly is as follows:
<div id="col1" style="float: left;> <input type="text" name="field1" /> <br /> <input type="text" name="field3" /> </div> <div id="col2" style="float: left;> <input type="text" name="field2" /> <br /> <input type="text" name="field4" /> </div>
Solution:11
I prefer to use fieldset to group all elements and p for each form field.
<html> <head> <style type="text/css"> fieldset { width: 500px; background-color: lightblue; } fieldset legend { font-weight: bold; } fieldset p { clear:both; padding: 5px; } fieldset label { text-align: left; width: 100px; float: left; font-weight: bold; } fieldset .Validator { color: red !important; font-weight: bold; } </style> <head> <body> <form> <fieldset> <legend>Data</legend> <p> <label for="firstName">First Name:</label> <input name="firstName" id="firstName" class="required" type="text" /> <span class="Validator" style="display: none;">*</span> </p> <p> <label for="lastName">Last Name:</label> <input name="lastName" id="lastName" class="required" type="text" /> <span class="Validator">*</span> </p> </fieldset> </form> </body> </html>
Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
EmoticonEmoticon