CODEWITHSUNDEEP
htmlcss
FrankSharp
FrankSharp

Reputation: 2632

HTML form align right

Hello I try to align all my input to have a normal form! I can not make it fit together!!GRR Thanks for your help please...This is made 2 hours im lost my time on this simple thing.....

         <form name="input" action="html_form_action.asp" method="get">

                <div id="one">
                <p><label>Prénom</label> <input type="text" id="Prénom"/></p>
                <p><label>Nom</label> <input type="text" id="Nom" /></p>
                <p><label>Mot de passe</label> <input type="text" id="Pass" /></p>
                <p><label>E-mail</label> <input type="text" id="Mail" /></p>
                </div>

               <input type="submit" value="Submit" />
         </form>

Upvotes: 1

Views: 8975

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

I suppose you mean tabular appearance for the form, in two columns, one for the label, another for the input field, with the second column aligned left, first column either left or (more readably perhaps) right. The most obvious and most robust way is to make it a table:

<table id="one">
<tr><td><label>Prénom</label> <td> <input type="text" id="Prénom"/>
<tr><td><label>Nom</label> <td> <input type="text" id="Nom" />
<tr><td><label>Mot de passe</label> <td> <input type="text" id="Pass" />
<tr><td><label>E-mail</label> <td> <input type="text" id="Mail" />
</table>

Then style as desired in CSS, e.g. with td:first-child: text-align: right.

This causes the first column to be as wide as needed for the longest label. Other methods require a guess on the width, and this is not robust, as the width needed will depend on the font.

To anyone who then accuses you for “using tables for layout,” you can answer that this is a method that actually works and that there is no reason why a form like this could not be regarded as tabular data.

Upvotes: 1

Raptor
Raptor

Reputation: 54212

Not really sure what do you want to achieve.

But if you want to align the values input-ed into textbox. In the input tags , add :

style="text-align: right"

If you want to align all textbox to the right, I suggest you can re-format your form in a table.

Upvotes: 0

Stephen P
Stephen P

Reputation: 14800

You can give your labels width, and text-align them to the right. To do that you have to make them inline-block elements.

See this fiddle

I guess you don't have to align them right. That's just a style I see a lot when people use a table to do this.

Upvotes: 5

Michaeldcooney
Michaeldcooney

Reputation: 1445

If you just want to make it line up without using a table you can just use some simple CSS:

label {
    width: 120px; //however wide your longest label is
    float: left;
}

then just take out the p tags and put line breaks after each input.

Upvotes: 2

Related Questions