Cgi-ea/page051

A InfoWiki wikiből

A lap korábbi változatát látod, amilyen 78.92.77.176 (vita) 2009. június 27., 10:53-kor történt szerkesztése után volt.

(eltér) ←Régebbi változat | Aktuális változat (eltér) | Újabb változat→ (eltér)

Ugrás:navigáció, keresés

Űrlap HTML elemek

Űrlap HTML

CGI és Űrlap feldolgozás

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ő.

<form ...>
  <label ... />
 
  <input   ..../>
  <select .../>
  <textarea ... />
 
 <button ... />
</form>

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>

A InfoWiki wikiből

Az űrlap

Input type TEXT

Nézetek