logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Az űrlap HTML kódja



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

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.