Űrlapok - A <form> tag
Egy HTML űrlap részei egy form elemen belül helyezkednek el. Maga a form elem
általában nem jelenik meg a képernyőn, de stíluslapok definiálásával természetesen láthatóvá tehető.
A </form> zárótag használata is kötelező.
Legfontosabb attribútumai:
- action: Annak a weblapnak az elérési útvonala, amelyik fel fogja dolgozni az űrlap adatait.
- method: Az űrlap elküldésének módja. Két értéket vehet fel:
post illetve get.
- A get metódussal küldött adatokat a böngésző hozzáfűzi az
action attribútumban megadott
URL-hez. Az így küldött információ illetéktelenek számára is
könnyen hozzáférhető, ezért jelszó vagy más bizalmas adat küldésére nem ajánlott.
Csak ASCII karaktereket tartalmazhat. Az elküldhető adatmennyiség is korlátozott,
a maximum körülbelül 2000 karakter. Akkor szokták ezt az adatküldési módszert választani,
ha könyvjelző elhelyezésére (URL megkülönböztetésére) van szükség.
- A post metódussal küldött adatok az üzenet törzsében továbbítódnak.
Nincs terjedelmi korlát, akár csatolt fájlokat is tartalmazhat. A gyakorlatban többnyire
a post metódust használják az űrlapadatok küldésére.
- enctype: A tartalom típusát adja meg abban az esetben, ha az űrlapot post
metódussal küldik el. Alapértelmezett értéke:
"application/x-www-form-urlencoded". Ha az űrlap csatolt fájlt tartalmaz, akkor a
"multipart/form-data" értéket kell megadni.
- id, class, style: általános attribútumok
Leggyakrabban alkalmazott stílus tulajdonságok:
A form elem tartalmazhat űrlap elemeket és egyéb HTML elemeket is, például
címsorokat, listákat,
sortörést, stb. Ez a rugalmasság teszi lehetővé azt is, hogy egy űrlap elemeit
táblázatba rendezhessük.
A következő példában látható űrlap szövegmezőket és egy küldés gombot tartalmaz. A HTML forráskód:
<form action=”answer1.php” method=”get”>
Felhasználó név:
<input type="text" name="username"><br>
E-mail cím:
<input type="text" name="emailaddress"><br>
<input type="submit" value="Küldés">
</form>
A megjelenítést szabályozó stílustulajdonságok:
input {margin: 5px}
form {text-align: left;
border-style: solid; border-width: 1px;
border-color: #0000ff;
padding: 3px; margin: 3px}
Ami így jelenik meg:
Weblapkészítés során általában terjedelmesebb űrlapokat kell készíteni annál, mint ami a fenti példában látható.
Egy összetettebb űrlap elemeinek pozicionálása általában lényegesen bonyolultabb feladat.
Az űrlap elrendezésére ugyan azok a lehetőségek állnak rendelkezésre, mint bármely más HTML oldal esetében:
az űrlap elemeit táblázatba foglalhatjuk illetve az elrendezést stíluslapokkal is definiálhatjuk.
|
|