12. fejezet: FORM I. rész
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>
|