WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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="http://www.mekkmuvek.hu/">
        <span>http://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