Eszköztár
52 Kezdőlap - Webszerkesztés - HTML - Űrlap-elemek
ujdomainek.hu

Ű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. e-mail beviteli mező:
    <input type='email'>

    Szerepe az adatok elküldésekor mutatkozik meg: formailag hibás e-mail cím esetén nem enged továbblépni.
  7. szám beviteli mező:
    <input type='number'>
  8. választás értéktartományból:
    <input type='range'>
  9. dátum beviteli mező:
    <input type='date'>

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

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

    (Ha nem működik, a böngésző frissítése lehet szükséges.)
  12. többsoros beviteli mező:
    <textarea cols=40 rows=4></textarea>
  13. választó elem:
    <select>
    	<option>---Válassz!--- </option>
    	<option>Biológia       </option>
    	<option>Fizika         </option>
    	<option>Földrajz       </option>
    	<option>Kémia          </option>
    </select>
  14. választó elem fix mérettel:
    <select size=5>
    	<option>---Válassz!--- </option>
    	<option>Biológia       </option>
    	<option>Fizika         </option>
    	<option>Földrajz       </option>
    	<option>Kémia          </option>
    </select>
  15. 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>
  16. beviteli mező előre definiált adatokkal:
    <input list='programnyelv'>
        <datalist id='programnyelv'>
            <option value='C#'>
            <option value='Java'>
            <option value='PHP'>
            <option value='Python'>
        </datalist>
  17. alaphelyzetbe állító nyomógomb:
    <input type='reset'>
  18. tetszőleges funkciójú nyomógomb, jellemzően JavaScript nyelven történő feldolgozáshoz:
    <input type='button' value='Feldolgozás'>
  19. elküldés 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.
előző oldal random oldal következő oldal


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

2019-02-24 05:58 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 Admin Megfontolandó gondolat, burcsi, köszönöm az ötletet.

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

2021-12-09 08:56 Félegyházi Bence Nagyon Szuper!!!!

2021-12-16 18:15 Papprika Köszi a segítséget




Ú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 tizenegy + nyolc?
Számjegyekkel írja be!



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


© infojegyzet.hu, 2017. szeptember