Example Navigation

Example 4: Text input control label references form control id

Best Practice Rating: Good

Text box form controls are labeled using the label element, the label.for attribute and the input.id attribute.
The input.id attribute values on form controls need to be unique within the web page (Note: all id attribute values need to be unique for a eb page to validate).
CSS is used to align labels above the text boxes and to provide vertical separation between the text boxes.

Example Start

Up load file

Example End

HTML Source Code

<div class="file">
<label for="file">Up load file</label>
<input type="file" size="30" name="name" id="file"/>
</div>

CSS Source Code

  <style type="text/css">
div.file label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  display: block;
  font-size: 100%;
}

div.file input,
div.file textarea {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  margin-bottom: 1.25em;
  display: block;
}

  </style>