Kezdőlap - Webszerkesztés - HTML - Űrlap-elemek

Űrlap-elemek

megvalósítása HTML-ben

Jegyzet

Tekintsük át a weboldalak űrlapjain (formjain) leggyakrabban használatos párbeszédelemeket!

egyszerű (egysoros) beviteli mező:
```
<input type='text'>
```
jelszó beviteli mező:
```
<input type='password'>
```
jelölőnégyzet (checkbox):
```
<input type='checkbox'> Egyetértek...
```
Egyetértek...

kiválasztó gomb (rádiógomb):

<input type='radio' name='gender'> fiú
<input type='radio' name='gender'> lány

fiú
lány

fájl-tallózó:
```
<input type='file'>
```
e-mail beviteli mező:
```
<input type='email'>
```
Szerepe az adatok elküldésekor mutatkozik meg: formailag hibás e-mail cím esetén nem enged továbblépni.
szám beviteli mező:
```
<input type='number'>
```
választás értéktartományból:
```
<input type='range'>
```
dátum beviteli mező:
```
<input type='date'>
```
(Ha nem működik, a böngésző frissítése lehet szükséges.)
időpont beviteli mező:
```
<input type='time'>
```
(Ha nem működik, a böngésző frissítése lehet szükséges.)
színválasztó mező:
```
<input type='color'>
```
(Ha nem működik, a böngésző frissítése lehet szükséges.)
többsoros beviteli mező:
```
<textarea cols=40 rows=4></textarea>
```

választó elem:

<select>
	<option>---Válassz!--- </option>
	<option>Biológia       </option>
	<option>Fizika         </option>
	<option>Földrajz       </option>
	<option>Kémia          </option>
</select>

választó elem fix mérettel:

<select size=5>
	<option>---Válassz!--- </option>
	<option>Biológia       </option>
	<option>Fizika         </option>
	<option>Földrajz       </option>
	<option>Kémia          </option>
</select>

választó elem a lehetőségek csopotosításával:

<select title='Válassz úticélt!'>
    <option disabled=disable selected>---Válassz!--- </option>

    <optgroup label='Ausztria'>
        <option>Neusiedler See</option>
        <option>Wolfgangsee</option>
        <option>Wörthersee</option>
    </optgroup>

    <optgroup label='Olaszország'>
        <option>Lago di Como</option>
        <option>Lago di Garda</option>
    </optgroup>

    <optgroup label='Szlovénia'>
        <option>Blejsko jezero</option>
        <option>Bohinjsko jezero</option>
    </optgroup>
</select>

beviteli mező előre definiált adatokkal:

<input list='programnyelv'>
    <datalist id='programnyelv'>
        <option value='C#'>
        <option value='Java'>
        <option value='PHP'>
        <option value='Python'>
    </datalist>

alaphelyzetbe állító nyomógomb:
```
<input type='reset'>
```
tetszőleges funkciójú nyomógomb, jellemzően JavaScript nyelven történő feldolgozáshoz:
```
<input type='button' value='Feldolgozás'>
```
elküldés nyomógomb, jellemzően PHP nyelven történő feldolgozáshoz:
```
<input type='submit'>
```

További részletekért érdemes felkeresni a w3schools.com HTML Form Elements

oldalát.

Fontos!

1.
A párbeszédelemek feldolgozhatóságának szinte mindig feltétele, hogy azok egy űrlapon (formon) legyenek elhelyezve:

<form>
	<!-- párbeszédelemek -->
</form>

Ennek hiányában pl. még a reset gomb sem fogja tudni alaphelyzetbe állítani a form elemeit - hiszen nincs is form.

2.
A párbeszédelemek HTML-ben történő megjelenítése önmagukban semmilyen interakciót nem valósítanak meg. A feldolgozáshoz programozásra, tehát pl. JavaScriptre, vagy PHP-ra van szükség.

előző oldal

random oldal

következő oldal

Eddig 1 hozzászólás van a témához:

2021-12-16 18:15 Papprika Köszi a segítséget

Új hozzászólás:
E-mail cím:	Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:	Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizenkilenc + hat? Számjegyekkel írja be!	Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.