CODEWITHSUNDEEP
htmlcssalignment
Aan
Aan

Reputation: 12890

Trying to align input field with labels

I want to align the input fields shown below, with keep using <label> in a correct way.

enter image description here

The code is as below:

<form action="add.php" method="POST" enctype="multipart/form-data">
    <label for="refNo">Field1 name (long)</label>
    <input id="refNo" type="text" name="refNo" value="" /><br>
    <label for="name">Field2 name</label>
    <input id="name" type="text" name="name" value="" /><br>    
    <input type="submit" value=":: Add  ::" name="addBtn" />
</form>

I am thinking to separate <label> tags in a <div> and the input fields in another and then with some floating manipulation I make the intended alignment, is this a correct way?

Upvotes: 1

Views: 84

Answers (3)

tanaydin
tanaydin

Reputation: 5316

How about this 

form > label {
  min-width: 185px;
  display: inline-block;
}
<form action="add.php" method="POST" enctype="multipart/form-data">
  <label for="refNo">Field1 name (long)</label>
  <input id="refNo" type="text" name="refNo" value="" /><br>
  <label for="name">Field2 name</label>
  <input id="name" type="text" name="name" value="" /><br>    
  <input type="submit" value=":: Add  ::" name="addBtn" />
</form>

Upvotes: 4

Ravi Chauhan
Ravi Chauhan

Reputation: 1458

<style>
    form{
        width: 300px;
        float: left;
    }
    form > label{
        width: 50%;
        float: left;   
        margin-bottom: 10px;
    }
    form > input{
        float: right;
        width: 50%;     
        margin-bottom: 10px;
    }
</style>
<form action="add.php" method="POST" enctype="multipart/form-data">
    <label for="refNo">Field1 name (long)</label>
    <input id="refNo" type="text" name="refNo" value="" /><br>
    <label for="name">Field2 name</label>
    <input id="name" type="text" name="name" value="" /><br>    
    <input type="submit" value=":: Add  ::" name="addBtn" />
</form>

Upvotes: 2

Phantom
Phantom

Reputation: 377

For simple UI use this (Using Table):

<form action="add.php" method="POST" enctype="multipart/form-data">
    <table>
        <tr>
            <td>
                <label for="refNo">Field1 name (long)</label>       
            </td>

            <td>
                <input id="refNo" type="text" name="refNo" value="" />
            </td>
        </tr>

        <tr>
            <td>
                <label for="name">Field2 name</label>
            </td>

            <td>
                <input id="name" type="text" name="name" value="" /><br>    
            </td>
        </tr>

        <tr>
        <td></td>
            <td>
                <input type="submit" value=":: Add  ::" name="addBtn" />
            </td>
        </tr>
    </table>
</form>

For More good looking and advanced UI try using Bootstrap.

Upvotes: 0

Related Questions