Untitled

HTML form alignment - input with label

<form method="post" action="?test" id="form">

    <label for="user">USERNAME</label>

    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />

    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>

    <label for="password" class="clear">PASSWORD</label>

    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />

    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>

</form>

       

label {

    background: yellow;

    font-size: 12px;

    font-weight: bold;

    width: 100px;

    float: left;

    margin-right: 50px;

    text-align: right;

    cursor: pointer;

}

 

input {

    height: 30px;

    background-color: #fafafa;

    border: 1px solid #abaaaa;

    width: 300px;

    margin: 5px 0 5px 0;

    float: right;

}

       

vertical-align: middle;

       

<div class="field">

    <label for="user">USERNAME</label>

    <div class="field-subject">

        <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />

    </div>

</div>

 

.field {

    overflow: auto; /* this "clears" the floated elements */

    margin-bottom: 10px;

}

 

.field label {

    float: left;

    width: 200px;

}

 

.field .field-subject {

    float: left;

    width: 500px;

}