PDA

View Full Version : Input field css



jwoodall01
Jan 26th, 2011, 07:38 PM
I have a form with quite a few inputs on it. I wanted to know if there was a way to cut the input fields off on the right hand side so that all the ends of the fields were aligned on the right... but they're all still different sizes (doesn't matter where they begin on the left). Any ideas? The only thing I can think to do is to set a width on each individual field, and then that probably wouldn't work right across browsers (there would probably be a stagger to them).

http://lh4.ggpht.com/_Cf4tJujsOyE/TUBtyM8LsJI/AAAAAAAAAi0/sDr_O9VySSM/s640/Casa%20Herradura%20Academy%20Connections.png

teedoff
Jan 26th, 2011, 07:57 PM
Try putting the inputs in a table. Then you can align and center each element as needed. Tables are good for this sort of thing. Makes forms look nice and neat.


<form action="somePageAction.html" method="post" name="someName">
<table border="1" cellpadding="3" cellspacing="1">
<tr>
<th>Some Text Here</th>
<td><input type="text" name="fileName" id="fileName" value="somename" /></td>
</tr>
</table>
</form>

Pepe, the bull
Jan 27th, 2011, 12:27 AM
I'm not exactly sure how to do what you're asking, but what if you made all the fields the same width and wrapped them in a <div> which you align to the right.



<form action="Action.html" method="post" name="MyForm">
<div style="width:350px; border:1px solid black; padding:10px; text-align:right;">
<p>Your Name: <input type="text" style="width:50%;" /></p>
<p>Birth Date: <input type="text" style="width:50%;" /></p>
<p>Company Name: <input type="text" style="width:50%;" /></p>
<p>Business Address: <input type="text" style="width:50%;" /></p>
<p>Office Phone: <input type="text" style="width:50%;" /></p>
<p>Office Email: <input type="text" style="width:50%;" /></p>
</div>
</form>

quartzy
Jan 27th, 2011, 12:31 AM
If you style the form with css that would work, no need to add a table for the form.
Give each section of the form a fieldset
In the html, give each a label
In the html give each a legend for the heading of the fieldset.
Style the label as follows:

.label {float:left;
display:inline;
width: 200px;
/*or whatever width you want it to align to*/}
reduce the cols size if you want to cut the input size.

teedoff
Jan 27th, 2011, 12:47 AM
Table: like this...simple.

quartzy
Jan 27th, 2011, 12:54 AM
See my form done without tables, just using xhtml and css
www.leeoasis.org.uk/php_files/volunteer_enquiry_form.php