Solved

Aligning Fields On A Form

Posted on 2014-01-28
3
202 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

895 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

16 Experts available now in Live!

Get 1:1 Help Now