A
fieldset
és alegend:
Egyik elemet sem kötelező használni, de nagyon hasznosnak a komplex űrlapok és prezentációk esetében.
A
A
<html lang="hu">fieldset
elem segítségével szemantikus egységekbe rendezheted az űrlapot. Egy bonyolultabb űrlapon például használhatsz különböző fieldset
-eket a címekhez, a számlázási adatokhoz, a felhasználói szokásokhoz, és így tovább. A legend
elemmel pedig elnevezheted a különböző fieldset
részeket.A
legend
elem feliratát aztán tetszőlegesen formázhatjuk. A fieldset
tulajdonképpen csak egy keret (border
), ezért a border
tulajdonsággal tudjuk eltüntetni, vagy módosítani a fieldset
elemet.<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML fájl</title>
<link href="ch1314.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="parser.php" method="post">
<fieldset>
<legend>Feliratkozás</legend>
<div>
<label for="lastname">Vezetéknév: </label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="firstname">Keresztnév: </label>
<input type="text" name="firstname" id="firstname">
<br>
<label for="email">E-mail: </label>
<input type="text" name="email" id="email">
<br>
<input type="submit" value="Feliratkozás">
</div>
</fieldset>
</form>
</body>
</html>
@charset "utf-8";
label {
float: left;
width: 5em;
margin: auto 1em 0.8em 3em;
text-align: right;
}
form br {
clear: left;
}
form div {
text-align: center;
}
legend {
color: black;
border: 3px solid #009900;
background: #00FF66;
padding: 0 4px;
}
fieldset {
width: 20em;
border: 3px solid #009900;
padding: 10px;
}
Nincsenek megjegyzések:
Megjegyzés küldése