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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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.
Helykitöltő, alapértelmezett szöveg (placeholder)
Beállíthatunk alapértelmezett szöveget a beviteli mezőknek, hogy ezzel segítsük a felhasználót, hogy milyen adatot várunk oda. Ha a felhasználó bekattint és elkezd gépelni, akkor az alapértelmezett szöveg egyből eltűnik, felülíródik.
Szintaktika
<input type="TÍPUS" placeholder="SZÖVEG">
Code language: HTML, XML (xml)
A placeholder szót követő egyenlőségjel után idézőjelek közé írjuk a megjelentetni kívánt szöveget.
Példa
HTML kód
<form>
<label for="nev">Név
</label>
<input type="text" placeholder="SZÖVEG">
</form>
Code language: HTML, XML (xml)
Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<