Küldő és törlő gombok.1103
Harmadik rész. Küldő és törlő gombok.
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.
- Szövegmezők
- Elküldő és törlő gombok
- Választógombok
- Jelölőnégyzetek
- Lenyíló listák
Adatok elküldésére és törlésére alkalmas gombok.
Az adatokat elküldhetjük
- submit gombbal: a CGI programhoz
- button gombbal: JavaScript programunkhoz
Az adatokatok törléséhez
- reset gomb: Az űrlap törlésére szolgál. Ezen gombra kattintva, minden űrlapelem, az alapértelmezett értékre áll vissza, vagy teljesen törlődik.
Példák:
Első, a cgi, azaz, szerveroldali programok felé küldi az űrlap adatait.
<form id="urlap" method=GET action="http://www.valami.hu/ismerteto/bemutato.php">
Adat = <input type="text" name="valami" id="valami" value=" ">
<input type="submit" value="Adatok küldése">
</form>
Megjelenése weboldalon:
Adat =
Második, a JavaScript programunk felé küldi az űrlap adatait.
<form name="urlap" id="urlap">
Adat = <input type="text" name="valami" id="valami" value=" ">
<input type="button" value="Adatok küldése" onClick="urlap_feldolgozas();">
</form>>
Megjelenése weboldalon:
Adat =
Harmadik a "reset" törli az űrlap adatait.
Alkalmazható JavaScript "button" vagy szerveroldali "submit" feldolgozások esetén.
<form .... ..... ..... >
Adat = <input type="text" name="valami" id="valami" value=" ">
<input type="reset" value="Adatok törlése">
<input type="button vagy submit" value="Adatok küldése" onClick="ValamiFunction();">
</form>
Az onClick function meghívás akkor kell, ha ürlap adatokat JavaScript dolgozza fel.
Megjelenése weboldalon:
A gombokhoz tartozó name="valami" id="valami" azonosító névnek, és a gombon megjelenő value="valami" felíratnak, mindenki tetszőleges szöveget írhat be.
A küldő type="submit" vagy type="button" alkalmazásoknak, nem kell "name" és "id" azonosító.
A megjelenő küldő gombok ( submit, button) mérete:
Alapesetben:
- Szélességét a beírt szöveg hossza, magasságát a betűméret nagysága határozza meg.
Valóságban, megjelenési méretét, mi is meghatározhatjuk.
- Ha az input elemnek, beírtunk egy id egyedi vagy class osztályazonosító nevet, akkor meghatározhatunk
betűméretet, stb. stílust. Ezzel megváltozik, a gomb magassága és szélessége. - A szélesség növelésére van még egy lehetőségünk:
A szóközbillentyű többszöri leütése, az idézőjelek és a beírt szöveg között.
Ezzel tetszőleges szélességű gombméretet állíthatunk be, és nem utolsó sorban a beírt szöveget betájolhatjuk, hogy a megjelenő gomb közepén helyezkedjen el.
Példák a küldő gomb méretére
Első példa:
Alapértelmezett, a beírt szöveg hossza és betűmérete határozza meg, a gomb méreteit
<input type="button" value="Adatok küldése: JavaScript program felé"><br>
<input type="submit" value="Adatok küldése: CGI program felé">
Megjelenése weboldalon:
Második példa:
Első gomb alapértelmezettként jelenik meg, második gomb betűméreteit mi határozzuk meg stíluslapon.
<input type="button" value="Adatok küldése"> <br>
<input type="button" class="xmeret" value="Adatok küldése">
Megjelenése weboldalon:
Harmadik példa:
Első gomb alapértelmezettként jelenik meg, második gomb betűméreteit mi határozzuk meg stíluslapon.
Ezt követően, a szóközbillentyűvel megváltoztatjúk a gombok megjelenő szélességét.
- Az első gomb esetében, az idézőjelek és a szöveg között, nyomjuk le a szóközbillentyűt 30-szor.
- A második gomb esetében, az idézőjelek és a szöveg között, nyomjuk le a szóközbillentyűt 15-ször.
<input type="button" value="Adatok küldése"> <br>
<input type="button" class="xmeret" value="Adatok küldése">
Megjelenése weboldalon:
Kérdezhetnénk, mi értelme a szóközbillentyűvel történő szélességváltoztatásnak, mikor ezt stíluslapon a padding megadásával is beállíthatnánk.
Igazából akkor van jelentősége, ha olyan programot készítünk, mely a zsebszámológéphez hasonló billentyűzeteket jelenít meg, és azt szeretnénk, hogy a megjelenő nyomógombok szélessége, függetlenül a gomb feliratától, egyforma szélességűek legyenek.