Ű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:
- vízszintes igazítás (text-align)
- keret tulajdonságai (border-style, border-width, border-color)
- helykitöltés (padding): távolság a cella széle és a benne lévő tartalom között
- margó (margin)
- háttérszín (background-color)
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.