Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Tips please - how to line up prompts next to form fields

Status
Not open for further replies.
AndyGroom

AndyGroom

Programmer
May 23, 2001
972
GB
Hi,

I'm trying to do something pretty basic, just get a prompt adjacent to a text box.

I've tried different things but I can't get the prompt to line up anywhere near level with the textbox:

sample.jpg


I've got the prompt in one cell of a table, the form in another, to allow me to align the prompt independently of the form. How do you do it?


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Sort by date Sort by votes
Add padding to the top of the label's cell:

Code: 
<td style="padding-top: 10px;">Search for:</td>

Or vertically align the content:

Code: 
<td valign="middle">Search for:</td>

--James
 
Upvote 0 Downvote

Try using valign="middle":

Code: 
<html>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
	<td valign="middle" style="font-size:0.8em;">Search for:</td>
	<td valign="middle"><input type="text" size="10" /></td>
	<td valign="middle"><input type="button" value="Search" /></td>
</tr>
</table>
</body>
</html>

Hope this helps,
Dan

 
Upvote 0 Downvote
<label>!
<label>!
<label>!

It's such a good tag, it's a waste not to use it...

Code: 
<label for="searchbox">Search for</label>
<input id="searchbox" name="searchinput" />
<br />
Code: 
/* css code */
label {float: left;}

None of this 'messing around with tables' malarkey, use the code!
CSS will happily position form elements properly. Simply set appropriate padding and margin as needed. No tables required.

<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]
 
Upvote 0 Downvote
Here's a good article about marking up and laying out forms with only the <fieldset> and <label> elements:
Personally, I sometimes like to use a definition list (in addition to <label>s) to structure the prompts and fields in my forms. You use this CSS:
Code: 
form dl {
  padding: 0;
  margin: 0 5px 10px 0;
  position: relative 
} 
form dt { 
  clear: left;
  float: left;
  margin: 0px 0px 2px;
  width: 8em;
  text-align: right;
}

form dd { 
  clear: right;
  padding: 0;
  margin: 0 0 2px 8.25em 
}
and your html looks like this:
Code: 
<dl>
<dt><label for="fname">Forename:</label></dt>
<dd><input id="fname" name="fname" size="30" /></dd>
<dt><label for="sname">Surname:</label></dt>
<dd><input id="sname" name="sname" size="30" /></dd>
</dl>



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Interesting, I never thought of using a dl for form input - and yet, it does make sense.

Have you had any feedback vis-a-vis accessibility for this?

<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]
 
Upvote 0 Downvote
Thanks to all contributors - I did post a thankyou a few days ago but it doesn't seem to have been added!


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
manarth: No feedback yet, positive or negative, but it's not an entirely original idea. I can't find the article where I copied the code from (tweaked slightly by me afterwards anyway).

Provided you use the <dl> in addition to, rather than instead of, the <label> (and <fieldset>) elements there shouldn't be any loss of accessibility. At any rate it's no worse than throwing a load of <div>s in there, or (horrors!) a table.

One thing I like about this over the raw <label>s approach is it allows you to lay out forms that occasionally include fixed text instead of <input>s. For example, on a system I'm working on now there's a person details form. System administrators can enter or change the userid of a person, their version of the form includes these lines:
Code: 
<dt><label for="userid">User ID:</label></dt>
<dd><input id="userid" name="userid" /></dd>
Normal users can see their ID, but can't change it. For them, the lines are like this:
Code: 
<dt>User ID:</dt>
<dd>fbloggs</dd>
Because the layout is done by the definition list, I can use the same CSS in both cases.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I must say that I have had my thoughts about moving from table-layouts to css and div's, but recently, I made a design (ordered by customer), that has NO tables at all!

It works *perfect*, displays the same in both IE and Opera, something the tables did not!

There where some tweaking, as always, but I'm very pleased with the result!
There is now also WAY less data for the client to download, compared to using tables, nested tables, and the devil in disguise.

I think also one very important aspect of CSS, is that you can change the design, by just editing the .css file! (if you dont use tables, that is).

I think your mind is the only limit here (except some others limits which we wont speak of now:p)

but seriosly, with css and divs, you have a lot of control in your hands, if you just let your creativity flow! You can do things you before only could do in Javascript, moving images, etc.

you just have to think creative, like if you want an arrow below an hyperlink, when hoovering, you make the arrow image positioned outisde of the "box" on default and move it back in, when hovering...

quite easy, and no load-time, as on image-replacing.

so, my tips: use css :)

especially if the page has some backend things, like PHP/mySQL.

Olav Alexander Mjelde
Admin & Webmaster
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
762
bdwilcox
bdwilcox
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
775
3esolar
3
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top