InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tags

  • audio
  • input checkbox
  • label
  • li
  • ol
  • pre
  • template
  • ul
  • video
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag

HTML5 label tag examples

on Mar 2, 2016

Label element (<label>) represents a caption and can be used with one form input element. There are two ways to associate a label to an input element (text, checkbox, radio, etc.)

  1. By placing the input element inside label element.
  2. By assigning the id of input element to the for attribute of label.

Label example with nested input element

Here user can click on name or checkbox label to select/toggle.

<label>Name
  <input type="text" placeholder="First Name" value="">
</label>
<br/><br/>
<label>Checkbox label
  <input type="checkbox" value="checkbox1">
</label>
refresh done
try it online

Label example using attribute for

Here user can click on name or checkbox label to select/toggle.

<label for="name">Name</label>
<input id="name" type="text" placeholder="First Name" value="">
<br/><br/>
<label for="checkbox1">Checkbox label</label>
<input id="checkbox1" type="checkbox" value="checkbox1">
refresh done
try it online

Related

  • label documentation at MDN

Specification

  • W3C HTML5 label specification

Suggested posts:

  1. CSS – round toggle switch using checkbox and label
  2. HTML5 – input placeholder
  3. HTML input checkbox
  4. CSS attribute presence and value selectors
  5. jQuery toggleClass() examples
  6. HTML5 – video tag
  7. CSS :checked – style for selected checkbox and radio
  8. CSS placeholder style
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML tag, HTML5, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2022 InfoHeap.

Powered by WordPress