33 Kezdőlap - Webszerkesztés - HTML - Űrlap-elemek

Űrlap-elemek

megvalósítása HTML-ben

Jegyzet

Tekintsük át a weboldalak űrlapjain (formjain) leggyakrabban használatos párbeszédelemeket!
  1. egyszerű (egysoros) beviteli mező:
    <input type='text'>
  2. jelszó beviteli mező:
    <input type='password'>
  3. jelölőnégyzet (checkbox):
    <input type='checkbox'> Egyetértek...
    Egyetértek...
  4. kiválasztó gomb (rádiógomb):
    <input type='radio' name='gender'> fiú
    <input type='radio' name='gender'> lány
    fiú
    lány
  5. fájl-tallózó:
    <input type='file'>
  6. szám beviteli mező:
    <input type='number'>
  7. választás értéktartományból:
    <input type='range'>
  8. dátum beviteli mező:
    <input type='date'>

    (Ha nem működik, a böngésző frissítése lehet szükséges.)
  9. időpont beviteli mező:
    <input type='time'>

    (Ha nem működik, a böngésző frissítése lehet szükséges.)
  10. színválasztó mező:
    <input type='color'>

    (Ha nem működik, a böngésző frissítése lehet szükséges.)
  11. többsoros beviteli mező:
    <textarea cols=40 rows=4></textarea>
  12. választó elem:
    <select>
    	<option>---Válassz!--- </option>
    	<option>Biológia       </option>
    	<option>Fizika         </option>
    	<option>Földrajz       </option>
    	<option>Kémia          </option>
    </select>
  13. választó elem a lehetőségek csopotosításával:
    <select title='Válassz úticélt!'>
        <option disabled=disable selected>---Válassz!--- </option>
    
        <optgroup label='Ausztria'>
            <option>Neusiedler See</option>
            <option>Wolfgangsee</option>
            <option>Wörthersee</option>
        </optgroup>
    
        <optgroup label='Olaszország'>
            <option>Lago di Como</option>
            <option>Lago di Garda</option>
        </optgroup>
    
        <optgroup label='Szlovénia'>
            <option>Blejsko jezero</option>
            <option>Bohinjsko jezero</option>
        </optgroup>
    </select>
  14. alaphelyzetbe állító nyomógomb:
    <input type='reset'>
  15. nyomógomb, jellemzően JavaScript nyelven történő feldolgozáshoz:
    <input type='button' value='Feldolgozás'>
  16. nyomógomb, jellemzően PHP nyelven történő feldolgozáshoz:
    <input type='submit'>

További részletekért érdemes felkeresni a w3schools.com HTML Form Elements oldalát.

Fontos!

1.
A párbeszédelemek feldolgozhatóságának szinte mindig feltétele, hogy azok egy űrlapon (formon) legyenek elhelyezve: Ennek hiányában pl. még a reset gomb sem fogja tudni alaphelyzetbe állítani a form elemeit - hiszen nincs is form.

2.
A párbeszédelemek HTML-ben történő megjelenítése önmagukban semmilyen interakciót nem valósítanak meg. A feldolgozáshoz programozásra, tehát pl. JavaScriptre, vagy PHP-ra van szükség.


Eddig 3 hozzászólás van a témához:

2019-02-24 05:58:33 burcsi Üdvözlöm!

Néhány szót erről is érdemes lenne ejteni,
mert így "haszontalan" az egész:

<form method='post' action='...'>

2019-02-24 17:46:04 Admin Megfontolandó gondolat, burcsi, köszönöm az ötletet.

2019-03-08 07:19:47 Bálint007 Köszi, ez többet segített, mint a w3
Köszönöm!




Új hozzászólás:
E-mail cím:


Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.

Név:


Ez a név fog megjelenni az Ön hozzászólásai mellett.

Mennyi tizennégy + három?
Számjegyekkel írja be!



Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.


© infojegyzet.hu, 2017. szeptember