Személyes eszközök
Navigáció
Keresés

 
Eszközök

A InfoWiki wikiből

(Változatok közti eltérés)
(uploaded)
(uploaded)
1. sor: 1. sor:
-
<cim cim3="Űrlap HTML elemek"
+
<cim cim3="Űrlap elemek"
     cim2="Űrlap HTML"  
     cim2="Űrlap HTML"  
  cim1="CGI és Űrlap feldolgozás"  
  cim1="CGI és Űrlap feldolgozás"  
  prev="cgi-ea/page002"
  prev="cgi-ea/page002"
-
  next="cgi-ea/page101"
+
  next="cgi-ea/page055"
  kep="hz_csik.png"  
  kep="hz_csik.png"  
  back="frm1:Nyitolap"  
  back="frm1:Nyitolap"  
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">
62. sor: 59. sor:
-
== Input type TEXT ==
+
Ezeken felül szereplhet még egy form-on belül
-
 
+
* '''select''': kiválasztó lista
-
A '''text''' input mezőben egysoros beviteli adat (pl belépő név, születési év, stb) írható le:
+
* '''textarea''': többsoros szövegbeviteli rész
-
 
+
-
<code lang="html">
+
-
<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 lap 2009. június 27., 15:41-kori változata

Image:hz_csik.png
Űrlap 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 


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


Ezeken felül szereplhet még egy form-on belül

  • select: kiválasztó lista
  • textarea: többsoros szövegbeviteli rész
A lap eredeti címe: „http://wiki.ektf.hu/wiki/Cgi-ea/page051”
Nézetek
nincs sb_3.147.55.42 cikk