Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Aligning Fields On A Form

Posted on 2014-01-28
3
Medium Priority
?
217 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

577 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