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 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: Nyomjál meg <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, tejhát nem választható. Lehetséges típusok type="text" - Tetszőleges egy soros szöveg bevitelére alkalmas:

 

maxlength="256" - Hány karakter lehet maximálisan a bevitt szöveg

size="32" - Hány karakter széles legyen a beviteli mező

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.

<input name="jelszo" type="password" value="titok" />

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

Fontos, hogy minden választható elemnek a 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?

<input name="jarmu" type="checkbox" value="bicikli" /> 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
tape="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!

<input max="10" min="1" name="szam" step="0.5" type="number" value="2" />

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

 

<input type="range"  max="10" min="1" name="tartomany" step="0.5" value="3" />

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

 

<input name="tel" type="tel" value="+36 30 123 1234" />

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

<input name="url" type="url" value="http://www.fzolee.hu" />

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ítsgével az adatbevitelnél már össze lehet kötni egy kimeneti mezővel:

Első érték :
Második érték:

Eredmény (elso * masodik):-
<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>
Eredmény (elso * masodik):<output for="a b" name="x">-</output>
</form>