CODEWITHSUNDEEP
htmlcssformslayout
Lucy
Lucy

Reputation: 1852

Position Label on top of text-area

I want to place label on top of an html area in the format shown in this picture.I am using vertical align property but the label is coming on the left hand side of the text-area

The desired format

The current format i am getting is like this http://jsfiddle.net/aMLFE/

the css code being used is

textarea { vertical-align: top; }

Please tell me how to position label in the format given in the image..

Upvotes: 2

Views: 53955

Answers (4)

Sanjeev
Sanjeev

Reputation: 1866

The semantic approach is by using DL and DT.

<form>
    <dl>
        <dt><label for="title">Title : </label></dt>
        <dt><textarea rows="5" id="title" name="title"></textarea></dt>
    </dl>
</form>

FORM DL {
    display: inline-block;
    vertical-align: top;
}

Upvotes: 1

Sree ram
Sree ram

Reputation: 379

There is a Tag Called Fieldset For your requirement.

<fieldset>
  <legend>Lable</legend>
  Data in the Box comes Here...!!
 </fieldset>

Hope this is what you want..!!

Here is the demo http://jsfiddle.net/hZLhv/

Upvotes: 2

Arbel
Arbel

Reputation: 30989

Demo

CSS:

label {display:block;}
textarea { display:block;}

HTML:

<label for="title">Title: </label>
<textarea rows="5" id="title" name="title"></textarea>

There are so many ways to achieve what you need, but for the snippet that you have provided this is sufficient.

Upvotes: 17

JDGuide
JDGuide

Reputation: 6525

Try this code :-

<label for="title">Title : </label>
<br/>
<textarea rows="5" id="title" name="title"></textarea>

Run Fiddle.

Upvotes: 4

Related Questions