2014. február 23., vasárnap

Mire jó a fieldset és legend elemek?

fieldset és alegend: Egyik elemet sem kötelező használni, de nagyon hasznosnak a komplex űrlapok és prezentációk esetében.
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.

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.

<html lang="hu">
<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

Norvég feladat

A feladathoz szükséges képek, minta és adatbázis elérhetősége: https://github.com/latiza/norv-gfeladat/