Űrlapelemek alkalmazása

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

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.

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.

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'>

Nincs fájl kiválasztva

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'>

éééé.hh.nn.

(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álassz!---

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>

---Válassz!---

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'>

http://www.webkalap.hu/html/form/input.php

Egysoros szövegmező

Példa:

Felhasználó név:

<input type="text" name="username" size="35" maxlength ="50">

--------------

Jelszó mező

Példa:

Jelszó:

<input type="password" name="userpassword" size="20"

    maxlength="15"> (maximum 15 karakter)

-------------

Jelölő négyzet

HTML űrlapokon jelölő négyzetek alkalmazásával érhetjük el azt, hogy a weblap látogatója az előre felkínált lehetőségek közül tetszőleges számú opciót kiválaszthasson.

Példa:

Nyelvtudás:

<input type="checkbox" name="lang1" value="hu"

    checked>magyar<br>

<input type="checkbox" name="lang2" value="en">angol<br>

<input type="checkbox" name="lang3" value="de">német<br>

<input type="checkbox" name="lang4" value="other">egyéb<br>

------------

Rádió gombok

A rádió gombok is arra szolgálnak, hogy a weblap készítője által definiált lehetőségek közül a felhasználók választhassanak. Az azonos name attribútummal rendelkező rádió gombok alkotnak egy csoportot. Egy csoporton belül csak egyetlen egy gomb lehet bekapcsolt állapotban.

Példa:

Legmagasabb iskolai végzettség:

<input type="radio" name="education"

    value="elementary">alapfokú<br>

<input type="radio" name="education" value="secondary"

    checked>középfokú<br>

<input type="radio" name="education"

    value="higher">felsőfokú<br>

------------

Fájl csatolása

Példa:

Csatolt fájl:

<input type="file" name="attachment" size="40">

---------------

Űrlapelemek HTML-ben

Előismeret

Az alábbiakban áttekintjük a fontosabb űrlapelemeket.

Elem neve HTML elem Megjelenés

Beviteli mező (egysoros) <input type="text" />

Beviteli mező (többsoros) <textarea ></textarea>

Jelölőnégyzet <input  type="checkbox">

Rádiógomb <input type="radio" />

Elküdés gomb <input type="submit">

Lenyíló lista <select name=""><option values=""></select>

Rejtett mező <input type="hidden" /> nem látszik az oldalon

A rejtett mező nem látszik, de fontos szerepet játszhat. Az értékét ugyanúgy továbbítja, mint a többi változónak

Ürlap

<!DOCUMENT HTML>

<HTML>

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=UTF8" >

</HEAD>

<BODY>

    <h1>Kérem adja meg a nevét!</h1>

    <form method="GET" action="hello.php">

        <table>

            <tr>

                <td>Név:</td>

                <td><input type="text" name="nev" value="Írd ide a neved" /></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="submit" value="Elküld" /></td>

            </tr>

        </table>

    </form>

</BODY>

</HTML>

hello.php

<!DOCUMENT HTML>

<HTML>

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=UTF8" >

</HEAD>

<BODY>

    <h1>Üdvözöllek <?php echo $_GET['nev'] ?>!</h1>

</BODY>

</HTML>

http://szabolaszloistvan.blogspot.com/2016/10/php-alapismeretek.html