Positioning labels : label « Form « HTML / CSS






  1. HTML / CSS
  2. Form
  3. label

Positioning labels

   

<html>
  <head>
    <title>Positioning labels</title>
    <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12pt;
}

fieldset {
  font-size: 12px;
  padding: 10px;
  width: 500px;
}

span.required {
  font-weight: bold;
  font-size: 20px;
  color: #ff0000;
}

td {
  font-size: 12px;
}
</style>
  </head>
  <body>

<form name="frmExample" action="" method="post">
<fieldset>
<legend>Contact details</legend>

<table>
  <tr>
    <td class="label">Phone number <span class="required">*</span></td>
    <td><input type="text" name="txtTelAreaCode" size="5" />
       <input type="text" name="txtTelNo" size="10" />
  </tr>
</table>

</fieldset>
</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.Label above
23.label display: block;
24.label font-weight:bold;
25.label margin:5px 0;
26.label font-weight:bold;
27.label font-family: "Trebuchet MS", Verdana, Halvetica, Arial;
28.label font-size: 12px;
29.label color: #040507;
30.label display: block;
31.label text-align: right;
32.label width: 100px;
33.Adding underline for labels
34.Place label on the top of a field
35.label text-align: left; text-align: center;
36.Labelled fields
37.Using the label element
38.Implicit labels
39.label float:left; width:100px;
40.Fieldsets and labels
41.Aligning labels with List
42.Block-level labels
43.Top-positioned Text Labels
44.Left-aligned Text Labels