using the <label>

Necuno

Court Jester
Joined
Sep 27, 2005
Messages
58,567
Code:
<label class="BlueHeading">Contact Person(s) :</label>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

i guess there is not more to it that i've already done using the <label> as in the above code. as i've noted before the IDE likes to add &nbsp; on its own either when i switch between source to design or when i'm in split and presses save.

funny thing is it exactly adds &nbsp; just below where i use <label> in side my views.
 

FarligOpptreden

Executive Member
Joined
Mar 5, 2007
Messages
5,396
You forgot the "for" attribute... Other than that, there isn't much more to the label-tag. Just curious as to why you use the design view? The designer usually adds a lot of unnecessary markup to the page. Use the source-view in VS for more control over your markup viz-a-viz the final presentation in the browser.

It's also useful to float a label next to the control it is associated with, i.e.:

Code:
<label 
        style="float:left; width:100px;" 
        for="txtContactPersons">
  Contact Person(s) :
</label>
<input 
        type="text" 
        style="width:200px; display:block;" 
        id="txtContactPersons" />

Obviously, the styling could be done with CSS classes, but that's just to illustrate the idea. Happy markuping! :p

EDIT: Broke up the HTML into separate lines to eliminate scrolling in CODE-tag.
 

Necuno

Court Jester
Joined
Sep 27, 2005
Messages
58,567
You forgot the "for" attribute... Other than that, there isn't much more to the label-tag. Just curious as to why you use the design view? The designer usually adds a lot of unnecessary markup to the page. Use the source-view in VS for more control over your markup viz-a-viz the final presentation in the browser.

It's also useful to float a label next to the control it is associated with, i.e.:

Code:
<label 
        style="float:left; width:100px;" 
        for="txtContactPersons">
  Contact Person(s) :
</label>
<input 
        type="text" 
        style="width:200px; display:block;" 
        id="txtContactPersons" />

Obviously, the styling could be done with CSS classes, but that's just to illustrate the idea. Happy markuping! :p

EDIT: Broke up the HTML into separate lines to eliminate scrolling in CODE-tag.

thanks. only using the designer to see how it looks and drop controls :eek:

i'm using a css reference (class="bleble") in my fieldset which contains the labels and controls to do to positioning and styling.

...lol no it isn't really named bleble :D
 

Necuno

Court Jester
Joined
Sep 27, 2005
Messages
58,567
stupid question, but do i always have to pair the <label> with a control or can i use it on its own for example as a heading ?

nevermind :D

Definition and Usage

The <label> tag defines a label for an input element.

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

http://www.w3schools.com/tags/tag_label.asp

update:
after changing my <label> headings out for <asp:label> the magical &nbsp isn't appearing anymore between switch or save just below the <label>. seems my problem was using them without a binding element.
 
Last edited:

FarligOpptreden

Executive Member
Joined
Mar 5, 2007
Messages
5,396
Word of caution: The <asp:label> doesn't render as a <label> to the page, it renders as a <span>! Also, if you want headings on your page, use the proper tags, i.e. <h1>, <h2> and <h3>.
 

Necuno

Court Jester
Joined
Sep 27, 2005
Messages
58,567
Word of caution: The <asp:label> doesn't render as a <label> to the page, it renders as a <span>! Also, if you want headings on your page, use the proper tags, i.e. <h1>, <h2> and <h3>.

cool, i'll have a look into that.
 
Top