szövegtagolás tartalom tablazatok

  1. Ûrlapok
  2. Az ûrlapokat már a HTML 2-ben bevezették. Használatával egészen interaktív oldalak készíthetõek. Az interakció abban nyilvánul meg, hogy a dokumentum készítõje a normál HTML szövegeken kívül különféle beviteli és választómezõket helyezhet el az oldalon, amelyek segítségével információt közölhet a rendszerrel. Ezen mezõk mindegyikének nevet kell adni a NAME paraméter használatával. A mezõnevek a mezõk tartalmával együtt jutnak el a szerveren mûködõ feldolgozóprogramhoz, ami általában egy szkript. Ez a szkript vagy program kiértékeli az adatokat, az eredmények ismeretében összeállít egy HTML oldalt és elküldi a felhasználóhoz.

    Az ûrlapok HTML kódja a <FORM>...</FORM> tag-ek között elhelyezett gombokból, beviteli, illetve választómezõkbõl áll. A <FORM> paraméterei az ACTION, a METHOD és az ENCTYPE lehetnek. Az elsõvel az ûrlap feldolgozásáért felelõs szkript URL-jét adjuk meg. Az ûrlapon elhelyezett adatokat kétféle módon küldhetjük el a szervernek feldolgozásra. Az egyik a METHOD=GET metódus használatával, ebben az esetben az elküldendõ adatok az ACTION-ban meghatározott URL-hez kapcsolódnak. A GET használatának viszont van egy hátránya, hogy a legtöbb szerver csak 256 karakter hosszú URL-t képes elfogadni, az ettõl hosszabbakat csonkolja. Tehát ha adatainkal átlépjük ezt a határt, adatvesztés lép fel. A másik és egyben a nagyobb terjedelmû ûrlapok elküldésére alkalmas megoldás a METHOD=POST metódus. Hatására az ûrlap tartalmát nem az URL-hez csatolja a böngészõprogram, hanem egybõl a feldolgozó szkripthez továbbítja. Az ENCTYPE paraméterrel az elküldött adatok kódolási módszerét állíthatjuk be. Az alapértelmezett az application/x-www-form-urlencoded", ami gyakorlatilag annyit jelent, hogy a kérdõív egyes mezõinek nevei és az adott mezõ értékei közé = jelet rak, az ilyen mezõ-érték párokat & jelekkel választja el, a szóközöket lecseréli + jelekre, és minden speciális karaktert (ékezetes, vagy kódolásnál felhasznált karakterek) egy %XX típusú jelre cserél, ahol XX a karakter hexadecimális ASCII kódja." Az általánosan használható kódolási típusukról a függelék [2] ad felvilágosítást.

    Az ûrlapok feldolgozásának eredménye általában egy HTML oldal. Így keretes (frame) oldalszerkezet használata esetén felmerülhet az a kérdés, hogy az elkészült oldal melyik keretben jelenjen meg. A megoldás a <FRAME> tag TARGET paraméterének adott megfelelõ érték.

    1. Beviteli mezõk
    2. Az ûrlapokon használható beviteli mezõk egyik legegyszerûbb változata a szövegbemenet. Megadása a következõ:

      <INPUT NAME="név" TYPE=TEXT VALUE="szöveg" SIZE=mezõ_szélesség MAXLENGTH=bemenet_hossza>
      Beviteli szövegmezõ

       

      Az így elõállított beviteli szövegmezõ a SIZE paraméterrel meghatározott szélességû lesz. A MAXLENGTH paraméterrel beállíthatjuk a beírandó szöveg maximális hosszát, ha például kisebbre szeretnénk, mint a mezõszélesség. A VALUE paraméterrel pedig alapértelmezett értéket adhatunk a mezõnek, de ezt a felhasználó tetszése szerint megváltoztathatja. A beviteli mezõkhöz használhatjuk még a DISABLED attribútumot is, minek eredménye képpen a mezõ látható lesz, akár egy elõre definiált értékkel is, de nem lehet beleírni, illetve azt megváltoztatni.

      Egy másik beviteli szövegmezõ a PASSWORD típusú.

      <INPUT NAME="név" TYPE=PASSWORD VALUE="szöveg" SIZE=mezõ_szélesség MAXLENGTH=bemenet_hossza>
      Password típusú beviteli szövegmezõ

       

      Ez a fajta mezõ abban különbözik az elõzõtõl, hogy itt a beírt szöveg nem látható, helyette annyi csillag jelenik meg ahány karaktert bevittünk. A paraméterei ugyanúgy használatosak mint a text típusú beviteli mezõknél.

      Hosszabb, többsoros szövegrészek bevitelére a <TEXTAREA>...</TEXTAREA> tag alkalmas. Ennek hatására egy kis editorablak jelenik meg a képernyõn, amibe többsoros szöveg is beírható. A szövegbeviteli mezõkhöz hasonlóan a <TEXTAREA>-nak is megadhatunk alapértelmezett szöveget, amit a felhasználó ugyancsak megváltoztathat.

      <TEXTAREA NAME="név" ROWS=sorok COLS=oszlopok>
      Szöveg
      </TEXTAREA>

      Editorablak

       

    3. Választómezõk
    4. A fentiekben olyan mezõkrõl volt szó, amelyeknek a tartalmát a felhasználó szabadon megváltoztatta. A választómezõknek pedig mindegyiknek meghatározott értéke van és attól függõen, hogy milyen típusú az adott mezõ, egyszerre egyet vagy akár többet is kiválaszthatunk közülük. Abban az esetben amikor több mezõt is kiválaszthatunk, checkbox típusú választómezõrõl beszélünk. A CHECKED paraméterrel a dobozt elõre beixeltnek definiálhatjuk.

      Autóalkatrész vásárlás
      <INPUT TYPE="CHECKBOX" NAME="doboz1" VALUE="" CHECKED> Motor
      <INPUT TYPE="CHECKBOX" NAME="doboz2" VALUE=""> Kuplung
      <INPUT TYPE="CHECKBOX" NAME="doboz3" VALUE=""> Kerekek

      Autóalkatrész vásárlás
       Motor  Kuplung  Kerekek

      Ha olyan választómezõk csoportjáról van szó, ahol egyszerre csak egy mezõ lehet kiválasztva, akkor rádiógombokról beszélünk. A rádiógombokat a fentiekhez hasonlóan az

      <INPUT TYPE=RADIO NAME="név" VALUE="rádiógomb_értéke">

      Rádiógomb-csoportokat a NAME paraméter egyformára állításával hozunk létre. A checkbox-szal ellentétben a rádiógomb VALUE paraméterének mindig kell értéket adni, mert a gombcsoportból valamelyik biztosan kiválasztott lesz.

      Éttermek besorolása:
      1. oszt. 2. oszt. 3. oszt.

      Abban az esetben, ha hosszabb listáról szeretnénk választani, a legördülõ menük alkalmazása sokkal célravezetõbb. A menük elkészítése a <SELECT>...</SELECT> tag-ek között megadott listaelemek felsorolásával lehetséges. A <SELECT>-nek a SIZE paraméter segítségével megadható az a listaelemszám, ami látszik az ablakban. Ha több eleme van a listának, akkor a lista oldalán elhelyezett gördítõmenü aktivizálódik és a lista gördíthetõvé válik. Viszont SIZE=1 esetén nem lista, hanem legördülõ menü jelenik meg. A <SELECT>-nek megadható MULTIPLE paraméter hatására a lista mûködése checkbox-szerûvé válik. Ebben az esetben egyszerre több elem is kiválasztható.

    5. Rejtett ûrlapmezõk
    6. <INPUT TYPE=HIDDEN>

      Ezt az elemet a felhasználó nem látja, tehát módosítani sem tudja. Ennek akkor van jelentõsége, ha egy kérdõív már egy program által elõállított, egyénre jellemzõ oldalt tartalmaz, és a kérdõív feldolgozásánál erre az egyénre jellemzõ információra szükség lehet. A megjelenítõ a láthatatlan elemekhez tartozó értékeket is elküldi.

    7. Lépegetés ûrlapmezõk között
    8. Az ûrlapok bevezetésekor még kizárólag egérrel lehetett a különbözõ ûrlapmezõk között navigálni, illetve egyes böngészõk megengedték a TAB billentyû használatát is. Még így, egérrel történõ navigálás esetén is pontosan a kiválasztandó mezõre kellett kattintani, nem volt elég csupán a mezõhöz tartozó szövegre bökni. Erre nyújt megoldást a <LABEL>...</LABEL> tag, ami között elhelyezett mezõ feliratán kattintva a mezõ aktivizálódik. Használata:

      <LABEL>
      <INPUT NAME="név" VALUE="hangszóró" TYPE=CHECKBOX>Hangszóró
      </LABEL>

      A késõbbiek folyamán bevezették az ACCESKEY paramétert, amelynek értékül egy billentyûkódot adunk meg. A megadott billentyû megnyomásakor az adott ûrlapmezõ aktiválódik. Ezenkívül bevezetésre került az ûrlapmezõk egy új paramétere, a TABINDEX. Segítségével beállíthatjuk, hogy az ûrlapmezõk a TAB billentyû többszöri megnyomására milyen sorrendben aktiválódjanak. Értéke mindig egy szám. Két egyforma TABINDEX-û mezõt ne használjunk!

    9. Ûrlapok tartalmának elküldése
    10. Az ûrlapon bekért adatainkat a böngészõprogram név és a hozzá tartozó érték adatpárként küldi el feldolgozásra. Az elküldési mechanizmust HTML-ben két egymáshoz hasonló módon valósíthatjuk meg. Az egyik, hogy az INPUT beviteli mezõ típusának SUBMIT értéket adjuk. Hatására megjelenik egy nyomógomb, amire rákattintva elküldi az adatokat. A másik megoldás, hogy gomb helyett képet használunk fel. Ebben az esetben a TYPE attribútumnak az IMAGE értéket kell adni, majd az SRC paraméternek megadjuk a képforrás helyét. Az adatok elküldése után az eredeti állapot visszaállítására a RESET típusú beviteli mezõ, azaz nyomógomb alkalmas. A nyomógombokon megjelenõ feliratokat a gombok VALUE paraméterében adhatjuk meg.

      <INPUT TYPE=SUBMIT VALUE="Elküld">
      <INPUT TYPE=RESET VALUE="Töröl">

    11. Fájlok elküldése ûrlapon kerestül
    12. Adatok elküldésén túl természetesen mód van egyéb típusú fájlok elküldésére is. Ehhez az <INPUT> tag további paraméterének, a FILE-nak az ismeretére és használatára van szükség. Hatására megjelenik egy szöveges beviteli mezõ és mellette egy "Tallózás..." feliratú nyomógomb. A gomb megnyomásakor egy dialógusdoboz áll a rendelkezésünkre, amely segítségével kiválaszthatjuk az elküldeni kívánt fájlt. A FILE attribútum mellett használhatjuk továbbá az ACCEPT-et is, amivel korlátozhatjuk a választási lehetõséget bizonyos fájltípusokra. Értéke a MIME típusok vesszõvel elválasztott felsorolása. Például ACCEPT="image/gif, image/bmp", ami azt jelenti, hogy a bmp és a gif kiterjesztésû képeket engedjük kiválasztani. Ha a fájl kiválasztását megerõsítettük, akkor a böngészõ betölti azt és más ûrlapmezõkkel együtt továbbításhoz kódolja.


      <FORM ACTION="" METHOD="POST">
      <INPUT TYPE="FILE" NAME="FILE">
      </FORM>
szövegtagolás tartalom tablazatok