Archive for szeptember 15th, 2009

HTML – Lista, Űrlap

szeptember 15th, 2009

Elérkeztünk ahhoz a fontos részhez amikor is megtanulunk listát készíteni és megjeleníteni a már szépen designolt weboldalunkon egy Listát.
==============
Lista beillesztése:
==============

Definiálása:
<ul>
<li>Tej</li>
<li>Kenyér</li>
<li>Hertz szalámi</li>
</ul>
Az <ul> tag-el jelezzük, hogy itt most bizony egy lista fog következni és a listaelemeket pedig a <li> tag-ek közé helyezzük.
Íme:

  • Tej
  • Kenyér
  • Hertz szalámi

Van lehetőség változtatni a felsorolás szimbólumán is például ha számokkal szeretnénk  akkor:

<ol>
<li>Tej</li>
<li>Kenyér</li>
<li>Hertz szalámi</li>
</ol>

Az eredmény:

  1. Tej
  2. Kenyér
  3. Hertz szalámi

Ha mindez nem elég, akkor definiálhatunk saját listát is:

<dl>
<dt>Tej</dt>
<dd>Mizo</dd>
<dt>Kávé</dt>
<dd>Karaván</dd>
</dl>

Saját kis listánk :->

Tej
Mizo
Kávé
Karaván

==================
Űrlapok beillesztése:
==================

Fontos szerepe van az űrlapoknak abban, hogy interaktívabbá tegyük az oldalunkat és dinamikus tartalmakat készíthessünk. Ezek segítségével küldhet a felhasználó adatokat, melyeket aztán szerver oldalon fel tudunk dolgozni többféleképpen, például PHP segítségével. Nézzünk egy egyszerű és gyakori példát, ahol bekérjük a látogatótól a felhasználónevét és jelszavát. ( hogy ellenőrizzük regisztrált-e már Nálunk. )

Definiálása:
<form>
Felhasználónév:
<input type=”text” name=”username” />
<br />
Jelszó:

<input type=”text” name=”password” />
</form>

És ahogy megjelenik:

Felhasználónév:

Jelszó:

A <form> tagek közé zárjuk az ‘input boxokat’.
Megadhatjuk a típusát is az input boxoknak és ezek határozzák meg a fő megjelenési formát.
A ‘name’ tulajdonság a későbbiekben lesz fontos, mivel ezekkel hivatkozunk az egyes ‘input boxokra’ amikor lekezeljük szerver oldalon a kapott adatokat.
Más típusok:

- Rádió gombok

<form>
<input type=”radio” name=”neme” value=”férfi” /> Férfi
<br />
<input type=”radio” name=”neme” value=”nő” /> Nő
</form>

Férfi


Itt azt a fő különbséget kell észrevenni  – mert még a vak is látja – , hogy megjelent  egy ‘value’ attributum, amivel rögzítettük az értékeket, így csak ki kell választania a kedves látogatónak a megfelelő gombocskát és a hozzá tartozó érték már meg is van.

- Jelölő négyzet

<form>
<input type=”checkbox” name=”neme” value=”férfi” /> Férfi
<br />
<input type=”checkbox” name=”neme” value=”nő” /> Nő
</form>

->

Férfi

Egy kis ízelítőt kaphattatok az űrlapok alapelemeinek létrehozásáról, de a későbbiekben leírom, miként lehet a beírt adatokat elmenteni, felhasználni, hogy valódi űrlapként működjön.
Üdv: Wolfrain ;)