How to align form controls in Html5 and CSS3


HTML5 is coming and some greats features can align (left and right) and resize form controls (textbox, list, …) like in a Desktop application. unfortunately, it is not yet compatible with all modern browser.

To display your controls in 2 columns, use this code and associated CSS.

ResizeFormControls

<div class="TwoColumns">
    <!-- First column -->
    <div class="Column">
        <div>
            <label for="txtFirstname">First name:</label>
            <input type="text" name="txtFirstname" value="Denis" />
        </div>
    </div>

    <!-- Second column -->
    <div class="Column">
        <div>
            <label for="txtLastname">Last name:</label>
            <input type="text" name="txtLastname" value="Voituron" />
        </div>
        <div>
            <label for="cboSex">Sex:</label>
            <select name="cboSex">
                <option>Girl</option>
                <option>Boy</option>
            </select>
        </div>
        <div>
            <label for="txtPhone">Phone:</label>
            <input type="text" name="txtPhone" value="02/123.45.67" />
        </div>
    </div>

</div>

And the CSS file is:

body
{
    font-family: 'Segoe UI', sans-serif;
    font-size: 10pt;
}

label
{
    margin: 4px 0px 2px 0px;
    float: left;
    width: 110px;
}

input, select
{
    font-family: 'Segoe UI', sans-serif;
    font-size: 10pt;
    margin: 2px 0px 2px 0px;
    padding-left: 5px;
    height: 20px;
    width: -webkit-calc(100% - 20px - 110px);
    width: calc(100% - 20px - 110px);   
}

select
{
    height: 24px;
    width: -webkit-calc(100% - 11px - 110px);
    width: calc(100% - 11px - 110px);   
}

.TwoColumns
{
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0px;
    column-gap: 0px;
    min-width: 400px;
}

.Column
{
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}
Advertisements
Tagged with: ,
Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow me
   RSS Feed    Twitter    Linked In

Write you email address to subscribe at this blog and to receive new posts by mail.

Join 611 other followers

Who I am?






%d bloggers like this: