A InfoWiki wikiből
(Változatok közti eltérés)
(uploaded) |
(uploaded) |
||
42. sor: | 42. sor: | ||
* input type="button" - egyszerű form nyomógomb | * input type="button" - egyszerű form nyomógomb | ||
+ | Ezeken felül szereplhet még egy form-on belül | ||
+ | * '''select''': kiválasztó lista | ||
+ | * '''textarea''': többsoros szövegbeviteli rész | ||
<code lang="html"> | <code lang="html"> | ||
59. sor: | 62. sor: | ||
+ | == Input type TEXT == | ||
+ | |||
+ | A '''text''' input mezőben egysoros beviteli adat (pl belépő név, születési év, stb) írható le: | ||
+ | |||
+ | <code lang="html"> | ||
<span>Belépő neved:</span> | <span>Belépő neved:</span> | ||
66. sor: | 74. sor: | ||
size="20" | size="20" | ||
maxlength="40" | maxlength="40" | ||
- | + | value="<belépő nevet írd ide>" | |
/> | /> | ||
+ | </html> | ||
+ | |||
+ | Fontos részek: | ||
+ | * '''name''': a beviteli mező neve (formon belül egyedi azonosító) | ||
+ | * '''size''': a formon megjelenő méretét (szélesség) befolyásoló érték | ||
+ | * '''maxlength''': hány karaktert lehet beírni neki | ||
+ | * '''value''': a form megjelenésekor ez lesz a benne szereplő (előre kitöltött) érték | ||
+ | == Input type PASSWORD == | ||
<span>Belépő jelszó:</span> | <span>Belépő jelszó:</span> | ||
A lap 2009. június 27., 10:53-kori változata
Az űrlap
Az űrlapokat a HTML leírásban form tag-ek jelölik. Az űrlapok olyan elemekből állhatnak, amelyet a HTML, XHTML szabványok megengednek.Ez szegényes készletnek tűnhet egy Windows Forms vagy egyéb gazdag felülethet szokott programozónak - de ezen készletből kell akkor is gazdálkodni. Ugyanakkor jegyezzük meg, hogy a JavaScript kliens oldali programozás segítésével ezen vezérlők működése, funkcionalitása jelentősen bővíthető.
A HTML elemek legnagyobb része az input tag valamely altípusa (type módosító). Ezek az alábbiak lehetnek:
- input type="text" - egysoros szövegbeviteli elem
- input type="password" - egysoros jelszóbeviteli elem
- input type="checkbox" - kipipálható (igen/nem) beviteli elem
- input type="radio" - választást lehetővé tevő elem
- input type="file" - file feltöltést lehetővé tévő elem
- input type="hidden" - rejtett, adattartalommal bíró elem
- input type="submit" - a form kitöltését követő beküldést előidéző gomb
Valamint következzen néhány (nem annyira direktben) használható form elem:
- input type="image" - kép, melyre kattintani lehet, és a kattintási pozíció lesz a bevitel értéke
- input type="reset" - a formot üríti, újra kezdhetjük a kitöltést
- input type="button" - egyszerű form nyomógomb
Ezeken felül szereplhet még egy form-on belül
- select: kiválasztó lista
- textarea: többsoros szövegbeviteli rész
<form ...> <input type="text" .... /> <input type="password" .... /> <input type="checkbox" .... /> <input type="radio" .... /> <input type="submit" .... /> <input type="image" .... /> <input type="reset" .... /> <input type="button" .... /> <input type="hidden" .... /> <input type="file" .... /> </form>
Input type TEXT
A text input mezőben egysoros beviteli adat (pl belépő név, születési év, stb) írható le:
<span>Belépő neved:</span> <input type="text" name="login_nev" size="20" maxlength="40" value="<belépő nevet írd ide>" /> </html> Fontos részek: * '''name''': a beviteli mező neve (formon belül egyedi azonosító) * '''size''': a formon megjelenő méretét (szélesség) befolyásoló érték * '''maxlength''': hány karaktert lehet beírni neki * '''value''': a form megjelenésekor ez lesz a benne szereplő (előre kitöltött) érték == Input type PASSWORD == <span>Belépő jelszó:</span> <input type="password" name="jelszo" value="" /> <span>Elmúltál már 18 éves?</span> <input type="checkbox" name="elmult_18" value="igen„ checked /> <span>Életkorod:</span><br/> <span>fiatalabb mint 18</span> <input type="radio" name="eletkor" value="fiatalabb_18" checked/><br/> <span>öregebb mint 18</span> <input type="radio" name="eletkor" value="oregebb_18"/><br/> <span>öregebb mint 60</span> <input type="radio" name="eletkor" value="oregebb_60" /><br/> <input type="submit" name="submit_btn" value="Feltöltés" /> <input type="image" src="./images/feltoltes.png" name="submit_btn" value="Feltöltés" /> <input type="image" src="./images/feltoltes.png" name="submit_btn" value="Feltöltés" /> <input type="reset" name="reset_btn" value="Minden mező törlése" /> <input type="button" value="Klikk csak ide de sebesen" onclick="...." /> <input type="hidden" name="admin" value="true" /> <form action="..." method="post" enctype="multipart/form-data"> <input type="file" name="picture" /> <textarea name="leiras" cols="50" rows="10" > Hello akárki </textarea> <button name="ok_button" value="oké" >felirat</button> <form action="http://localhost/proba.php" method="post"> <table> <tr> <td>Belépő név:</td> <td>*</td> <td><input type="text" name="login_nev"/></td> </tr> <tr> <td>Jelszó:</td> <td>*</td> <td><input type="password" name="login_jelszo"/></td> </tr> <tr> <td>Életkor:</td> <td>*</td> <td><input type="checkbox" name="elmult_18" value="igen"/></td> </tr> <tr> <td colspan="3"><input type="submit" name="submit" value="Feltöltés"/></td> </tr> </table> </form> <form action="http://localhost/proba.php" method="post"> <div style="width:310px;"> <div style="float:left;width:100px;">Belépő név:</div> <div style="float:left;width:10px;">*</div> <div style="float:left;width:200px;"><input type="text" name="login_nev"/></div> <div style="clear:both;"/> <div style="float:left;width:100px;">Jelszó:</div> <div style="float:left;width:10px;">*</div> <div style="float:left;width:200px;"><input type="password" name="login_jelszo"/></div> <div style="clear:both;"/> <div style="float:left;width:100px;">Életkor:</div> <div style="float:left;width:10px;">*</div> <div style="float:left;width:200px;"><input type="checkbox" name="elmult_18" value="igen"/></div> <div style="clear:both;"/> <div style="width:310px;"><input type="submit" name="submit" value="Feltöltés"/></div> </div> </form>