4.13 - Űrlapok - Beviteli elemek

SELECT - Legördülő lista

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

 

<select name="cars"><option value="volvo">Volvo</option><option value="saab"></option><option value="fiat">Fia</option><option value="audi">Audi</option>
</select>

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:

&nbsp; &lt;textarea cols="30" name="uzenet" rows="5"&gt; ez itt az alapértelmezett üzenet. &lt;/textarea&gt;

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:

 

<input maxlength="256" name="szoveg" size="32" type="text" value="alapértelmezett érték..." />

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

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

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

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

<code class="language-html">&lt;input name="jelszo" type="password" value="titok" /&gt;

<strong>type="submit"</strong> - 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" />

<code class="language-html">&lt;input name="Kuldés" type="submit" value="Küldés" /&gt;

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

<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

<code class="language-html">&lt;input name="valaszto" type="radio" value="1" /&gt; Első lehetőség&lt;br /&gt;
&lt;input name="valaszto" type="radio" value="2" /&gt; Második lehetőség&lt;br /&gt;
&lt;input name="valaszto" type="radio" value="3" /&gt; Harmadik lehetőség

Fontos, hogy minden választható elemnek a <strong>name </strong>attribútuma ugyanaz legyen! Az elküldött érték pedig a <strong>value</strong> paraméterben lesz megadva. Ha nem választjuk ki egyik radiogombot sem, akkor nem lesz érték elküldve

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

<input name="jarmu" type="checkbox" value="bicikli" /> Elküldjük az adatot vagy ne?

<code class="language-html">&lt;input name="jarmu" type="checkbox" value="bicikli" /&gt; 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!

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

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" />

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

<strong>type="number"</strong> - 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" />

<code class="language-html">&lt;input max="10" min="1" name="szam" step="0.5" type="number" value="2" /&gt;

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

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

<code class="language-html">&lt;input type="range"  max="10" min="1" name="tartomany" step="0.5" value="3" /&gt;

<strong>type="tel" </strong>- 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="" value="+36 30 123 1234" />&nbsp;

<code class="language-html">&lt;input name="tel" type="tel" value="+36 30 123 1234" /&gt;

<strong>type="URL" </strong>- 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" />

<code class="language-html">&lt;input name="url" type="url" value="http://www.fzolee.hu" /&gt;

<strong>type="mail"</strong> - 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" />

<code class="language-html">&lt;input name="imel" type="email" value="xy@fzolee.hu" /&gt;

<strong>type="color" </strong>- 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" />

<code class="language-html">&lt;input name="szin" type="color" value="#ff0000" /&gt;

<strong>type="search"</strong> - 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 :<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" />

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

&nbsp;