CODEWITHSUNDEEP
htmlcssforms
MultiDev
MultiDev

Reputation: 10649

CSS: Get form label to display on top of form element (jsfiddle)

I am trying to get the form label to display on top of each form element. I have the jsfiddle where this is done.

The problem is, how do I get more than one form element per line while keeping its label directly above it?

You can see in my example how I have "city, state, zip" all on the same line, but because of display: block in my CSS, it is breaking them up onto separate lines.

label { 
    font-weight:bold;
    display: block;
}

<form>

    <label for="name">Name</label>
    <input type="text" name="name" /><br />

    <label for="email">Email</label>
    <input type="text" name="email" /><br />

    <label for="city">City</label>
    <input type="text" name="city" /> 

    <label for="state">State</label>
    <input type="text" name="state" /> 

    <label for="zip">Zip</label>
    <input type="text" name="zip" /><br />

    <label for="last">Last</label>
    <input type="text" name="last" />

</form>

Upvotes: 1

Views: 5598

Answers (3)

Marat Tanalin
Marat Tanalin

Reputation: 14123

A semantic way to markup label/field pairs is to use DL list:

<form>
    <dl>
        <dt><label for="name">Name</label></dt>
        <dd><input type="text" name="name" id="name" /></dd>

        <dt><label for="email">Email</label></dt>
        <dd><input type="email" name="email" id="email" /></dd>
    </dl>
</form>

With this code, you'll also easily achieve presentation you need.

If you need to place multiple label/field pairs horizonally, use separate DL for each DT/DD pair:

<form>
    <dl>
        <dt><label for="name">Name</label></dt>
        <dd><input type="text" name="name" id="name" /></dd>
    </dl>
    <dl>
        <dt><label for="email">Email</label></dt>
        <dd><input type="email" name="email" id="email" /></dd>
    </dl>
</form>

and use float: left, or display: inline-block or display: table-cell for DL (depending on what best fits your needs):

/* Font size zeroed for removing gaps between inline blocks. */
FORM {font-size: 0; }

/* Font size restored for DL. */
FORM DL {
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    /*width: 200px;*/ /* Specify width if needed. */
}

BTW, take into account that for attribute of LABEL element refers to id attribute of labeled element, not its name attribute.

Upvotes: 3

user197508
user197508

Reputation: 1302

please write a css class:

.inline-block-display{
display: inline-block !important;
}

now add this class to each element which you want to add that to same line,like to this:

<input type="text" name="city" class="inline-block-display" />

Demo

Upvotes: 1

Riaan Walters
Riaan Walters

Reputation: 2666

What you want to use is the css 'float' and 'clear'

Have a look at this jsfiddle and you'll understand (Expanded your fiddle) You can obviously edit the widths to suite your need

http://jsfiddle.net/UxPDR/

like this

.small{
    float:left;
}
.clearleft{
    clear:left;
}

Upvotes: 0

Related Questions