Elements Label
Ar label saprot paskaidrojošo tekstu pirms informācijas ievades lodziņa. Ar label palīdzību ir iespējams sasaistīt uzrakstus (norādes) ar formas vadības elementiem.
Elements label satur tikai vienu parametru for. Ja dotā elementa label ir noteikts, tad parametram for ir jāsakrīt ar attiecīgā vadības elementa id.
Nākamajā piemērā parādīta forma lietotāja reģistrēšanai jauno ziņu grupā. Šajā formā label ir tiešā sasaistē ar formas elementiem.
Piemērs:
<html>
<head>
<title>Parakstīšanās uz jauno ziņu grupu</title>
</head>
<body>
<h3>Jauno ziņu grupa</h3>
<form action="http://www.aaazinas.lv/cgi-bin/aaaprog" method="post">
<p>
<input type="text" id="firstname">
<label for="firstname">Vārds</label><br>
<input type="text" id="lastname">
<label for="lastname">Uzvārds</label><br>
<input type="text" name="postal-address" id="email">
<label for="email">e-mail</label><br>
<input type="checkbox" name="subscribe">Parakstīšanās uz jaunākajām ziņām<br>
<hr>
<input type="submit" value="nosūtīt">
<input type="reset" value="atcelt">
</p>
</form>
</body>
</html>
<head>
<title>Parakstīšanās uz jauno ziņu grupu</title>
</head>
<body>
<h3>Jauno ziņu grupa</h3>
<form action="http://www.aaazinas.lv/cgi-bin/aaaprog" method="post">
<p>
<input type="text" id="firstname">
<label for="firstname">Vārds</label><br>
<input type="text" id="lastname">
<label for="lastname">Uzvārds</label><br>
<input type="text" name="postal-address" id="email">
<label for="email">e-mail</label><br>
<input type="checkbox" name="subscribe">Parakstīšanās uz jaunākajām ziņām<br>
<hr>
<input type="submit" value="nosūtīt">
<input type="reset" value="atcelt">
</p>
</form>
</body>
</html>
Rezultāts:
Kodu iespējams rakstīt arī citādi, pielietojot label netiešā sasaistē ar formas elementiem:
Piemērs:
<html>
<head>
<title>Parakstīšanās uz jauno ziņu grupu</title>
</head>
<body>
<h3>Jauno ziņu grupa</h3>
<form action="http://www.aaazinas.lv/cgi-bin/aaaprog" method="post">
<p>
<label>Vārds: <input type="text" id="firstname"></label><br>
<label>Uzvārds: <input type="text" id="lastname"></label><br>
<label>e-mail: <input type="text" id="email"></label><br>
<input type="checkbox" name="subscribe">Parakstīšanās uz jaunākajām ziņām<br>
<hr>
<input type="submit" value="nosūtīt">
<input type="reset" value="atcelt">
</p>
</form>
</body>
</html>
<head>
<title>Parakstīšanās uz jauno ziņu grupu</title>
</head>
<body>
<h3>Jauno ziņu grupa</h3>
<form action="http://www.aaazinas.lv/cgi-bin/aaaprog" method="post">
<p>
<label>Vārds: <input type="text" id="firstname"></label><br>
<label>Uzvārds: <input type="text" id="lastname"></label><br>
<label>e-mail: <input type="text" id="email"></label><br>
<input type="checkbox" name="subscribe">Parakstīšanās uz jaunākajām ziņām<br>
<hr>
<input type="submit" value="nosūtīt">
<input type="reset" value="atcelt">
</p>
</form>
</body>
</html>
Rezultāts: