
HTML űrlap elemei (HTML Forms)
A HTML nyelv segítségével készíthetünk HTML űrlapokat (angolul HTML Forms) is, amelyek funkciója, hogy adatot gyűjtsenek a felhasználótól. De ennek segítségével akár egy kérdőívet is elkészíthetünk rendkívül egyszerűen.
A <form> elem
Ahhoz, hogy egy HTML űrlapot elkészítsünk a HTML <form> elemét kell használnunk, melynek szintaktikája így néz ki:
<form>
TARTALOM
</form>
Code language: HTML, XML (xml)
A “TARTALOM” helyére jönnek a különböző bemeneti elemek, például a szövegmező, a jelölőnégyzet vagy a rádiógomb.
A leggyakoribb űrlap elemek
A leggyakoribb űrlap elem az <input> elem, amely önmagában semmit sem ér. Szükséges hozzáadnunk egy type kiegészítést, ahol megmondjuk, hogy milyen bemeneti elemet szeretnénk létrehozni.
Szöveg
Egy rövid szövegbeviteli mezőt hoz létre.
Szintaktika
<input type="text">
Code language: HTML, XML (xml)
Példa
HTML kód
<input type="text">
Code language: HTML, XML (xml)
Eredmény
Rádiógomb
Egy rádiógombot hoz létre, ahol egyszerre csak egy lehetőséget választhatunk.
Szintaktika
<input type="radio">
Code language: HTML, XML (xml)
Példa
HTML kód
<input type="radio">
Code language: HTML, XML (xml)
Eredmény
Jelölőnégyzet
Egy jelölőnégyzetet hoz létre, amit tetszésünk szerint jelölhetünk be, vagy hagyhatunk üresen.
Szintaktika
<input type="checkbox">
Code language: HTML, XML (xml)
Példa
HTML kód
<input type="checkbox">
Code language: HTML, XML (xml)
Eredmény
Gomb
Egy kattintható gombot hoz létre.
Szintaktika
<input type="button">
Code language: HTML, XML (xml)
Példa
HTML kód
<input type="button">
Code language: HTML, XML (xml)
Eredmény
Beküldés
Az űrlap beküldéséhez használatos gombot hoz létre.
Szintaktika
<input type="submit">
Code language: HTML, XML (xml)
Példa
HTML kód
<input type="submit">
Code language: HTML, XML (xml)
Eredmény
Címke
Az űrlapon belül ezt használjuk, ha szeretnénk feliratkozni a fentebb említett elemek egyikét.
Szintaktika
<label for="AMIT.SZERETNÉNK.FELIRATOZNI">SZÖVEG</label>
Code language: HTML, XML (xml)
A for után annak az elemnek az azonosítója (id) jön, amelyhez kapcsolódik a címkénk.
Példa
HTML kód
<form>
<label for="nev">Név
</label>
<input type="text" id="nev" name="nev">
</form>
Code language: HTML, XML (xml)
Eredmény
A fenti példát megnézve a <form>-al definiáltuk, hogy ez egy űrlap lesz, majd létrehoztunk egy label-t, amibe a for-hoz megadtuk a “nev” szót, ami az alatta lévő input type-unk id-ja.