How do i line up text fields?

[pnandrus]

i have a small form with 5 text fields whose left edges i want to line up horizontally. Is there a way to do this short of just playing with spaces until i get it right? i looked up the align attribute but i found it was deprecated so i need some ideas...thanks

 

[Wullie]

Hi mate,

Use tables.

<table>
  <tr>
    <td>First Name:</td>
    <td><input type="text" name="1" /></td>
  </tr>
  <tr>
    <td>Last Name:</td>
    <td><input type="text" name="2" /></td>
  </tr>
</table>

Hope this helps


Wullie

Fresh Look - Quality Coldfusion Hosting

http://www.tutorial-world.com

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

 

[manarth]

Or a table-less CSS way:

<label>First name</label>
<input name="forename" id="forename" />
<br />

<label>Surname</label>
<input name="surname" id="surname" />
<br />

/* css */
label {display: block; float: left; width: 15em; }
input {display: block;}
form br {clear: both;}

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[ChrisHunt]

A slightly different CSS-based approach here:

http://www.themaninblue.com/writing/perspective/2004/03/24/

. Using tables is soooo twentieth century!

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[vongrunt]

On the other hand... floating form elements w/ fixed width simulate nothing but table cells, right?

 

[manarth]

vongrunt - 'tis true, to be sure....but tables are for tabular data, not for layout!

Using CSS for layout allows a developer to use syntactically correct structural html, without compromising the design.

This makes the page more accessible - to people with disabilities (such as a blind person accessing the web with a screen reader), and to search engines.

It also (usually) reduces page size (and therefore bandwidth), and makes the page easier to maintain (because you don't have to keep track of all those darn <td> tags!)

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[ChrisHunt]

No. Using the CSS techniques acheive the desired result - lining up the labels and fields as requested. A table would be another way of doing it, but the CSS is not intended to "simulate" a table.

The difference is that the CSS approach uses semantic (i.e. meaningful) markup - identifying the labels for the fields with the, erm, <label> tag, instead of confusing the issue with a superfluous <table>.

As you'll see in

http://www.themaninblue.com/experiment/InForm/

, you can use CSS to play around with the layout without changing any of the HTML.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[vongrunt]

Technically I don't see difference between "data" and LABEL/INPUT tags. All cells in table row have equal height, all cells in column equal width. When you have to simulate exactly that behavior - and cell contents is nearly atomic - table is better choice. Bandwidth savings are irrelevant because forms are usually small. About everything else, I agree with both of you.