Jump to content

How to indent the input ?


terryds
 Share

Recommended Posts

Look at this first! flxzcw.png The input for name and email arent in the same indent.. How to make their same indent ? HTML code

 <form action="contact.php" method="post"><p>Name:<input type="text" name="name" placeholder="Type Here"><br>Email:<input type="email" name="email" placeholder="example@example.com"><br>Message:<br><textarea name="msg"></textarea><br><input type="submit" name="submit" value="Submit!"></p></form>

CSS

input[type="text"], input[type="email"] {margin-left: 50px;}

Please tell me how to fix the indent...

Link to comment
Share on other sites

This is caused by the text no being the same length (ie. 'Name:' being just a bit longer than 'Email:'). The solution is to use <label> tags and then set that tag to a fixed width. <label>Name:</label><input type="text" name="name" placeholder="Type Here"><br><label>Email:</label><input type="email" name="email" placeholder="example@example.com"> CSS:label {width: 100px;} /*adjust to suit*/

Link to comment
Share on other sites

<form action="contact.php" method="post"><div class="form_wrapper"><div class="form_col1"><label>Name:</label><label>Email:</label><label>Message:</label></div><div class="form_col2"><input type="text" name="name" placeholder="Type Here"><input type="email" name="email" placeholder="example@example.com"></div><textarea name="msg"></textarea><input type="submit" name="submit" value="Submit!"></div></form>

 .form_wrapper .form_col1 {float:left; }.form_wrapper label, .form_wrapper input {display: block; }.form_wrapper label, .form_wrapper input {margin:5px 10px 5px 0;}.form_wrapper input {margin-right:0;}.form_wrapper textarea {display:block;clear: both;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...