HTML űrlap elemei (HTML Forms)

A HTML űrlapokkal adatokat kérhetünk be a felhasználótól. Ennek használatáról olvashatsz a cikkünkben. Tanuld meg a HTML űrlapok (Forms) használatát ingyen, online.

0
HTML űrlap, form minta, példa

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.

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