HTML Info

Webről, magyarul, mindenkinek

Űrlapok

nincs megjegyzés

Az űrlapok nagyon hasznos segédeszközök, segítségükkel készülhettek el az első, már interaktívnak nevezhető oldalak. Mikor a webszerkesztő űrlapot tesz az oldalra, mindig valami olyasféle a célja, hogy közvetlen kapcsolatot teremtsen munkája olvasójával. Ebben a részben a hivatalos referencia adta lehetőségeket ismertetjük.





FORM

Használata:

<FORM></FORM>

Attribútumai:

  • ACTION= URI Az űrlap kezelő címe
  • METHOD=[ get | post ] (HTTP metódus az űrlap elküldéséhez)
  • ENCTYPE= ContentType (a tartalom típusa)
  • ACCEPT-CHARSET= Charsets(a támogatott karaktercsomagok)
  • TARGET= FrameTarget (a keret (frame), ahol az űrlap elküldésének eredménye megvalósul)
  • ONSUBMIT= Script (elküldött űrlap)
  • ONRESET= Script (törölt űrlapmező)

A HTML 4.0 strict DTD szerint egy vagy több SCRIPT elemet, illetve blokkszintű elemeket tartalmazhat. A transitional DTD szerint már soron belüli elemeket is tartalmazhat, de mindkét esetben tilos újabb FORM tag befoglalása. (Egymásba ágyazás.)

A FORM elemet a következő elemek tartalmazhatják: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET,
IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH.

A FORM tag egy interaktív űrlapot definiál. Az elem űrlap vezérlőket tartalmazhat, méghozzá az interakciós igénytől függően. (SELECT, TEXTAREA, és BUTTON.)

Az űrlap az INPUT, vagy BUTTON elem segítségével küldhető el, amelynél a TYPE=submit értéket állítottuk be. A tartalom pédául egy e-mail címre, vagy egy CGI szkriptnek küldhető el, ha az ACTION attribútumnál megadtuk a megfelelő URI-t (Uniform Resource Identifier – Egységesített Forrás Azonosító). Az ACTION attribútum természetesen mutathat egy Java szerver oldali szkriptre is, amely az űrlap anyagát kezelni hivatott.

A mailto URI (pl.: mailto:htmlinfo@htmlinfo.hu) is megengedett az ACTION attribútum értékeként, de ezt a lehetőséget nem minden böngésző támogatja. Az ilyen böngészők (pl. M$ Internet Explorer) rendszerint megnyitják az alapértelmezett levelezőprogramot egy üres törzsű levéllel. Ezen kívül az egyébként a FORM-ot támogató böngészők között is akad, amelyik nem ad visszajelzést a felhasználónak az űrlap elküldése után.

Az űrlapon összegyűjtött adatok küldésének mikéntje a METHOD, illetve ENCTYPE attribútumok értékeitől függ.Ha a METHOD értéke get (ez az alapértelmezett), az űrlap tartalma HTTP GET kérésként továbbítódik, a form_data és az ACTIONnél megadott URI adatok öszefűzésével.

A get metódus használata megengedi, hogy a teljes információt egy URL-ben tároljuk el. Ez előnyös egyfelől azért, mert lehetővé teszi a mostani böngészőknek, hogy felvegyék ezt az URL-t a könyvjelzői közé, másfelől azért, mert ezzel megakadályozhatjuk az űrlapot nem ASCII karakterek (pl.: “é”, vagy “©”) tárolásában. Ilyenformán viszont szembe kell nézni azzal a problémával, hogy a bekért adat hossza nem lépheti túl a feldolgozó szerver, illetve a böngésző URL feldolgozó kapacitását. Ha 100 karakternél hosszabb az elküldendő anyag, vagy szükséges elküldeni a speciális karaktereket is (márpedig mifelénk ez utóbbi alapvető igény), a METHOD értéke legyen post.

A METHOD=post segítségével az adatok HTTP POST kérésként továbbítódnak, a kérés törzsében. Néhány nagyon ritka kivételtől eltekintve a böngészők ilyenkor nem tudják könyvjelzőként eltárolni a kérést, de cserébe nincsenek megkötések a szöveg hosszára, illetve a karakterkódolásra.

Az ENCTYPE attribútum adja meg a küldéskor használt tartalomformátumot, ez alapértelmezésben application/x-www-form-urlencoded. Ezek a tartalomtípus eredmények név/érték formátumban kerülnek küldésre a szerver felé a következőképpen:

