Solved

Aligning Fields On A Form

Posted on 2014-01-28
3
199 Views
Last Modified: 2014-01-28
I have a contact form that I want to be in the center of the page but the fields to be left aligned.  How can I do this?  Thanks.
<div align="center"><h2>Contact Form</h2></div>
<div align="center">
<form action="contact.php" method="post">
	Your name<br>
    <input type="text" name="cf_name"><br>
    Your e-mail<br>
    <input type="text" name="cf_email"><br>
	Message<br>
    <textarea name="cf_message"></textarea><br>
    <p>&nbsp;</p>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form>
</div>

Open in new window


The link:
http://www.mediascrubber.com/contactemploy.html
0
Comment
Question by:DS928
  • 2
3 Comments
 
LVL 4

Expert Comment

by:ravikantninave
ID: 39815721
Use Div or simply Table;
<style>
.LeftDiv{width:100px; float:left;}
.RightDiv{width:150px; float:left;}
.Clear {clear:both;}
</style>


<div align="center"><h2>Contact Form</h2></div>
<div style="width:500px; margin:auto;">
<form action="contact.php" method="post">
<div class="LeftDiv">Your name</div>
<div class="RightDiv"><input type="text" name="cf_name"></div><div class="Clear"></div>
<div class="LeftDiv">Your e-mail<br></div>
<div class="RightDiv"><input type="text" name="cf_email"></div><div class="Clear"></div>
<div class="LeftDiv">Message</div>
<div class="RightDiv"><textarea name="cf_message"></textarea></div><div class="Clear"></div>
    <p>&nbsp;</p>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form>
</div>

Open in new window

0
 
LVL 4

Accepted Solution

by:
ravikantninave earned 500 total points
ID: 39815737
or
<div align="center"><h2>Contact Form</h2></div>
<div style="width:500px; margin:auto;">
<form action="contact.php" method="post">
<table style=" border:none;">
<tr>
<td>Your name</td>
<td><input type="text" name="cf_name"></td>
</tr>
<tr>
<td>Your e-mail<br></td>
<td><input type="text" name="cf_email"></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="cf_message"></textarea></td>
</tr>
</table>
    <p>&nbsp;</p>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form>
</div>

Open in new window

0
 

Author Closing Comment

by:DS928
ID: 39815914
Excellent!  Thank you.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now