Block-level labels : label « Form « HTML / CSS

Block-level labels

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Block-level labels</title>
  <style type="text/css">
  ul { list-style: none; margin: 0; padding: 0; }
  li { margin: .2em 0; }
  
  #info label { display: block; }
  </style>
</head>

<body>
  
<form id="info" method="post" action="/cgi-bin/formhandler.cgi">
  <ul>
    <li><label>Your name</label> <input type="text" /></li>
    <li><label>Your E-mail address</label> <input type="text" /></li>
    <li><label>Your telephone number</label> <input type="text" /></li>
  </ul>
</form>

</body>
</html>

Related examples in the same category

1.	'label' creates a label and associates it with another element
2.	label:after
3.	Using the label for element
4.	Set style for form label
5.	Set font for label
6.	Use different font for label and other form controls
7.	Set margin-top and display style for label
8.	Set label control for right text alignment, padding right 20px
9.	Set label after style
10.	Set color, background color and font for a label control
11.	Set Label padding and text transformation
12.	Set label font family and font size
13.	Inline label
14.	Label style text-align: right
15.	label background-color: pink;
16.	label color: black;
17.	label font-weight: bold;
18.	label padding: 4px;
19.	label text-transform: uppercase;
20.	label font-family: Verdana, Arial, Helvetica, sans-serif;
21.	label font-size: xx-small;
22.	Positioning labels
23.	Label above
24.	label display: block;
25.	label font-weight:bold;
26.	label margin:5px 0;
27.	label font-weight:bold;
28.	label font-family: "Trebuchet MS", Verdana, Halvetica, Arial;
29.	label font-size: 12px;
30.	label color: #040507;
31.	label display: block;
32.	label text-align: right;
33.	label width: 100px;
34.	Adding underline for labels
35.	Place label on the top of a field
36.	label text-align: left; text-align: center;
37.	Labelled fields
38.	Using the label element
39.	Implicit labels
40.	label float:left; width:100px;
41.	Fieldsets and labels
42.	Aligning labels with List
43.	Top-positioned Text Labels
44.	Left-aligned Text Labels