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.

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!