4.13. Űrlapok - Beviteli elemek

SELECT - Legördülő lista

Segítségével megadott listából választhat a bevitelnél .

TEXTAREA - Több soros szöveg bevitele Segítségével több soros szövegeket vihetünk be és küldhetünk át a szervernek:

<textarea cols="30" name="uzenet" rows="5"> 
  Ez itt egy több soros 
  az alapértelmezett üzenet. 
</textarea>

<textarea cols="30" name="uzenet" rows="5"> ez itt az alapértelmezett üzenet. </textarea>

Button - nyomógomb A létrejövő nyomógomb hatására eseményeket lehet indítani. Például:

<button onclick="alert('Megnyomtál!')" type="button" value="Nyomjál meg">
  Nyomjál meg
</button>

INPUT elem A legfontosabb adatbeviteli elem. Általános formája

<input type="típus" name="név" value="alapértelmezett érték">

Kötelező attribútumok

name="nev" - Ez az attribútum mondja meg, hogy a szervernek elküldött értéket milyen néven éri majd el a szerver oldali feldolgozó program
type="típus" - Ez az atrribútum mondja meg, hogy milyen típusú adatot töltünk fel, egyúttal a típus meghatározza esetenként az elem megjelenését is.
value="érték" - A beviteli mező alapértelmezett értékét jelenti. Ha nem módosítjuk az értéket, akkor azt fogja elküldeni a böngésző, ami itt van.

További attribútumok

readonly="readonly" - Csak olvasható a mező értéke, tehát az alapértelmezett érték nem változtatható
disabled="disabled" - Az adatbeviteli mező szürkén jelenik meg, tehát nem választható. Lehetséges típusok:
type="text" - Tetszőleges egy soros szöveg bevitelére alkalmas.
required="required" - Kötelezően kitöltendő
maxlength="szam" - Hány karakter hosszú lehet a bevitt szöveg
size="szam" - Hány karakter hosszú lehet a beviteli mező

Beviteli mező típusok

type="text" - szöveg bevitelére alkalmas

type="password" - Olyan beviteli mező, ahol a szöveg helyett a képernyőn csillagok vagy pontok tűnnek fel. Jelszó bevitelére használják.

type="submit" - Az elküldés nyomógomb képe! A value="paraméter lesz a gomb felirata"

<input name="Kuldés" type="submit" value="Küldés" />

type="radio" - Azonos elnevezésű beviteli mezővel lehetett kiválasztani lehetséges értékek közül egyet.

Első lehetőség Második lehetőség Harmadik lehetőség

<input name="valaszto" type="radio" value="1" /> Első lehetőség<br />
<input name="valaszto" type="radio" value="2" /> Második lehetőség<br />
<input name="valaszto" type="radio" value="3" /> Harmadik lehetőség

name attribútuma ugyanaz legyen! Az elküldött érték pedig a value paraméterben lesz megadva. Ha nem választjuk ki egyik radiogombot sem, akkor nem lesz érték elküldve

type="checkbox" - Jelölőnégyzetet használhatunk. Segítségével beállíthatjuk, hogy elküldünk-e egy adatot vagy sem.

 Elküldjük az adatot vagy ne?

A HTML 5 új lehetőségei

A HTML korábbi változataiban ennyi lehetőségünk volt az INPUT mezők esetén. A HTML 5-ben megjelentek új lehetőségek is!

type="time" - Egy időpontot lehet bekérni type="date" - Egy dátumot lehet bekérni type="datetime" - Egy időpontot lehet bekérni dátummal és időzónával type="month" - Hónapot ehet bekérni type="week" - Hetet lehet bekérni

Idő: Dátum: Dátum és idő (időzónával): Helyi dátum és idő: Hónap: Hét:


Idő: <input name="time" type="time" value="23:59" /><br />
Dátum: <input name="date" type="date" value="2013-02-13" /><br />
Dátum és idő (időzónával): <input name="datetime" type="datetime" value="2013-02-08T12:00Z" /><br />
Helyi dátum és idő: <input name="datetime_local" type="datetime-local" value="2013-02-08T12:00" /><br />
Hónap: <input name="month" type="month" value="2013-02" /><br />
Hét: <input name="week" type="week" value="2016-W07" />

type="number" - Számok bevitele. megadhatjuk a legkisebb és legnagyobb bevitt értéket, továbbá a lépésközöket is. az űrlap nem is enged másfajta értéket bevinni!

type="range" - Egy tartományból lehet számokat bevinni egy csúszka segítségével

type="tel" - Telefonszám bevitele. A telefonszám az informatikában nem szám, mert nincsen numerikus értéke, hanem megadott jelekből álló szöveg. Ezek a jelek lehetnek: +, (, ), szóköz és 0,1,2,3,4,5,6,7,8,9 jelek lehetnek

type="URL" - Csak webcímek bevitelére alkalmas mező. A bevitt adat elején oitt kell lennie a http:// vagy a https:// ftp:// , vagy sftp:// karaktersornak.

type="mail" - Email címek bevitelére alkalmas mező. Leellenőrzi a böngésző, hogy a @ jel ott van-e a bevitt email címben.

<input name="imel" type="email" value="xy@fzolee.hu" />

type="color"- Színválasztó mező. Megnyílik egy színválasztó ablak és abban lehet egy színt kiválasztani, aminek a hexadecimális kódja lesz a kiválasztott érték.

<input name="szin" type="color" value="#ff0000" />

type="search" - Segítségével keresőmezőt használhatunk. Bár a HTML5-ben megjelent ez a típus is, de jelenleg (2016) nincsen mérhető különbség a text típushoz képest.

További HTMl 5-ben bevezetett lehetőségekről itt olvashatsz: http://www.w3schools.com/html/html_form_attributes.asp

OUTPUT elem

Érdekes HTML 5 lehetőség űrlapoknál. Segítségével két vagy több mezőt egy kis javascript segítségével az adatbevitelnél már össze lehet kötni egy kimeneti mezővel:

<form name="kimenet" oninput="x.value=parseInt(elso.value)+parseInt(masodik.value)">
 <p>Első érték :<input max="10" min="1" name="elso" step="1" type="range" value="2" /><br />
  Második érték: <input max="100" min="1" name="masodik" step="1" type="number" value="2" /></p>
<p>Eredmény (elso * masodik):<output for="a b" name="x">-</output></p>
</form>

Gyakorlati feladat:

Hozz létre egy olyan űrlapot, amelyben felhasználva a HTML 5 lehetőségeit egy személy jelentkezhet egy álláshirdetésre és sokféle adatot küld el a cégnek:

Név,
Születési hely,
Születési idő (Év, hónap, nap, óra, perc)
Férfi / nő
Lakcím
Telefonszám
Email cím
A megpályázott állshely (5 féle különböző állás közül lehet választani)
Fizetési kategória (tól...ig)
Jellemző tulajdonságok (csaoatjátékos, elkötelezettség, stb...) be lehessen jelölni.
A szakmai önéletrajza
Egy fénykép magáról

Az adatokat az oldal a megfelelő enctype-pal töltse fel a https://www.teszt.hu oldalra