CODEWITHSUNDEEP
htmlcssalignment
Birdman
Birdman

Reputation: 5414

Aligment of textbox in proportion to the text

How do I correct the following E-mail textbox alignment: ?

To make it look like this:

I know I can use tables, but how do I solve this problem without using tables? CSS maybe?

HTML:

<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>

Upvotes: 0

Views: 103

Answers (3)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174937

The most minimalized version I could think of...

<form>
    <label>First Name: <input type="text" name="firstName"></label>
    <label>Last Name: <input type="text" name="lastName"></label>
    <label>Email Address: <input type="email" name="emailAddress"></label>
</form>​

and

form {
    width: 300px;
}
label {
    display: block;
    margin: 5px;
    padding: 5px;
    clear: both;
}
label input {
    float: right;
}​

Since OP has edited his question to include his markup, I'll expand the answer.

Some Points of Improvement:

  • Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
  • Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
  • Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
  • Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
  • Use CSS for design and layout, not <p>s and <br>s.

Good luck!

Upvotes: 3

Curtis
Curtis

Reputation: 103338

I'm assuming your HTML is something like:

<p>
   Email
   <input />
</p>

Change this to:

<p>
   <label>Email</label>
   <input />
</p>

This means you can then apply a fixed width to all your labels, making them consistent:

label
{
width:100px;
float:left;
}

http://jsfiddle.net/zvWqk/1/

Or as @Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.

http://jsfiddle.net/tt8gx/

Upvotes: 2

Graham Clark
Graham Clark

Reputation: 12966

Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.

Upvotes: 0

Related Questions