A InfoWiki wikiből

A lap 2009. június 26., 21:25-kori változata

Űrlap HTML elemek

Űrlap HTML

CGI és Űrlap feldolgozás

Hernyák Zoltán

Előadás

Vizsga

Fóliák

Gyakorlat

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

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

Belépő neved:

<input

  type="text"
  name="login_nev"
  size="20" 
  maxlength="40"
 value="<belépő nevet írd ide>"

/>

Belépő jelszó:

<input

  type="password"
  name="jelszo"
  value=""

/>

Elmúltál már 18 éves?

<input

   type="checkbox"
   name="elmult_18"
   value="igen„
   checked

/>

Életkorod:

fiatalabb mint 18

 <input  type="radio" name="eletkor"  value="fiatalabb_18" checked/>

öregebb mint 18

 <input  type="radio" name="eletkor"  value="oregebb_18"/>

öregebb mint 60

 <input  type="radio" name="eletkor"  value="oregebb_60" />

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

</form>

<form action="http://localhost/proba.php" method="post">

 <div style="clear:both;"/>

 <div style="clear:both;"/>

 <div style="clear:both;"/>

</form>