Táblázat,keret,űrlap,rádiógomb,legördülő menü

<TABLE align="center" border="1" bordercolor=”black” height="200" width="200" cellspacing=0 cellpadding=0>
<TR height="25%">
<TD width="25%" align=”center”> bal </TD>
<TD width="25%" align=”center”> 123 </TD>
<TD width="25%"> &nbsp; </TD>
<TD width="25%" align=”center”> kalap </TD>
</TR>
<TR height="25%">
<TD align=”center”> bab </TD>
<TD align=”center”> 44 </TD>
<TD colspan="2"> &nbsp; </TD>
</TR>
<TR height="25%">
<TD rowspan=”2” bgcolor=”yellow”> &nbsp; </TD>
<TD colspan="3" bgcolor=”yellow”> &nbsp; </TD>
</TR>
<TR height="25%">
<TD colspan=”3”> &nbsp; </TD>
</TR>
</TABLE>


Keretes szerkezetű oldalak
Kétféleképpen készíthetünk keretes szerkezetű oldalakat.
1. Táblázaton belüli belső keretek (IFRAME = Inline Frame) segítségével:
<TABLE>
  <tr height="80%">
    <td align=center valign=top rowspan=2>
      <a href="egy.htm" target="fokeret">Menü 1</a>
      <br>
      <a href="ketto.htm" target="fokeret">Menü 2</a>
    </td>
    <td align=center>
      <iframe name="fokeret" src="egy.htm" width="100%" height="100%" frameborder=0 framespacing=0 border=0 marginheight=0 marginwidth=0 tabindex=0></iframe>
    </td>
  </tr>
</TABLE>

2. Hagyományos keretek (FRAMESET) használatával:
<FRAMESET cols="150, *" framespacing=0 border=0>
  <frameset rows="50, *">
    <frame name="logo" src="logo.htm" frameborder=0 scrolling=no>
    <frame name="menu" src="menu.htm" frameborder=0 scrolling=no>
  </frameset>
  <frameset rows="50, *, 25">
    <frame name="fejlec" src="fejlec.htm" frameborder=0 scrolling=no>
    <frame name="fooldal" src="elso.htm" frameborder=0>
    <frame name="labjegyzet" src="labjegyzet.htm" frameborder=0 scrolling=no>
  </frameset>
</FRAMESET>


HTML űrlapok


Mi az a form?
A form tulajdonképpen egy űrlap, amelyet a HTML kódon belül egy külön egységként kezelünk.


Látható és rejtett elemek
A form tartalmazhat látható, és nem látható (rejtett) elemeket. Látható elemek például a szövegbeviteli mezők, legördülő listák és a gombok, míg a rejtett elemekben olyan információkat tárolhatunk, amelyekre a form feldolgozásakor szükségünk lehet, de nem szeretnénk, ha az űrlapot kitöltő személy tudomására jutna. Például a saját email címünket, amelyre a kitöltött űrlapot el fogjuk küldeni, elrejthetjük egy ilyen rejtett mezőbe.


Formok feldolgozási folyamata
Miután az űrlapot kitöltöttük, elküldjük egy feldolgozó programnak. Ez a feldolgozó program egyesével beolvassa az űrlap elemeit és értékeiket, majd elvégzi rajtuk az általunk megadott utasításokat. Például eltárolhatjuk az adatokat egy adatbázisban, bármilyen formában kiírathatjuk az adatokat a képernyőre, vagy akár el is küldhetjük az adatokat egy email címre.


A form felépítése
<FORM> : A form kezdete, mindig le kell zárni! Amit ezen belül elhelyezünk, az mind a form része lesz. Ez lehet szöveg, kép, link, és lehetnek standard form-elemek is, melyeket az alábbiakban részletesen bemutatunk. A megadható paraméterek a következők:
name=”form1” : a form neve
action=”feldolgozo.xxx” : a feldolgozó oldal neve (és elérési útvonala)
method=”POST” : a form elemeinek átadási módja. (POST vagy GET)


Beviteli mezők és típusaik
<INPUT> : Beviteli mező. Nem kell lezárni! A megadható paraméterek:
name=”neve” : a beviteli mező neve
type=”text” : egyszerű szöveges mező (alaphelyzetben ez van kiválasztva)
”password” : jelszó típusú mező, *-okat látunk a beírt karakterek helyén
”hidden” : rejtett mező, később részletezzük
”button” : egyszerű gomb
”submit” : gomb a form elküldéséhez
”reset” : gomb a form alaphelyzetbe állításához
”checkbox” : kijelölő négyzet (checkbox)
”radio” : rádiógomb
size=”30” : a szöveges beviteli mező hossza
value=”valami” : a beviteli mező alapértéke (gomboknál a gomb felirata)

Kijelölő négyzetek (checkbox)
<INPUT name=”auto” type=”checkbox” value=”van autónk”>
<INPUT name=”karos” type=”checkbox” value=”dohányzunk”>
<INPUT name=”karos” type=”checkbox” value=”iszunk”>
<INPUT name=”baratno” type=”checkbox” value=”van barátnőnk”>
A négyzetek közül bármelyiket kiválaszthatjuk (akár az összeset is), de üresen is hagyhatjuk őket. Ha több mezőnek ugyanazt a nevet adjuk, a form feldolgozásakor a kiválasztott mezők értékeit vesszővel elválasztva kapjuk vissza. Tehát a mezők értékei a feldolgozás után (ha mindet kiválasztottuk):
auto = van autónk
karos = dohányzunk, iszunk
baratno = van barátnőnk
Ha paraméterként beírjuk, hogy checked, akkor az adott mező alaphelyzetben ki lesz választva.

Rádiógombok
<INPUT name=”auto” type=”radio” value=”van autónk”>
<INPUT name=”auto” type=”radio” value=”nincs autónk” checked>
Ha ugyanazt a nevet adjuk nekik, akkor a kis gombok (köröcskék) közül maximum egyet választhatunk ki! A checked paraméter megadásakor itt is alaphelyzetben ki lesz választva az adott gomb. Ha több helyre is beírjuk, hogy checked, akkor az utolsó lesz az érvényes!


Legördülő listák
<SELECT> : Legördülő lista kezdete. Mindig le kell zárni! A megadható paraméterek:
    name=”neve” : a lista neve
    multiple : több sor is kijelölhető egyszerre (Ctrl + klikk)
    size : hány sor legyen látható egyszerre (alapérték: 1)
<OPTION> : A lista egy sora. Nem kell lezárni! A tag után kell írni azt a szöveget, amit a listában látni szeretnénk. A megadható paraméterek:
    value=”ertek” : ha ezt a sort választjuk ki, ez lesz a legördülő lista értéke.
selected : az adott sor lesz alaphelyzetben kiválasztva.

Egy példa a legördülő listára:
<SELECT name=”eletkor” size=1>
    <OPTION value=”15”> 15 éves vagyok
    <OPTION value=”20”> 20 éves vagyok
    <OPTION value=”25” selected> 25 éves vagyok
    <OPTION value=”30”> 30 éves vagyok
</SELECT>

Szöveges területek
<TEXTAREA name=”szoveges”> alapszöveg </TEXTAREA>
Vigyázzunk arra, hogy a nyitó és záró rész között a szóközöket és a sortöréseket is komolyan veszi a böngésző! Az alapértéket ide kell beírnunk, és nem a value paraméterbe, mint a fenti esetekben!