név1=érték1&név2=érték2&…. Az üres karakterek “+”-szal, a kiegészítő karakterek (pl.: “#”)
pedig “%HH”-val lesznek helyettesítve, ahol a HH az ASCII karakter hexadecimális kódja. A sortörések a “%0D%0A” karakterláncolattal lesznek helyettesítve (egy “kocsivissza” és utána egy “újsor” parancs).

Ha az űrlap INPUT tagjénél a TYPE=file attribútum van beíllítva, az ENCTYPE-nak is más értéket kell kapnia: ebben az esetben multipart/form-data lesz az érték. Módosul továbbá a METHOD is, amely ilyenkor kötelezően post értékű. A multipart/form-data típusú adatkérés részletes formátuma a RFC 1867 szabványban van lefektetve.

Az ACCEPT-CHARSET attribútum egy listát definiál azokról a karakterkódolás fajtákról, amelyeket az űrlapkezelő támogat. Értéke egy lista, amelyben az elfogadott karakterkódolások találhatóak, egymástól vesszővel, vagy szünettel elválasztva. Az alapértelmezett érték unknown (ismeretlen) és általában azt az értéket veszi fel, amelyet a FORM-ban található adatok átviteléhez használtunk.

A TARGET attribútumot keretek használatakor kell igénybe venni, meghatározza, hogy a FORM-ra adott válasz melyik FRAME-re lesz hatással. Ha nincs a megadott névvel rendelkező keret, a felhasználó beavatkozása nélkül új ablak nyílik. Van néhány speciális érték is, amelyet itt adunk meg:

  • _blank – a választ egy új, név nélküli ablakban jelenítjük meg,
  • _self – a jelenlegi keretre lesz hatással az akció,
    (Ez az opció jól használható a BASE elem eseti hatástalanítására.)
  • _parent – a hatás a FRAMESET-ben beállított “szülő ablakban” lesz látható,
  • _top – ugyanabban az ablakban keletkezik, ahol a FORM volt, de az összes
    FRAME felett.

Általánosságban a FORM attribútumhoz kapcsolódik egy sor kliensoldali szkript attribútum, ezek megegyeznek a többi elemhez is használható általános esemény-attribútummal. Itt csak kettőt emelnénk ki, ezek az INPUT-hoz kapcsolódnak:

  • onSubmit, ha az űrlapot elküldte a felhasználó;
  • és onReset, ha az űrlap tartalmát a felhasználó törölte.

Tetejére

BUTTON

Használata:
<BUTTON></BUTTON>

Attribútumai:

  • NAME = CDATA (az űrlap kulcsszava /neve/)
  • VALUE = CDATA (a gomb értéke; ezt fogja csinálni a gomb)
  • TYPE=[ submit | reset | button ] (a gomb típusa)
  • DISABLED (hatástalan gomb)
  • ACCESSKEY = karakter (gyorsbillentyű definiálás)
  • TABINDEX = szám (tabulációs elrendezés)
  • ONFOCUS = Script (az az eset, mikor a gombra irányul a fókusz)
  • ONBLUR = Script (mikor a gomb elveszíti a fókuszt)
  • közös attribútumok

Tartalmazhatja a soron belüli elemeket, kivéve a következőket:

A, INPUT, SELECT, TEXTAREA,
LABEL, BUTTON és IFRAME.

Saját magát kivéve minden blokkszintű és soron belüli elem tartalmazhatja.

A BUTTON tag egy küldő (submit), törlő (reset), vagy nyomógombot (“push”, button) definiál. Ezeket létre lehetne hozni az INPUT segítségével is, de a BUTTON sokkal gazdagabb formai lehetőségekkel bír, például használhatunk képet is gombként. Viszont a BUTTON új elem a HTML 4.0-ban, ezért e specifikáció kiadásakor még gyengén támogatták a böngészők.

A TYPE attribútumtól függ a gomb típusa (submit /alapértelmezett/,reset,button). A NAME és VALUE attribútumok határozzák meg a név/érték párost, amelyet a gomb küld a szerver felé lenyomásakor. Ezek az attribútumok lehetővé teszik a fejlesztő számára, hogy több gombot rendeljenek hozzá egy űrlaphoz, más és más funkciókkal.

Néhány példa gombokra:

  • <BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Megváltoztatjuk az információt</BUTTON><BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Folytassuk</BUTTON>
  • <BUTTON ACCESSKEY=S>Submit <IMG SRC="gombkép.gif" ALT="&#10004;"></BUTTON><BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON>
  • <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Rejtsük el a <strong>“pontatlan”</strong>attribútumokat</BUTTON>

Az ACCESSKEY attribútummal egy gyorsbillentyút definiálhatunk, amivel “megnyomhatjuk” a gombot. Bármilyen karakter használható, akár ékezetes is, de így érdemes megadni: “é” helyett: &eacute;.

Az érték nélküli DISABLED attribútummal hatástalaníthatjuk a gombot, nem lehet megnyomni, nem lehet ráfókuszálni, illetve tabulátorral történő navigáció esetén átugorjuk.


A TABINDEX attribútum értéke egy 0 és 32767 közé eső szám, amellyel megadható, hogy tabulátoros navigáció esetén hányadiknak ugorjon a fókusz az adott elemre. Ha 0 az értéke, vagy nincs értéke, akkor minden pozitív TABINDEX értékkel rendelkező elem után kerül csak a sor rá. Minél kisebb az érték, annál előbb kerül rá a fókusz.

Általában a BUTTON elemnél is használhatóak a közös szkript jellegű attribútumok, itt csak a két legfontosabbat emelnénk ki:

  • onFocus, ha a fókusz a gombra kerül;
  • onBlur, ha az elem elveszíti a fókuszt.

Tetejére

FIELDSET

Használata:

<FIELDSET></FIELDSET>

Attribútumai:

Minden közös attribútum használható.

Tartalmazhat egy LEGEND elemet, amelyet blokkszintű és soron belüli elemek követhetnek.

Tartalmazhatják a következő elemek: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH.

A FIELDSET elem egy űrlap vezérlő csoportot definiál. A kapcsolódó űrlapvezérlő elemek csoportosításával a webmester az űrlapot kisebb, könnyebben kezelhető részekre bonthatja, így elkerülve azt a problémát, mikor a felhasználó túl sok kezelőelemmel találja szembe magát egyszerre. A vezérlőelemek csoportosítása azért is segíti a felhasználót, mert a lényegre, az űrlap kitöltésére tud koncentrálni.

Amíg a FIELDSET nem támogatott teljes körben, javasoljuk, hogy minden <P> elemet precízen zárjunk be, vagy alternatív megoldásként ágyazzunk egy üres P bekezdést a FIELDSET-be. Ezzel elérhető, hogy a FIELDSET-et nem támogató böngészők érzékeljék, hogy egy blokkszintű elem kezdődik, és a FIELDSET-et figyelmen kívül hagyják.

A FIELDSET elem törzse egy LEGEND taggel kell kezdődjön, a vezérlőcsoport leírásához. A FIELDSET a LEGEND elemmel kombinálva már bármilyen soron belüli, vagy blokkszintű elemet tartalmazhat, még egy újabb FIELDSET-et is.

Néhány példa:

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

  <FIELDSET>
    <LEGEND ACCESSKEY=I>Contact Information</LEGEND>
    <TABLE>

      <TR>
        <TD>
          <LABEL FOR=name ACCESSKEY=N>Name:</LABEL>
        </TD>
        <TD>

          <INPUT TYPE=text NAME=name ID=name>
        </TD>
      </TR>
      <TR>
        <TD>

          <LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=email ID=email>
        </TD>

      </TR>
      <TR>
        <TD>
          <LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL>
        </TD>

        <TD>
          <TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
        </TD>
      </TR>
    </TABLE>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
    <P>Please SELECT the product(s) that you wish to order:</P>
    <P>

      <LABEL ACCESSKEY=3>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
        <A HREF="/reference/wilbur/">HTML 3.2 Reference</A>
      </LABEL>
      <BR>

      <LABEL ACCESSKEY=4>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
        <A HREF="/reference/html40/">HTML 4.0 Reference</A>
      </LABEL>
      <BR>

      <LABEL ACCESSKEY=S>
        <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
        <A HREF="/reference/css/">Cascading Style Sheets Guide</A>
      </LABEL>
    </P>

  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
    <P>
      <LABEL ACCESSKEY=V>

        <INPUT TYPE=radio NAME=card VALUE=visa> Visa
      </LABEL>
      <LABEL ACCESSKEY=M>
        <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
      </LABEL>

      <BR>
      <LABEL ACCESSKEY=u>
        Number: <INPUT TYPE=text NAME=number>
      </LABEL>
      <BR>

      <LABEL ACCESSKEY=E>
        Expiry: <INPUT TYPE=text NAME=expiry>
      </LABEL>
    </P>
  </FIELDSET>

  <P>
    <INPUT TYPE=submit VALUE="Submit order">
    <INPUT TYPE=reset VALUE="Clear order form">
  </P>

</FORM>

Tetejére

LEGEND

Használata:

<LEGEND></LEGEND>

Attribútumai:

  • ACCESSKEY = Karakter (gyorsbillentyű)
  • ALIGN = [ top | bottom | left | right ] (Igazítás a FIELDSET-en belül)
  • közös attribútumok

Tartalmazhat minden soron belüli elemet, de kizárólag a FIELDSET tartalmazhatja.

A LEGEND tag leírás a FIELDSET-ben öszegyűjtött vezérlőelemekhez. Kizárólag a FIELDSET-en belül, és minden további beágyazott tag előtt kell szerepelnie.

Amíg a LEGEND elem nem támogatott teljes körben, érdemes utána valamilyen blokkszintű elemet tenni, például B, STRONG, vagy BIG. Ezzel jó eséllyel elérhető, hogy a böngésző a kívántnak megfelelően kezelje a leírásunkat.

LEGEND példa

Tetejére

INPUT

Használata:
<INPUT>

Attribútumai:

  • TYPE = [ text | password | checkbox | radio | submit | reset | file | hidden | image | button ] (a bevinni kívánt adathoz igazodó beviteli eszköztípus)
  • NAME = CDATA (az űrlap neve “kulcsszava”)
  • VALUE = CDATA (a mezőben szereplő kezdeti érték)
  • CHECKED (ha rádiógomb a típus, ezzel az opcióval alapból be lehet jelölni)
  • SIZE = CDATA (a szöveges bevitel javasolt maximális mérete, karakter)
  • MAXLENGTH = Szám (a bevihető maximális karakterek száma)
  • SRC = URI (ha kép a típus, itt adható meg az elérési útja)
  • ALT = CDATA (kép esetén itt adható meg alternatív szöveg)
  • USEMAP = URI (kliensoldali “image map”)
  • ALIGN = [ top | middle | bottom | left | right ] (a kép típusú beviteli szköz igazítása)
  • DISABLED (az adott elem letiltása)
  • READONLY (csak olvasható beviteli mező)
  • ACCEPT = ContentTypes (file feltöltés esetén elfogadott média típusok)
  • ACCESSKEY = Karakter (gyorsbillentyű)
  • TABINDEX = Szám (tabulátoros navigáció esetére itt megadható egy sorszám az adott elemnek)
  • ONFOCUS = Script (az elemre irányul a fókusz)
  • ONBLUR = Script (az elem elveszíti a fókuszálást)
  • ONSELECT = Script (az elemben megadott szöveget kijelölte a felhasználó)
  • ONCHANGE = Script (az elem értékét megváltoztatta a felhasználó)
  • Közös attribútumok

Nem tartalmazhat további elemeket, de a BUTTON kivételével az összes blokkszintű
és soron belüli elem tartalmazhatja.

Az INPUT elem egy űrlap vezérlőt definiál, melynek segítségével a felhasználó adatot vihet be (és később elküldheti feldolgozásra).Mivel az INPUT rendkívül népszerű, a HTML 4.0 megengedi blokkszntű, illetve soron belüli elemek keretein belül történő felhasználását, nem kikötés a FORM-on belüli használat. Azért fontos megemlíteni, hogy a régebbi Netscape böngészők nem támogatják ezt a lehetőséget.

Mikor az űrlapot elküldi a felhasználó,- mondjuk egy gombra kattintva – az INPUT elem tartalma elindul a szerver felé. A NAME attribútummal adunk nevet a beviteli mezőnek, később erre tudunk hivatkozni. Természetesen az elküldött adat attól függ, milyen vezérlő eszköz típust alkalmaztunk, illetve a felhasználó milyen adatokat vitt be.

A vezérlő típusát a TYPE attribútummal definiálhatjuk, alapértelmezésben ez “text”, ami egy sima, egysoros szövegbeviteli mezőt jelent a gyakorlatban. A VALUE attribútum adja meg ennek a beviteli mezőnek a kezdeti értékét. A SIZE, illetve MAXLENGTH attribútummal tehetünk javaslatot a maximálisan bevihető adathosszra.

Érdemes figyelembe venni egyébként, hogy míg az egyszerű felhasználónak akadályt jelentenek az ilyesfajta korlátozások, a kicsit is bennfentesebb olvasóknak nem jelentenek problémát: egyszerűen kiveszik ezt az attribútumot, mentik a dokumentunot, és újra elküldik az űrlapot, de immáron korlátozás nélkül. Éppen ezért a szerveroldali űrlapkezelő eszköz
tervezőjének kell arra gondolnia, hogy a feleslegesen bevitt adatok ne okozzanak gondot.

A password a text típus egy különleges változata, a bevitt adat maszkolásra kerül, tipikusan csillagok kerülnek a karakterek helyére, így akadályozva meg a leselkedőket az információ megszerzésében. Viszont azt fontos megemlíteni, hogy ez a módszer alkalmatlan fontos információk (pl.: hitelkártyaszám, stb.) átvitelére, hiszen a bevitt adat egyszerű, szöveges formátumban kerül továbbításra.

A következő példákban egyszerre mutatjuk meg a TEXT, PASSWORD és a LABEL tagek működését:


<P>
 <LABEL ACCESSKEY=U>Felhasználónév:
 <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8>
 </LABEL>

</P>
<P>
 <LABEL ACCESSKEY=P>
 Jelszó:
 <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12>
 </LABEL>
</P

A readonly attribútum új a HTML 4.0-ban, szerepe csupán annyi, hogy a kezdeti értéknek megadott adatot az olvasó ne tudja szerkeszteni, csak olvasni. A text és password típusú beviteli eszközöknél lehet alkalmazni. Fontos tudni, hogy az így védett adat is átvitelre kerül az űrlap elküldésekor. A disabled attribútummal ellenben nemcsak a szerkesztés akadályozhatjuk meg, de teljességgel hatástalaníthatjuk az adott beviteli eszközt, gyakorlatilag, mintha “ott se lenne”. Ebben az esetben a mező tartalma nem kerül továbbításra.

A radio és a checkbox típusok kapcsolót jelentenek, amelyeket a felhasználó tud be-, illetve kikapcsolni. A két típus közötti egyetlen különbség az, hogy a a rádiógombokat muszáj csoportosítani, és egyszere csak egy lehet bejelölve közülök, ez automatikusan történik természetesen. Ehhez az kell, hogy mindegyik azonos csoportba tartozó rádiógombnak ugyanaz legyen a neve (NAME). Az egyedi checkboxok nincsenek egymásra hatással, úgymond önnállóak. A VALUE attribútum ezeknél a típusoknál nagyon fontos, ezzel adjuk meg ugyanis, hogy a bejelölt gomb milyen információt jelképezzen küldéskor. A rádiógomboknál kifejezetten muszáj lennie alapértelmezett opciónak, tehát olyan rádiógombnak, amely már kezdéskor is ki van jelölve.Ezt a CHECKED attribútummal érhetjük el.

A következő példában az azonos nevű rádiógombok közül az egyik alapértelmezésben ki van jelölve, ez jelképezi az alapértelmezett fizetőeszközt.


<P>Kérem, jelölje be, mivel kíván fizetni:</P>
<P>
 <LABEL ACCESSKEY=C>
 <INPUT TYPE=radio NAME="payment_method"
                VALUE="credit card" CHECKED>
   Hitelkártyakártya
 </LABEL>

 <BR>
 <LABEL ACCESSKEY=D>
  <INPUT TYPE=radio NAME="payment_method"
                VALUE="debit card">
   Betéti kártya
 </LABEL>
 <BR>

 <LABEL ACCESSKEY=M>
  <INPUT TYPE=radio NAME="payment_method"
                VALUE="money order">
   Készpénz átutalás
 </LABEL>
 </P>

<P>
<LABEL ACCESSKEY=S>
 <INPUT TYPE=checkbox NAME="send_receipt"
                VALUE="yes" CHECKED>
   E-mailben küldöm el a címzettnek
</LABEL>
</P>

A file vezérlő típus egy mezőt definiál azoknak a felhasználóknak, akik file-t tudnak feltölteni a gépükről. A VALUE attribútum adja meg az alapértelmezett filenevet, amelyet a böngészők nagy része egyébként figyelmen kívül hagy biztonsági okokból. Az ACCEPT attribútum egy listát definiál az elfogadott média típusokról, ezzel segítve a böngészőt a szűrésben. Ezt az opciót is elég gyengén támogatják a böngészők.

Az olyan űrlapoknál, amelyekben az INPUT mező file típusú, muszáj a METHOD=post, illetve a ENCTYPE=”multipart/form-data” értékeket beállítani a FORM tagben.

Az űrlap alapú file feltöltés lehetősége a legtöbb még fejlesztés alatt álló böngészőnél kikerült a funkciók közül, így ajánljuk a webfejlesztőknek, hogy biztosítsanak alternatív megoldást a felhasználóiknak a jövőre nézve.

A következő kódrészletben példát láthatunk arra, hogyan tud feltölteni a felhasználó egy HTML dokuntumot szabványosításra:


<FORM METHOD=post ACTION="/cgi-bin/validate.cgi"
                      ENCTYPE="multipart/form-data">

<P>
Válasszon egy HTML dokumentumot a feltöltéshez! Ha a böngészője
nem támogatja az úrlap alapú file feltöltést, kattintson az
<A HREF="methods.html">alternatív lehetőségek</A> linkre!
</P>
<P>
<INPUT TYPE=file NAME="html_file"
                                   ACCEPT="text/html">
</P>

<P>
<INPUT TYPE=submit VALUE="Validate it!">
</P>
</FORM>

A hidden attribútum lehetővé teszi a webfejlesztőnek, hogy a felhasználó tudta nélkül is szerepeltessen úrlap adatokat, elemeket a dokumentumban. Jó példa erre, ha az úrlapot e-mail címre küldetjük, és nem akarjuk a felhasználó elé tárni feltétlenül a címet. Sok CGI szkript használja ezt az attribútumot változók észrevétlen definiálására. A következő példában láthatjuk, hogyan kell az e-mail címet és a levél tárgyát észrevétlenül elhelyezni az űrlapban.


<INPUT TYPE=hidden NAME=recipient
      VALUE="htmlinfo@htmlinfo.hu">
<INPUT TYPE=hidden NAME=subject
      VALUE="Vélemények, kérdések a HTML-lel kapcsolatban.">

Természetesen ezek az adatok nincsenek megvédve komolyan, hiszen ha valaki elolvassa a HTML dokumentumunk forrását, rögtön hozzájut a “rejtett” információhoz.

A reset típus egy gombot definiál, amely az eredeti állapotába állítja vissza az űrlapot. A VALUE attribútum itt arra szolgál, hogy a böngésző által automatikusan kiírt felirat helyett egyéni szöveg kerüljön az ilyen típusú gombra.

A submit típusú gomb lelke legtöbbször az űrlapoknak, ezzel küldhető el a rendeltetési helyére. A VALUE értéke szabja meg a feliratot a gombon. A NAME attribútummal adhatunk meg egy kulcsnevet a gombnak, erre azért van szükség, hogy több submit gombot definiálhassunk, ha más és más funkciót szeretnénk megvalósítani mindegyikkel.

Az image típus arra való, hogy a gombunk helyett egy általunk megadott képet használjunk submit gomb helyett. Az SRC attribútumban adható meg a kép elérési útvonala, az ALT pedig az alternatív szöveg definiálására való. Az ALT új elem a HTML 4.0-ban, a régebbi böngészők a NAME és VALUE párt mutatják sok esetben helyette. Szöveges böngészők esetére itt találhatunk megoldásokat.

Egy grafikus submit gombra kattintva a kattintás koordinátái is küldésre kerülnek, méghozzá a következő formában: név.x=x-érték és név.y=y-érték, ahol a név a NAME attribútumban, az “x vagy y”-érték pedig a VALUE attribútumban megadottaknak felel meg. Az x értéket a kép bal szélétől, az y értéket pedig annak tetejétől értjük. A USEMAP és a TYPE=image kifejezés kombinációjával a gombból elvileg kliensoldali térkép készíthető, de ez az eljárás nagyon gyengén támogatott. A USEMAP attribútum adja meg a MAP-nek az elérési utakat (URI).

A nem javasolt ALIGN attribútum adja meg a grafikus gomb igazításának módját. A top, middle és bottom értékek a körülvevő szöveg figyelembe vételével jelölik ki az igazítás módját. A left és right értékek “lebegő gombot” definiálnak, ami azt jelenti, hogy a kép a margóhoz igazodik, a szöveg pedig mindenképp körülfutja. Ha mindenképp a gomb alá szeretnénk valmilyen tartalmat helyezni, de igazítani is akarjuk azt, a következő kódrészletet használjuk a gomb után:
<BR CLEAR=left|right|all>

Mint a legtöbb igazításnál, a CSS ez esetben is sokkal bővebb eszköztárat ad kezünkbe.

A button típus egy egyszerű gombot definiál, amelyen a feliratot a VALUE attribútummal, a funkciót pedig az onClick() esemény felhasználásával állíthatjuk be. Az onClick() tipikusan egy gomb lenyomásához rendelt funkció meghatározására alkalmas. Ez a függvény egyszerűen attribútumként használható. Nézzünk egy példát:


<INPUT TYPE=button
    VALUE="Hide non-strict attributes"
	ID=toggler ONCLICK="toggle()">

Ebben a példában a toggle() függvény előre definiált. Végrehajtása a gombra kattintással kezdeményezhető. Amióta <INPUT TYPE=button> lehetőség rendelkezésre áll a HTML-ben, egyre népszerűbb; aki csak teheti, ezt az eljárást választja, hogy elkerülje a rosszul, vagy egyáltalán nem funkcionáló gombokat.

Az előző példa részletesen a következőképpen néz ki:


<SCRIPT TYPE="text/javascript">
<!--
  document.write("<INPUT TYPE=button
             VALUE=\"Hide non-strict attributes\""
             + "ID=toggler ONCLICK=\"toggle()\">");
// -->
</SCRIPT>

A BUTTON elem sokkal bővebb lehetőségeket rejt, de jelen pillanatban messze nem olyan széles körű a támogatottsága, mint az INPUT különböző formáinak.

Az ACCESSKEY és TABINDEX attribútumok minden beviteli eszköznél használhatóak, kivéve természetesen a hidden attribútummal ellátottakat.Az ACCESSKEY gyorsbillentyűt definiál, amellyel könnyebben érhető el az adott beviteli mező. Itt használható bármilyen Unicode karakter, de az ékezeteseket a következő formában kell megadni: (&eacute;).

A TABINDEX attribútum leírása itt található meg.

Az INPUT tagnél is több eseményt lehet szkripttel kezelni, ezek a következők:

  • onFocus, ha az elemre irányul a fókusz;
  • onBlur, ha az elem elveszíti a fókuszt;
  • onSELECT, ha text vagy password típusú szöveget jelölt ki a felhasználó;
  • onChange, ha az elem elvesztette a fókuszt, vagy ha megváltozott az értéke, mióta ráirányult a fókusz.

Tetejére

LABEL

Használata:
<LABEL></LABEL>

Attribútumai:

  • FOR = IDREF (hozzárendelt űrlap)
  • ACCESSKEY = Karakter (gyorsbillentyű)
  • ONFOCUS = Script (az elemre irányul a fókusz)
  • ONBLUR = Script (az elem elveszti a fókuszt)
  • Közös attribútumok

Saját maga kivételével minden doron belüli elem tartalmazhatja, és a BUTTON elem kivételével bármilyen blokkszintű, vagy soron belüli elem tartalmazhatja.

A LABEL tag egy címkét csatol valamilyen űrlap vezérlőhöz. Ezzel az opcióval tovább bővíthetjük a felhasználó lehetőségeit, nemcsak a szokványos egérrel való navigálást biztosíthatjuk így, hanem közvetlen, gyorbillentyűs (hotkey) hozzáférést minden űrlapelemhez.

Minden LABEL elemhez egy és csakis egy űrlapelemet rendelhetünk hozzá. A tag belsejében szerepel a tulajdonképpeni címke, ami bármilyen soron belüli elem lehet, kép, de akár félküövér szöveg is.

A FOR attribútum egyértelműen kijelöli azt az űrlapelemet, amelyhez a LABEL-t hozzá akarjuk rendelni. A FOR attribútum értékének meg kell egyeznie a hozzárendelendő űrlapvezérlő elem ID paraméterével. Abban az esetben, ha nem használjuk a FOR attribútumot, muszáj a LABEL tag törzsében lennie a hivatkozott űrlapvezérlőnek. Egyértelmű tehát, ha bármilyen okból máshol van a LABEL és a hivatkozott űrlapelem (pl. egy táblázat külön celláiban, bekezdésben, stb.) , akkor muszáj az előbbi megoldást alkalmazni, különben nem működik a kívánt gyosbillentyűzési funkció.
A következőben mindkét esetre láthatunk példát:

<TABLE>
  <TR>
    <TD>

      <LABEL FOR=user ACCESSKEY=U>Felhasználó neve:</LABEL>
    </TD>
    <TD>
      <SELECT NAME=user ID=user>
        <OPTION>Jóska</OPTION>

        <OPTION>Pista</OPTION>
        <OPTION>Béla</OPTION>
      </SELECT>
    </TD>
  </TR>

  <TR>
    <TD><LABEL FOR=passwd ACCESSKEY=P>Jelszó:</LABEL></TD>
    <TD><INPUT TYPE=password NAME=password ID=passwd></TD>

  </TR>
</TABLE>
<P>
  <LABEL ACCESSKEY=S>
    <INPUT TYPE=checkbox NAME=save VALUE=yes>
    Mentsük egy cookie-ban a felhasználó beállításait?
  </LABEL>

</P>
<P>
  <LABEL ACCESSKEY=C>
    Ide írd a véleményed:
    <TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA>
  </LABEL>
</P>

Az ACCESSKEY attribútumot a fentiek szerint használjuk tehát, értéke lehet bármilyen Unicode karakter, persze logikusan érdemes felvenni, hogy egyszerű legyen megjegyezni. Az ékezetes és egyéb különlegesebb karaktereket a HTML szerinti kódjával kell megadni, például az “é” karaktert így: &eacute;.

A LABEL elemnél még két fontos attribútumként használható JavaScript eseményt illik megemlíteni a kliensoldali programozás
alapvető igényei szerint, ezek:

  • onFocus, ha az elemre irányul a fókusz;
  • onBlur, ha az elem elvesztette a fókuszt.

Tetejére

SELECT

Használata:

<SELECT></SELECT>

Attribútumai:

  • NAME = CDATA (az űrlap neve, “kulcsszava”)
  • MULTIPLE (több menüpont is kiválasztható egyszerre)
  • SIZE = Szám (a látható opciók száma)
  • DISABLED (letiltás, az elemet így tudjuk ideiglenesen kiiktatni)
  • TABINDEX = Szám (tabulátoros navigáció esetére megadható a fókuszálás sorrendje)
  • ONFOCUS = Script (a fókusz az elemre irányul – /JavaScript esemény/)
  • ONBLUR = Script (az elem elveszti a fókuszt – /JavaScript esemény/)
  • ONCHANGE = Script (másik opciót választott a felhasználó)
  • minden közös attribútum

Tartalmazhat egy vagy több OPTGROUP, vagy OPTION elemet, illetve a BUTTON elem kivételével az összes soron belüli, és blokkszintű elem tartalmazhatja.

A SELECT elem egy opcióválasztó menüt definiál. Bár a SELECT leginkább űrlapban – FORM – használható, a HTML 4.0 megengedi űrlapon kívül használatát is, blokkszintű, vagy soron belüli elemek részeként. Mindazonáltal a Netscape Navigator egyes verziói ezt nem engedik meg.

A SELECT tag tartalmaz egy, vagy több OPTGROUP, vagy OPTION elemet. Az OPTION elem segítségével adhatjuk meg az elemi opciókat, ezeket lehet választani a menüben. Az OPTGROUP használatával pedig logikus csoportba rendezhetjük az opciókat. A NAME attribútumot küldi el a böngésző a kiválasztott opcióval együtt a szerverhez.

Alapértelmezésben a felhasználó csak egy opciót tud kiválasztani egyszerre. A MULTIPLE attribútum használatával azonban elérhetjük, hogy bármennyi menüpont kiválasztható legyen. Az így beállított menüben minden egyes kijelölt opció külön kerül elküldésre a NAME attribútumban beállított name értékkel együtt.

A következő példa egy ilyen többopciós menüre mutat megoldást:


<P>A kereséshez jelöljön ki egy, vagy több kategóriát:
<SELECT NAME=sections MULTIPLE>
<OPTION>Webszerkesztők referenciája</OPTION>
<OPTION>GyIK</OPTION>

<OPTION>Tervezési elemek</OPTION>
<OPTION>Eszközök</OPTION>
<OPTION>Tulajdonságok leírása</OPTION>
</SELECT>
</P>

A DISABLED attriíbútum friss a HTML 4.0-ban, ennek megfelelően csak az újabb böngészők támogatják. Lényege, hogy a vele ellátott SELECT menüt használaton kívül helyezi, nem lehet szerkeszteni, de menüpontot választani sem, ebből kifolyólag a szerver felé semmit nem küld. A fókuszt nem lehet ráirányítani, még tabulátoros navigációval sem.

A TABINDEX attribútum leírása itt található meg.

A SIZE attribútum határozza meg, hogy az opcióválasztó SELECT menünk hány elemet mutasson egyszerre. Alapértelmezésben egyet mutat. Az éppen pillanatnyilag nem mutatott menüelemek is elérhetők természetesen, ha több van belőlük, mint a megadott SIZE attribútum érték, görgetősáv jelenik meg. A SIZE attribútum nagyon hasznos lehet, mikor a SELECT elemet a MULTIPLE attribútummal együtt alkalmazzuk. Ilyenkor kívánatos, hogy minél több menüelemet láthasson egyszerre a felhasználó. Néhány böngésző alapértelmezésben akkorára választja meg a SELECT “doboz” méretét, hogy ne legyen szükség görgetésre. A legtöbb esetben ez nem éppen hasznos a helyhiány miatt. Ilyenkor is javasolt a SIZE használata.

A SELECT elemhez kötött JavaScript események:

  • onFocus, ha az elemre irányul a fókusz;
  • onBlur, ha az elem elvesztette a fókuszt;
  • onChange, ha ez elem elvesztette a fókuszt, vagy
    mióta az ráirányult, az értékét megváltoztatta a felhasználó.

Tetejére

OPTGROUP

Használata:
<OPTGROUP></OPTGROUP>

Attribútumai:

  • LABEL = Szöveg (csoport címke, kötelező)
  • DISABLED (hatásalanítja az opciócsoportot)
  • közös attribútumok

Tartalmazhat OPTION elemet, és csak a SELECT tagje tartalmazhatja.

Az OPTGROUP elem választási lehetőségek egy csoportját definiálja a SELECT-en belül.
Muszáj tartalmaznia OPTION elemeket a választási lehetőségek definiálásához.


A LABEL attribútum egy kommentárt fűz az adott opciócsoporthoz. Ha a minden egyes OPTION tag is megkapja ezt az attribútumot – praktikusan rövidített formában -, a menünk komplett leírást kap, ezzel átláthatóbbá válik.
A következő példa ezt mutatja be:

<P>Melyik böngészőt használod gyakran?
  <SELECT NAME=browser>
    <OPTGROUP LABEL="Netscape Navigator">

      <OPTION LABEL="4.x vagy ujabb">
        Netscape Navigator 4.x, vagy frissebb
      </OPTION>
      <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
      <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>

      <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="4.x vagy ujabb">
        Microsoft Internet Explorer 4.x vagy frissebb
      </OPTION>

      <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
      <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
      <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
    </OPTGROUP>

    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="3.x vagy ujabb">Opera 3.x vagy frissebb</OPTION>
      <OPTION LABEL="2.x">Opera 2.x</OPTION>
    </OPTGROUP>
    <OPTION>Más böngésző program</OPTION>
  </SELECT>
</P>

Az OPTGROUP tag nem túlságosan széles körben támogatott, de szerencsére a kompatibilitást nem adja fel az, aki használja. Azok a böngészők, amelyek támogatják, az adott menüpontot az OPTGROUP és az OPTION LABEL attribútumaiból képesek “összerakni”, ezzel szép átlátható képet adnak.

Az OPTGROUP-ot nem támogató böngészők esetében sincs probléma, ugyanis ezek egyszerűen figyelmen kívül hagyják ezt a taget, és – a példánknál maradva – minden menüpontnál a teljes nevet írják ki menüpontként.

A jelenlegi HTML specifikáció szerint az OPTGROUP csak OPTION elemeket tartalmazhat, tehát egyelőre nem megengedett az egymásba ágyazás. A tervek szerint azonban a HTML következő verziói támogatni fogják a beágyazást, tehát önmagán belül is szerepelhet majd OPTGROUP elem.

A DISABLED attribútum természetesen itt is alkalmazható, hatása pontosan megegyezik a más tageknél megszokottal; teljesen hatástalanítja az elemet, amelyiknél használjuk, a felhasználó nem tudja még a fókuszt se ráirányítani.

Tetejére

OPTION

Használata:

<OPTION></OPTION>

Attribútumai:

  • VALUE = CDATA (a menüpont “értéke”, ezt írja ki a böngésző)
  • SELECTED (az alapértelmezettként kiválasztott menüpont jelölésére)
  • DISABLED (hatástalanítás)
  • LABEL = szöveg (az opció címkéje)
  • Közös attribútumok

Az OPTION elem kizárólag egyszerű szöveget tartalmazhat, hiszen ez adja meg a menüpont látható részét, a kiválasztható felíratot. Két elem tartalmazhatja, ezek a SELECT, és természetesen az OPTGROUP.

Az OPTION tag egy menüpontot definiál a SELECT-en belül. A VALUE attribútummal adható meg, mit is küldjön el feldolgozásra az adott menüpont, mikor a felhasználó kiválasztja.

VALUE attribútum hiányában ez az érték a szöveg lesz, ami az OPTION-on belül szerepel.

A SELECTED attribútum alkalmazásával kijelölhető egy alapértelmezésben is kiválasztott menüpont. Egyszerre csak egy menüpontot tehetünk így kiválaszottá, leszámítva azt az esetet, ha a SELECT MULTIPLE attribútumot kapott. (Ekkor több menüpont választható ki, és ez érvényes a SELECTED attribútum alkalmazásakor is.)

Ha a SELECT elem nem tartalmaz sem MULTIPLE, sem pedig SIZE attribútumot, a legtöbb böngésző önkényesen (és helytelenül) kiválaszt egy menüpontot. Hogy biztosan egy megfelelő menüpont legyen kiválasztva, a készítőnek érdemes használnia tehát a SELECTED attribútumot. Ha nincs olyan menüpont, amit érdemes kezdetben is kiválasztottá tenni, akkor praktikus megoldásként kínálkozik egy biankó menüpont beiktatása. Ennek semmi különleges funkciója nincs, csak azért helyezzük a menübe, hogy alapértelmezett “opcióként” kiválasztható legyen.
A következő példa rávilágít a mikéntre:

<SELECT NAME="csaladi_allapot">

<OPTION SELECTED VALUE="">Válassz!</OPTION>

<OPTION>Hajadon/Nőtlen</OPTION>

<OPTION>Férjezett/Nős</OPTION>

<OPTION>Külön él</OPTION>

<OPTION>Elvált</OPTION>

<OPTION>Özvegy</OPTION>

</SELECT>

A DISABLED attribútummal hatástalanítható ez a tag is, a menüpont “ott van”, de nem használható semmire, nem lehet ráirányítani a fókuszt, és nem is választható az ezzel az attribútummal ellátott elem.

A LABEL opció leírása itt található, használata szorosan összefügg az OPTGROUP tagnél tárgyaltakkal.

Tetejére

TEXTAREA

Használata:
<TEXTAREA></TEXTAREA>

Attribútumai:

  • NAME = CDATA (az elküldött űrlaphoz tartozó szövegmező kulcsszava)
  • ROWS = szám (sorok száma)
  • COLS = szám (oszlopok száma)
  • DISABLED (hatástalanítás)
  • READONLY (csak olvasható a tartalom)
  • ACCESSKEY = karakter (gyorsbillentyű definiálása)
  • TABINDEX = szám (sorszám tabulátoros navigációnál)
  • ONFOCUS = Script (az elemre irányul a fókusz)
  • ONBLUR = Script (az elem elveszíti a fókuszt)
  • ONSELECT = Script (az elemben tárolt szöveget a felhasználó kiválasztotta)
  • ONCHANGE = Script (az elem értékét megváltoztatta a felhasználó)
  • Közös attribútumok

Csak a megjelenítendő, vagy a felhasználó által bevitt szöveget tartalmazhatja. Tartamazhatják a blokkszintű-, illetve soron belüli elemek a BUTTON kivételével.

A TEXTAREA elem egy többsoros szövegbeviteli mezőt definiál. Ez a tag leginkább a FORM elemen belül használható, de a HTML 4 szerint tartalmazhatják a blokkszintű- és soron belüli elemek is a BUTTON kivételével. A Netscape Navigator régebbi kiadásai viszont csak a FORM-on belül elhelyezett TEXTAREA elemeket jeleníti meg.

A TEXTAREA elem értéke alapértelmezésben a benne elhelyezett illetve bevitt szöveg, amely nem tartalmazhat HTML elemeket. Az űrlap küldésekor a TEXTAREA elem tartalma, illetve a NAME attribútumban megadott név név/érték (name/value) formában továbbítódik.

A ROWS és COLS attribútumok feltétlenül szükségesek (kötelező megadni nekik értéket), ezek adják meg a szövegbeviteli mező sorainak, illetve oszlopainak számát, természetesen csak a grafikus böngészők esetében. Ezek az értékek csak elméletiek, mert elvileg bármekkora szöveg bevihető, csak javaslat, nemmegszorítás az értékük. Azonban a legtöbb böngészőnél mégiscsak van korlátozás, mégpedig 32, vagy 64kbyte. Ennél nagyobb méretű szöveges adat em vihető be általában a TEXTAREA tag segítségével.
Mint más beviteli lehetőséggeknél, itt is a szerveroldali kezelő programozójának a feladata megfelelően korlátozni a feldolgozható adatmennyiséget.

A READONLY attribútummal elérhető, hogy ne lehessen módosítani a TEXTAREA elem kezdeti tartalmát, de ez az érték természetesen küldésre kerül. A DISABLED attribútum itt is ugyanazt a funkciót tölti be, mint más tageknél, úgymond hatástalanítja az elemet, nem lehet módosítani a tertalmát, de még csak a fókuszt sem lehet ráirányítani, sem egérrel, sem pedig tabulátoros navigációval.

Az ACCESSKEY attribútum gyorsbillentyű definiálására való, megadható egy karakter, mellyel a fókusz azonnal az adott szövegbeviteli mezőre vihető. Lehet közvetlenül alkalmazni, de lehet a LABEL elemmel is kombinálni. Gyorsbillentyűként lehet ékezetes és egyéb speciális karaktereket is alkalmazni, de ilyenkor a HTML-ben megszokott kódokat szükséges megadni, pl így: “é” = &eacute;.

A TABINDEX attribútum leírása itt található meg.

Sok más hasonló funkciójú elemhez hasonlóan a TEXTAREA taghez is kapcsolhatók attribútumként a legfontosabb JavaScript események függvényei, ezek a következők:

  • onFocus, ha a fókusz az elemre irányul;
  • onBlur, amikor az elem elveszíti a fókuszt;
  • onSelect, ha az elemben lévő szöveget a felhasználó kiválasztja;
  • onChange, ha az elem elvesztette a fókuszt, vagy megváltozott az értéke, mióta a fókusz ráirányult.

Írta: htmlinfo

2009. 08 30 at 6:54 am

Kategória:

Megjegyzés hozzáfűzése