PDA

View Full Version : Working with forms


gigiloumill
11-29-2011, 03:22 PM
Guys, I am trying not to use tables, however, I need to create a webform and align the fields horizontally, would any one have a tutorial on how to create it? I can't seem to find anything on this subject. Everything points to vertical aligning. I would like to see how the html and the css looks. Thanks

gentleone
11-29-2011, 07:16 PM
Here's a simple example to align the label element and input field next to each other. You just wrap them together in a div and float them.

<form>

<fieldset>

<legend>Contact form</legend>

<div>

<label for="firstname">First name:</label>
<input type="text" name="firstname" />

</div>

<div>

<label for="lastname">Last name:</label>
<input type="text" name="lastname" />

</div>

</fieldset>

</form>
CSS:

label, input[type="text"] {
display: block;
float: left;
width: 200px; /* whatever size you need, can also be in percentages of course */
height: 30px;
margin-right: 10px;
}

gigiloumill
11-30-2011, 04:15 PM
thanks G..but this still shows vertically..I need to show name and last name side by side..even if I css display to inline..any other suggestions? my problem is that I'm putting the contact form at the footer of the page and a contact for vertically takes too much space..

gigiloumill
11-30-2011, 04:29 PM
Never mind..I got your point..thanks

gigiloumill
11-30-2011, 05:11 PM
O.K. I got it working, however, I am having a problem aligning then vertically. I have a label for first name and last name side by side, then, I added on the bottom a label for e-mail and one for telephone. But, no the input fields don't align..Any suggestions? Thanks..

gentleone
11-30-2011, 06:41 PM
Post your code what you have so far. HTML and CSS. I can't do much for you without seeing some code.

gigiloumill
12-01-2011, 12:32 AM
O.K., here it is..

<div class="col"><form>

<fieldset>

<legend>Contact form</legend>

<div class="left">

<label for="firstname">First name:</label>
<input type="text" name="firstname" />

</div>

<div class="right">

<label for="lastname">Last name:</label>
<input type="text" name="lastname" />

</div>

<div class="left">

<label for="email">E-mail:</label>
<input type="text" name="email" />

</div>

<div class="right">

<label for="telephone">Telephone:</label>
<input type="text" name="telephone" />

</div>

<div class="left">

<label for="message">Message:</label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>

</fieldset>

</form>

</div>

CSS

#footer .col {
width: 500px;
padding-right: 40px;
float: right;
display: block;
position: relative;
margin-right:40px;
}

label, {
display: block;
float: right;
width: 100px; /* whatever size you need, can also be in percentages of course */
height: 20px;
margin-right: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#FFFFFF;
position:relative;
}

legend {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#FFFFFF;
}

input[type="text"] {
border:#000000;
background-color:#F4F2F3;
border-top-right-radius:5px;

}

.left {
float:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#FFF;
position:relative;
}
.right {
float:right;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#FFF;
position:relative;
}


Thanks

gentleone
12-01-2011, 11:05 AM
I need to show name and last name side by side..even if I css display to inline..any other suggestions?

Do you mean something like this?
http://cssdesk.com/H8bw8

gigiloumill
12-01-2011, 01:37 PM
This is great G...If I can just ask you one more question..How can I move the label to the left of the input field? I have tried but can't figure it out. the reason being is that I don't have much space on the footer. I don't want to have the footer too high and I also need to include a captcha and obviously a submit button..Thanks again..

gentleone
12-01-2011, 03:07 PM
I've edited the form, so if you follow the cssdeck link again, you'll see the changes. Just explore the code to see how it's done.