WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Egysoros szövegbevitel tartalék


<input type="text" ...> =

Az egysoros szöveg bevitelére alkalmas a text típusú input elem hagyományos (HTML) jellemzői

Név Érték Leírás Böngészők
autocomplete on|off Engedélyezi (on) vagy tiltja (off) hogy a böngésző az előzmények alapján felkínáljon lehetséges értékeket. Chrome logó Firefox logó Safari logó Opera logó IE logó
autofocus autofocus Hatására a weboldal betöltését követően az elem kapja meg a fókuszt. (aktív lesz) Chrome logó Firefox logó Safari logó Opera logó IE logó
disabled disabled Segítségével az elem kikapcsolható. (Nem lehet szerkeszteni. Értéke nem kerül elküldésre.) Chrome logó Firefox logó Safari logó Opera logó IE logó
form form_id Megadja, hogy az adott elem melyik űrlaphoz tartozik. Chrome logó Firefox logó Safari logó Opera logó IE logó
maxlength szám Meghatározza a szöveg típusú beviteli mezőbe írható szöveg hosszát. (Maximális karakterszám.) Chrome logó Firefox logó Safari logó Opera logó IE logó
name szöveg Az elem neve. Az adatok feldolgozását végző scriptek, az elem azonosítására használják. Chrome logó Firefox logó Safari logó Opera logó IE logó
pattern reguláris kifejezés Az reguláris kifejezésre illeszkednie kell a bevitt értéknek. pl. pattern="[0-9][A-Z]{3}" Chrome logó Firefox logó Safari logó Opera logó IE logó
placeholder szöveg Ha nincs szöveg a beviteli mezőben, akkor az itt megadott szöveg látszik halványan. Chrome logó Firefox logó Safari logó Opera logó IE logó
readonly readonly Csak olvashatóvá teszi az elemet. Chrome logó Firefox logó Safari logó Opera logó IE logó
required required Kötelező a beviteli mező kitöltése. (Ha a mező nincs kitöltve, az űrlap nem továbbítható.) Chrome logó Firefox logó Safari logó Opera logó IE logó
size szám Meghatározza a szöveges típusú beviteli mező szélességét karakterben. Chrome logó Firefox logó Safari logó Opera logó IE logó
value szöveg Meghatározza az input mező kezdeti értékét. Az űrlap elküldésekor, tartalma az elem nevével együtt érkezik az adatok feldolgozását végző scripthez, Chrome logó Firefox logó Safari logó Opera logó IE logó

A <form> elem method jellemzője határozza meg az információ továbbításának módját:

Értékei:
- get: Az adatok átadása URL paramétereként történik, amelyek megjelennek a böngésző címsorában. Titkos információk továbbítására ne használjuk.
- post: Nagy mennyiségű adat háttérben történő elküldésére alkalmas.

A <form> elem action jellemzője adja meg az elküldött adat feldolgozását végző fájl nevét.

<form action="feldolgozo.php" method="post">

A <form> elem enctype jellemzője határozza meg az adatátvitelnél használt kódolás típusát.

Értékei:
- application/x-www-form-urlencoded: Alapértelmezett. Az elküldött adatok neve és értéke közé = jel kerül, a szóközöket + jelre cseréli, a speciális karaktereket hexadecimális ASCII kódjára alakítja.
- multipart/form-data: Fájlok feltöltésénél használjuk. Nem végez karakterkódolást.
- text/plain: Ha az adott űrlapot email továbbítására használjuk, akkor a célszerű használni. Így olvasható marad a szöveg.

A következő két példakód működése közötti különbség a példa űrlapoknak a böngésző ablakában történő megnyitásakor látható. Ekkor a böngésző címsorát érdemes összehasonlítani a két különböző kód esetén. A példa űrlapokra mutató linkek: html5_form_post.php és html5_form_get.php

1. példa (POST metódus ):

Forráskód



<h2>POST metódus használata</h2>
<form action="html5_form_post.php" method="post">
  Név: <input type="text" name="nev" value="Ki vagy?" > <br>	
  Jelszó: <input type="password" name="jelszo" value="még nincs" > <br>		
  <input type="submit" name="kuld">
</form>
 

Eredmény*

2. példa (GET metódus ):

Forráskód



<h2>POST metódus használata</h2>
<form action="html5_form_get.php" method="get">
  Név: <input type="text" name="nev" value="Ki vagy?" > <br>	
  Jelszó: <input type="password" name="jelszo" value="még nincs" > <br>		
  <input type="submit" name="kuld">
</form>
 

Eredmény*



A következő példakódok esetén az adatok elküldésénél mindig új ablak nyílik! (target="_blank")

3. példa (GET metódus és target="_blank" ):

Forráskód



<h2>POST metódus használata</h2>
<form action="html5_form_get_blank.php" target="_blank" method="get">
  Név: <input type="text" name="nev" value="Ki vagy?" > <br>	
  Jelszó: <input type="password" name="jelszo" value="még nincs" > <br>		
  <input type="submit" name="kuld">
</form>
 

Eredmény*


4. példa (POST metódus és target="_blank):

Forráskód



<h2>POST metódus használata</h2>
<form action="html5_form_post_blank.php" target="_blank" method="post">
  Név: <input type="text" name="nev" value="Ki vagy?" > <br>	
  Jelszó: <input type="password" name="jelszo" value="még nincs" > <br>		
  <input type="submit" name="kuld">
</form>
 

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.