Az űrlap HTML kódja - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

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