Egysoros beviteli mezőt így szúrhatunk be, a fenti példánál maradva:
<form action="parser.php" method="post">
...
<input type="text" id="lastname" name="lastname">
...
</form>
Az egysoros beviteli mező fontosabb attribútumai:
type="text"
- Ez mondja meg a böngészőnek, hogy ez egy egysoros szöveges beviteli mező.
name="lastname"
- A
name attribútum azért kell, mert a szerveroldali parancsfájl, aminek elküldi a böngésző az adatokat és amit az action="parser.php" attribútummal adtunk meg, ez alapján fogja megtalálni a megfelelő értékeket. A parser.php parancsfájl ugyanis <név>=<érték> párokként kapja meg a beírt adatokat, ahol a név a name attribútum értéke minden egyes formelemhez, az érték pedig a felhasználó által beírt adat.
Ha mondjuk a vezetéknévhez (ez a lastname nevű mező) az írjuk be, hogy Kovács, a keresztnévhez azt, hogy Béla, végül az e-mail címhez azt, hogy bela.kovacs@nincsilyen.hu, majd elküldjük a beírt adatott a szervernek, akkor a parser.php így kapja meg az bevitt adatot: lastname=Kovács&firstname=Béla&email=bela.kovacs@nincsilyen.hu . Arra figyeljünk, hogy a név csak az angol ábécé kisbetűit, és számokat tartalmazzon, és számmal NE kezdődjön a név!
id="lastname"
- Ez a
label elem miatt kell, ami a beviteli mező előtti feliratot definiálja:
<label for="lastname">Vezetéknév: </label>
<input type="text" name="lastname" id="lastname">
Ugyanis a label for attribútumának a hozzá tartozó formelem id azonosítójának az értékét kell adni. Ezzel összekötöttük a beviteli mező feliratát magával a beviteli mezővel. Ez két dolog miatt is fontos. Az első, hogy így a hangos képernyőfelolvasók tudni fogják, hogy melyik formelemhez melyik felirat tartozik; a másik, hogy így ha a „Vezetéknév” feliratra kattintunk egérrel, akkor ugyanazt a hatást érjük el, mintha a beviteli mezőre kattintottunk volna.
size="4"
- Mennyi karakter szélességű legyen a mező. Ez nem korlátoztta a beírható karakterek számát, csak a látható szélességet állítja be!
maxlength="4"
- Beírható karakterek számának korlátozása. Például ha irányítószámot kérünk be, érdemes a beviteli mező
size és maxlength attribútumait 4-re állítani, mert így 4 karakter szélességű lesz a mező, és maximum 4 karaktert fogad csak el.
value="Kezdeti szöveg a mezőben"
- Alapértelmezettként ez a szöveg lesz a beviteli mező tartalma, amit azonban meg lehet változtatni.
|