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

<input type="text">
Code language: HTML, XML (xml)

>> 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

<input type="radio">
Code language: HTML, XML (xml)

>> 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

<input type="checkbox">
Code language: HTML, XML (xml)

>> 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

<input type="button">
Code language: HTML, XML (xml)

>> 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

<input type="submit">
Code language: HTML, XML (xml)

>> 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

<form>

  <label for="nev">Név
</label>
  <input type="text" id="nev" name="nev">

</form>
Code language: HTML, XML (xml)

>> 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

<form>

  <label for="nev">Név
</label>
  <input type="text"  placeholder="SZÖVEG">

</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!