Weblap Hová jutunk?

Szövegmezők az ürlap elemei. 1101

A kezdő form és záró form jelölőelemmel kijelölt objektumban, azaz területen, egy vagy több űrlapelem is elhelyezhető.

Ezek az űrlapelemek vagy adatbeviteli és adat megjelenítő elemek nem mások, mint az űrlap adatmezői.


A szövegmezők.

A szövegmezők lehetnek:
- Rövidek, azaz egysorosak. Ezek megjelenítésére, az input jelölőelemet alkalmazzuk.
- Hosszabbak, azaz többsorosak. Ezek megjelenítésére, a textarea jelölőelemet alkalmazzuk.

A szövegmezők segítségével bekérhetünk:
- nevet
- címet
- tetszőleges adatokat
- vagy megadhatunk adatot, egy JavaScript programunk működéséhez. (Például: Játékokhoz, számológéphez, stb.)

A szövegmezőknek is kell rendelkezni egyedi névvel, melyet a name jellemző után, idézőjelek között adunk meg.

A szövegmezők megjelenése weboldalon, egy ablakra hasonlítanak.
- A weboldalon megjelenő szövegmező ablakának méretét, mi határozzuk meg.( size="..." , cols="..." , rows="...")
- Szövegmezőbe megadhatunk egy kezdeti alapértéket, ez lehet számérték vagy szöveg, de ezek kombinációja is. ( value="valamilyen szöveg vagy szám" vagy defaultValue="valamilyen szöveg vagy szám" )
- A szövegmezőket, a weboldalunkat felhasználók töltik fel új adatokkal, vagy írnak be tetszőleges szöveget.

JavaScript programunkban, a szövegmezőkkel dolgozhatunk a legegyszerűbben.
Minden text (szöveg) objektum az alábbi tulajdonsággal rendelkezik:

A szövegmezők méretei:
Az inputnál megadható size ablakméret tájoló jellegű, azaz nem biztos, hogy ennyi karaktert lehet beírni.
Példa néhány karakterre, ha az ablak méretét size="20" karakterre állítjuk be, körülbelül mennyi karakter jeleníthető meg az ablakban:
- kis "a" betűből 20.
- nagy "A" betűből 16.
- kis "i" betűből 49.
- nagy "M" betűből 13

Az ablakba beírt értelmes szöveg, változó karakterekből tevődik össze, ebből következtetve, bármilyen 20 karakteres szöveg, elfér az ablakban.
A size="20" karakterszám, nem jelenti azt, hogy több karakteres szöveg nem írható be.
Ha hosszabb a szöveg, mint a megadott ablakméret, akkor a beírt szöveget, a jobbra vagy balra mutató billentyűzeti gombok nyomva tartása mellett olvashatjuk végig.

A textarea ablakok esetében, a szélességet cols=".." a megjeleníthető sorok számát rows=".." jelölőelemek után, idézőjelek között határozzuk meg.
A szélességet cols="60" ablakméret tájoló jellegű, azaz nem biztos, hogy ennyi karaktert lehet egy adott sorba beírni.
Tételezzük fel, hogy pontosan ennyi karakter fér el egy sorba, és mi hosszabb mondatot írunk, akkor a további karakterek új sorban folytatódnak.
Az ablak magasságát, azaz a beírható sorok számát rows="5" pontosan meghatározza.
Amennyiben, mondataink hossza meghaladja az 5 sornyi karaktermennyiséget, akkor annak teljes tartalmát, az ablak szélén lévő görgető nyilakkal történő mozgatása mellett tudjuk elolvasni.

Az ablakok minimális méretét lehetőleg úgy méretezzük, hogy az általunk beírt kezdeti alapérték elférjen benne, azaz a weboldalunkat használók, első ránézésre, és mindenféle trükk nélkül el tudják olvasni.


Szövegmező példák:

Rövid, azaz egysoros szövegmező:
- Az input jelölőcímkében határozunk meg.
- Az input alkalmazásakor, meg kell a típusát is határoznunk, azaz szövegmezőről van szó ( type="text" )

Első példa, nem adunk meg, kezdeti alapértéket ( value )

<form name="form1">
<input type="text" name="szovegresz1" size="20" value=" ">
</form>

Megjelenése weboldalon:

Második példa, megadjuk a kezdeti alapértéket ( value ).
- A kezdeti alapérték, kiindulási támpontként is szolgálhat a felhasználó felé.
- A kezdeti alapértéket felhasználó törölheti, majd tetszőleges adatot írhat be helyette.
- A kezdeti alapértéket, a JavaScript kód is módosíthatja.

<form name="form2">
<input type="text" name="szovegresz1" size="20" value="szevasz">
</form>

Megjelenése weboldalon:

Harmadik példa, egyszerű matematikai feladathoz.
- Ez már nem csak szövegmezőt, hanem számadati mezőt is tartalmaz.
<form name="form4">
<input type="text" name="a" size="5" value=4>
+
<input type="number" name="b" size=5 value=2 >
=
<input type="number" name="eredmeny" size=10 value=6 >
</form>

Megjelenése weboldalon: + =

Hosszabbak, azaz többsoros szövegmező:
Ehhez, a textarea kezdő és záró jelölőcímkét alkalmazzuk.

A kezdő textarea jelölőcímkében határozzuk meg:
- egyedi azonosító nevét ( name="...." )
- megjelenő ablak szélességét ( cols="...." )
- megjelenő ablak magasságát ( rows="...." )

Első textarea példa.

<form name="form6">
<textarea name="szoveg1" cols="60" rows="5"> </textarea>
</form>

Megjelenése weboldalon:

Második textarea példa.
- A kezdő és záró textarea jelölőelemek közé, megadhatunk egy kezdeti alapértéket, mely lehet számérték vagy szöveg, de ezek kombinációja is.

<form name="form7">
<textarea name="szoveg2" cols="60" rows="5">
A kezdő és záró textarea jelölőelemek közé, megadhatunk egy kezdeti alapértéket, mely lehet számérték vagy szöveg, de ezek kombinációja is. Ezen ablakba, akár egy tájékoztató szöveget is beírhatunk a felhasználó felé
</textarea>
</form>

Megjelenése weboldalon:

 

 

 

Vissza a lap elejére