Utoljára hagytuk az űrlapok kezelését. A HTML-ben lehet készíteni olyan oldalakat, amelyek adatbevitelre alkalmasak, majd a küldés gomb hatására az adatokat átküldjük a szervernek, ahol azt fel lehet dolgozni. Mivel szerver oldalon az adatok fogadását szerver oldali programokkal lehet megoldani, és a szerver oldali programozás későbbi anyag, ezért itt csak a HTML oldallal foglalkozunk.
Az űrlap készítéséhez meg kell jelölni a HTML oldal egy részét a <form> ....</form> TAG párral. Ami ezen belül űrlap adatelem azokat az adatokat küldi majd át a szervernek a böngésző.
Milyen paramétereket kell elküldeni a szervernek?
Meg kell adni, hogy melyik oldalnak küldi a böngésző az adatokat. A leggyakoribb megoldás az, hogy a szerveren ugyanazt az űrlapot hívjuk meg, amelyiken éppen vagyunk és a szerveren az űrlapunkon lefut egy program, ami a bejövő adatokat értékeli, feldolgozza, majd visszakerülünk ugyanoda, ahol korábban voltunk.
az adatbevitelre általában az <input> tag valamelyik fajtáját használjuk. Újítás, hogy az input mezőhöz lehet hozzácsatolni egy <label> tag-et, amelyben hivatkozhatunk egy beviteli mezőre:
<label for="hello"> Itt van a szöveg </label>
<input name="hello" value="Hello World!" id="hello"
A fenti űrlapnak az alábbi a kódja:
<form enctype="multipart/form-data" method="get" name="teszt">
<p><label for="szovegesadat">Egy szöveges adat</label>:
<input maxlength="256" name="szovegesadat" required="required" size="128" type="text" value="alapértelmezett" /><br>
Numerikus adat: <input max="10" min="1" name="szam" step="0.5" type="number" value="2" /><br />
Választás egy tartományból: <input max="10" min="1" name="tartomany" step="0.5" type="range" value="3" /><br />
<label for="tel">Telefonszám</label> Telefonszám: <input name="tel" type="tel" value="+36 30 123 1234" /><br />
URL: <input name="url" type="url" value="http://www.fzolee.hu" /><br />
Jelszó: <input name="jelszo" pwfprops="," type="password" value="titok" /><br />
Email: <input name="imel" type="email" value="xy@fzolee.hu" /><br />
Kereső kifejezés: <input name="kereso" type="search" value="Keresési kifejezés..." /><br />
File feltöltése: <input name="file" type="file" value="Filenév..." /><br />
Egy checkbox (igen / nem) <input checked="checked" name="Jelolo" type="checkbox" value="1" />
Szín megadása: <input type="color">
Dátum megadása: <input type="Date">
Pontos időpont: <input type="Datetime">
Csak a hónap: <input type="month">
Csak a hét: <input type="week">
</p>
<p>Hosszabb szöveg bevitele:<br />
<textarea cols="64" name="hosszabb_szoveg" rows="5">alapértelmezett szöveg</textarea></p>
<p>Egy választó lista:<br />
<select name="lista">
<option value="1">első</option>
<option value="2">második</option>
<option value="3">harmadik</option>
</select>
</p>
<p>Választó lista a lehetőségek közül:<br />
Első:<input name="valaszto" type="radio" value="1" /><br />
Második:<input name="valaszto" type="radio" value="2" /><br />
Harmadik:<input name="valaszto" type="radio" value="3" /></p>
<p>Elküldés:<br />
<input name="Kuldés" type="submit" value="Küldés" /></p>
</form>Minden űrlapelemnek van name="érték" attribútuma. A szervernek elküldött adatokban ezzel a névvel hivatkozunk rá. Ez a name="paraméter" független a korábban megtanult ID="érték" paramétertől, de érdemes ugyanazt az elnevezést használni!
A FORM tag attribútumai
method="POST | GET"
Ezzel tudjuk megadni, hogy a két lehetőségünk közül melyik módon küldjük a szervernek az értékeket.
method="get" - A GET módszer olyan, mintha a böngésző parancssorába írnánk be az adatokat.
method="post" - A POST egy kicsit rejtettebb, de azzal sem lehet nagyon elrejteni a küldött adatokat. Inkább akkor használjuk, hogyha hosszabb szövegeket akarunk elküldeni a szervernek, illetve file-t akarunk feltölteni, mert azt csak POST metódussal lehet.
Ha nem adjuk meg a paramétert, akkor az alapértelmezett módszer a GET lesz.
enctype="típus"
enctype="application/x-www-form-urlencoded" - Ha az űrlapon URL adatok is szerepelnek. Ilyenkor a feltöltött adatok speciális karaktereit elkódolja a böngésző.
enctype="multipart-form/data" - Az első választás akkor szükséges, ha bináris fájlt is fel akarunk tölteni.
enctype="text/plain" - Akkor használjuk, ha nincsen különösebb formázási igény az űrlapon
Ha nem adjuk meg a paramétert, akkor az alapértelmezett módszer az első, vagyis application/x-www-form-urlencoded.
name="elnevezes"
Az űrlapnak illik nevet adni, mert a szerver oldalon így lehet megkülönböztetni azt az esetet, ha egy weboldalon több űrlap van.
action="celoldal"
Ha egy webold űrlapját egy másik oldalon akarjuk feldolgozni, akkor kell használnunk az action paramétert. A megadott oldalra küldi el a böngészőt.
Ha nem adjuk meg a paramétert, akkor saját magát hívja meg az oldal.
target="ablak elnevezés"
target="_blank" - Új üres böngészőablakban jelenik meg a válasz
target="_self" - Az eredeti ablakban jelenik meg a válasz (ez az alapértelmezett)
target="frame / iframe neve" - Egy frame /iframe elnevezett oldalán jelenik meg a válasz.
accept-charset="UTF8"
Ezzel a paraméterrel megadhatjuk, hogy milyen karakterkódolást használhatunk az űrlapon. Ha nem adjuk meg, akkor az lesz a kódolás, ami magán a weboldalon általában.