...

View Full Version : Tab or indent (tags) For a form



Chris-topher
07-06-2005, 09:27 PM
Hi.
I am in the middle of creating an order form. What I really need is the name, address, town (etc) down the left hand side neatly...this I can do. The problem now is getting the text boxes aligned down the right hand side, is there a indent tag or like a tab i can use to do this. I didn't want to put it into a table. An idea like a tab would be great. Any suggestions please.

Regards
Chris

Beeper
07-06-2005, 10:30 PM
You might have to play with the widths a bit but...

CSS

/* FORMS */
input.txt {
color:#C41030;
background-color:#FFFFFF;
border: 1px inset #C41030;
width: 180px;
}
input.btn {
color:#FFFFFF;
background-color:#C41030;
border: 1px inset #C41030;
width: 145px;
background: #C41030;
font-size:80%;
font-weight:bold;
}
form select {
color:#C41030;
background-color:#FFFFFF;
border: 1px inset #C41030;
width: 145px;
}
form p {
clear:left;
margin:0; padding:0;
padding-top:5px;
}
form p label {
float:left;
width:100px;
}
You'll have to do the style for each type of input... :p but you get the idea

FORM

<form action="doSomething" name="contact" id="contact" method="post">
<p>
<label for="name">Name :</label>
<input name="name" type="text" size="20" id="name" />
</p>
<p>
<label for="email">Email :</label>
<input name="email" type="text" size="20" id="email" />
</p>
<p>
<label for="dropdown">Select :</label>
<select name="dropdown">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
</select></p>
<p>
<label for="submit">Press to submit :</label>
<input type="submit" name="SUBMIT" value="Submit" class="btn" id="submit" />
</p>
</form>

Nice and accessible too :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum