HTML

Kép méretének megadása

A böngésző ugyan a méret megadása nélkül is meg tudja jeleníteni a képet, mégis célszerű a width és height tulajdonságokat megadni. Lassú kapcsolat vagy sok nagy képesetén kimondottan zavaró lehet, amikor egy újabb kép letöltődésekor – az ekkor ismertté vált méret adatok alapján – a félig megjelent oldal „ugrik”.

<img src="hajo.gif" width="144" height="50">

Természetesen a kép fizikai méretétől eltérő méretek is megadhatók, ekkor kicsinyítés, nagyítás, vagy akár torzítás is lehet az eredmény.

A kép alt tulajdonsága

Az alt tulajdonság alternatív szöveg definiálását teszi lehetővé. A szabvány szerint tehát ennek a szövegnek akkor kell a böngészőben láthatóvá válni, ha a kép valamilyen oknál fogva nem jeleníthető meg (pl. még nem töltődött le, nem érhető el vagy eleve ki van kapcsolva a képek letöltése).

<img src="hajo.gif" alt="1 árbócos vitorlás hajó">

Képek

A HTML nyelvben az img tag segítségével tudunk képeket definiálni. Ez az elem üres, és nincs záró tagja sem (hasonlóan a br és hr elemekhez).
A kép megjelenítéséhez először is meg kell adni a src tulajdonságot, vagyis meg kell adni a kép állomány helyét és nevét. A szintaxis a következő:

<img src="url">

Az url lehet abszolút vagy relatív megadású is. Abszolút:
<img src="http://valami.hu/kep.gif">

Abszolút, a base href-ben megadott helytől, ennek hiányában a szerver gyökerében keres:

Több soros szöveges mezők

Lehetőség van hosszabb szöveg begépelését, szerkesztését lehetővé tevő beviteli mezőt is létrehozni. Erre szolgál a textarea elem. A következő példán a méretek megadásán túl a kezdőszöveg is definiált:

<textarea rows="10" cols="30">Kezdőszöveg</textarea>

Lenyíló lista

Bizonyos esetekben rádiógombok helyett célszerű inkább a lenyíló listák alkalmazása. (Itt elsősorban terjedelmi, áttekinthetőségi okokra kell gondolni.)
Két tag használatára lesz szükség: először is a select tag adja meg a lista kereteit, míg az option tagok a választható elemeket.

<form>
  <select name="autok">
    <option value="audi">Audi
    <option value="fiat">Fiat
    <option value="skoda">Skoda
    <option value="suzuki"
       selected="selected">Suzuki
  </select>

Űrlap adatok elküldése

Az esetek jelentős részében a felhasználó azért tölt ki egy űrlapot, hogy adatokat tudjon a szerver felé küldeni valamilyen hatás érdekében.
Az eddigi példákból két fontos rész kimaradt. Először is a felhasználó számára szokás biztosítani egy küldés (vagy valami hasonló feliratú) gombot, hogy erre kattintva kezdeményezhesse az adatok elküldését. Másrészt a form tag – egyébként kötelezően kitöltendő – action tulajdonsága határozza meg, hogy melyik oldalnak kell a kérést feldolgoznia.

<form name="input"
    action="feldolgoz.php"
    method="get">

A label elem

Érdemes megfigyelni, hogy rádiógomb és jelölőnégyzet esetén a kattintható terület a kör illetve négyzet alakú területre korlátozódik. Az elemek mellett megjelenő szövegek a böngésző számára függetlenek a jelölő elemektől, csupán a vizuális helyzet jelzi nekünk az összefüggést.
A label elem használatával ez a függetlenség megszüntethető: a szöveget a jelölőelemmel aktív kapcsolatba hozhatjuk. Ez azt jelenti, hogy lehet kattintani a szövegre is.

<form>
  <input type="radio" name="nem" value="no" id="no">
  <label for="no"></label>
  <br>

Jelölőnégyzetek

A jelölőnégyzetek arra szolgálnak, hogy a felhasználó egy vagy több elemet is ki tudjon választani a rendelkezésre álló lehetőségek közül. Más megközelítésben úgy is lehetne fogalmazni, hogy egy jelölőnégyzet ki-, vagy bekapcsolt állapotban lehet, függetlenül más beviteli elemektől.

<form>
  <input type="checkbox" name="bicikli">
  Van biciklim
  <br>
  <input type="checkbox" name="auto">
  Van autóm
</form>

Itt is van lehetőségünk az alapértelmezetten ki nem választott állapot helyett bejelölve megjeleníteni a jelölőnégyzetet:

Rádiógombok

A rádiógombokat akkor használhatjuk, ha a látogatónak néhány választható elem közül kell választási lehetőséget adni. Az elemek közül mindig csak az egyik lehet aktív. Érdemes megfigyelni a következő listában, hogy a name tulajdonság azonossága rendeli a rádiógombokat logikailag egy csoporttá, vagyis egymást kizáró választási lehetőségekké. (Tehát ebből a szempontból sem a vizuális elrendezés számít!)

<form>
  <input type="radio" name="nem"
    value="no"></input>
  <br>
  <input type="radio" name="nem"
    value="ferfi">férfi</input>
</form>

Szöveges mezők

A szöveges mezők lehetővé teszik, hogy betűkből, számokból, írásjelekből álló karaktersorozatot lehessen begépelni.

<form>
  Vezetéknév:
  <input type="text" name="vezeteknev">
  <br>
  Keresztnév:
  <input type="text" name="keresztnev">
</form>

Tartalom átvétel