Form lehetővé teszi hozzá az interaktivitást a webes dokumentumokban.

A form tagot alkalmazhatja a weboldalaiban; a vendégkönyvben, megrendelési nyomtatványokon, felmérések készítésében. Alapvető építése html formában ez:

  <FORM>    kezdő elem
  <INPUT>   kérjen információt különböző módon ...
  <INPUT>   ... amennyi és amilyen beviteli mezőben csak szeretné
  </FORM>   form vége

The <INPUT> tag biztosítja az információk különböző beviteli módját. Számos különböző <INPUT> tag létezik.


Form Input-ok

Text

A leggyakoribb TYPE forma <INPUT>a SZÖVEG(TEXT).

<INPUT TYPE=TEXT>

Minden input mezőnek szüksége van az azonosítóra - NAME-re.

<INPUT TYPE=TEXT NAME="ADDRESS">

Amikor a felhasználó beírja a saját címét (pl.  6720 Szeged), ez lesz egy bemeneti érték és párosítható az ADDRESS változóval, így a végeredmény a futtatás után a Mailto Formatter címlesz ADDRESS=6720 Szeged.

Mi történik ha eleve kitöltjük a beviteli mezőt a  VALUE alkalmazásával.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="6720 Szeged">

Ez automatikusan párosítja az értéket a  "6720 Szeged" névvel, kivéve ha a felhasználó megváltoztatja, átírja azt.

Megtudjuk a szövegbeviteli mező méretét (hosszát) határozni.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="6720 Szeged" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="6720 Szeged" SIZE="20">

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="6720 Szeged" SIZE="30">

Megszabhatjuk a beviteli mezőbe írható  karakterek maximális számát.

Pl.:10 karakterban határoztuk meg. Próbáljon meg több karaktert beírni!

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>

Ez olyan mint  TYPE = TEXT csak Önnek nem jelenik meg a szöveg, hanem helyette
pontok jelennek meg a beviteli mezőben. Pl.: jelszó bevitelnél.

<INPUT TYPE=PASSWORD>

Ne feledje, hogy minden <INPUT> tag-nek rendelkeznie kell saját önálló  NAME-el.

<INPUT TYPE=PASSWORD NAME="USER PASSWORD" MAXLENGTH=8>

SIZE, VALUE, és MAXLENGTH TAG-ek itt igencsak jól használhatók. Ezeket a böngésző értelmezi. Ezzel a téves bevitelt, egyszerű ellenőrzést is meg tudunk oldani.

Rádió gombok, jelölő négyzetek

A rádió gombok és jelölő négyzetek lehetővé teszik a felhasználó számára, hogy válasszon a felkínált lehetőségek közül.
Egy rádió gomb felépítése.

<INPUT TYPE=RADIO NAME="választ01">

Adjuknk hozzá még két továbbit.

<INPUT TYPE=RADIO NAME="választ01">
<INPUT TYPE=RADIO NAME="választ01">
<INPUT TYPE=RADIO NAME="választ01">

A gombok közötti sortörést is meg kell oldani!

<INPUT TYPE=RADIO NAME="választ01"><BR>
<INPUT TYPE=RADIO NAME="választ01"><BR>
<INPUT TYPE=RADIO NAME="választ01"><P>

Mindegyik neve megegyezik, mert azonos funkciót látnak el, de....

Minden radió gombhoz kell egyedi értéket rendelnünk a VALUE -val.

<INPUT TYPE=RADIO NAME="választ01" VALUE="MT"><BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="AT"><BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="NT"><P>

És végül felcimkézzük a rádiógombokat.

<INPUT TYPE=RADIO NAME="választ01" VALUE="MT">magyar<BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="AT">angol<BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="NT">német<P>

Lényegében ezzel a rádiógomb kész. Szoktak gombot eleve bejelölté tenni, amit alapértelmezett beállításnak neveznek (ez opcionális).

Milyen nyelvet tanít Ön az iskolájában?<BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="MT" CHECKED>magyar<BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="AT">angol<BR>
<INPUT TYPE=RADIO NAME="választ01" VALUE="NT">német<P>

Természetesen nem csak az elsőt választhatja. A jelölés eredményét a - name/value - párossal küldjük el feldolgozásra.

És most ugyanezt megmutatom a jelölő négyzettel.

<INPUT TYPE=CHECKBOX NAME="P">

Addjunk hozzá még két másik nevűt! 

<INPUT TYPE=CHECKBOX NAME="P"><BR>
<INPUT TYPE=CHECKBOX NAME="T"><BR>
<INPUT TYPE=CHECKBOX NAME="A"><BR>

Minden jelölő négyzet kapja ugyanazt a  VALUE -t.

<INPUT TYPE=CHECKBOX NAME="P" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="T" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="A" VALUE="YES"><BR>

Minden jelölő kapjon cimkét.

<INPUT TYPE=CHECKBOX NAME="P" VALUE="YES"> Portás<BR>
<INPUT TYPE=CHECKBOX NAME="T" VALUE="YES"> Takarító<BR>
<INPUT TYPE=CHECKBOX NAME="A" VALUE="YES"> Adminisztrátor<BR>

És mindig érdemes egy rövid kis szöveggel pontosítani, hogy miért is kell választani!

Milyen munkakört töltenél be szívesen a vállalatnál?<BR>
<INPUT TYPE=CHECKBOX NAME="P" VALUE="YES" CHECKED> Portás<BR>
<INPUT TYPE=CHECKBOX NAME="T" VALUE="YES" > Takarító<BR>
<INPUT TYPE=CHECKBOX NAME="A" VALUE="YES" CHECKED> Adminisztrátor<BR>