A felhasználóknak segít a placeholder tulajdonságnál megadott szöveg, az elvárt formátum begépelésében mindaddig, amíg el nem kezdi a gépelést. Ekkor eltűnik. Éppen ezért a segítséget span elemben is elhelyezzük, amit viszont csak akkor fogunk megmutatni, ha az adott beviteli mező aktívvá válik.
A label_1 osztályt és az egyedi azonosítókat is felhasználjuk a stílusdefiníciók elkészítésénél.
A név, jelszó és az üzenet beírását kötelezővé tesszük a required tulajdonság használatával, amit ellenőrizni is fogunk.
Példa:
Forráskód
<form action="#" method="post" id="form_id">
<h2>Kapcsolatfelvételi űrlap</h2>
<fieldset class="felasznalo">
<legend> Felhasználó adatok: </legend>
<p><label for="name" class="label_1">Név</label>
<input type="text" name="name" id="name" placeholder="Mekk..." required>
<span>Mekk Elek</span></p>
<p><label for="email" class="label_1">E-mail</label>
<input type="email" name="email" id="email" placeholder="elek@..." required>
<span>elek@mekkmuvek.hu</span></p>
<p><label for="url" class="label_1">Honlap</label>
<input type="url" name="url" id="url" placeholder="https://www.mekkmuvek.hu/">
<span>https://www.mekkmuvek.hu/</span></p>
</fieldset>
<fieldset class="targy">
<legend>Üzenet tárgya:</legend>
<input type="radio" name="info" id="vasar_info" value="vasar_info" class="radio">
<label for="vasar_info" >Vásárlási információk</label>
<img src="webdev_help_16.png" ><br>
<input type="radio" name="info" id="termek_info" value="termek_info" checked>
<label for="termek_info">Termékinformációk</label><br>
<input type="radio" name="info" id="szal_info" value="szal_info" >
<label for="szal_info">Szállítási információk</label>
</fieldset>
<fieldset>
<legend>Üzenet:</legend>
<label for="szoveg">Írja meg üzenetét!</label><br>
<textarea name="szoveg" id="szoveg" rows="4" cols="30"
placeholder="Üzenet szövege..." required></textarea>
</fieldset>
<p style="font-weight:bold"><img src="...png" >-el jelölt
mezők kitöltése kötelező. </p>
<p class="submit" ><input type="submit" value="Elküld" /></p>
</form>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_urlap_info_elrendez_01.html