HTML formos

Forma, tai elementas, kuris savyje talpina formos elementus.

Formos elementai, tai elementai, kurie leidžia vartotojui įvesti informaciją į formą.

• teksto laukai - text ir textarea
• išsiskleidžiantys pasirnkimo meniu - select
• radijo myktukai - radio
• kontrolinio įvedimo elementai - checkbox

Formos pradžia nurodoma su <form> žyme ir pabaiga su </form>

Įvedimas

Labiausiai formose naudojama žymė yra <input>, kuri nurodo įvedimą. Įvedimo tipas nurodomas <input> žymės parametre type. Žemiau yra paaiškinti pagrindiniai įvedimo tipai.

HTML formos - teksto laukai

Teksto laukai yra naudojami kai norite leisti vartotojui įvesti informaciją raidžių, skaičių ar kitų simbolių pavidalu.

1
2
3
4
5
6
7

<form>
  Vardas: 
  <input type="text" name="vardas">
  <br />
  Pavardė: 
  <input type="text" name="pavarde">
</form>

rezultatas:

Pastaba: pačios formos niekur nesimato. Taip pat daugelyje naršyklių teksto laukų plotis pagal nutylėjimą yra 20 simbolių.

HTML formos - radijo mygtukai

Radijo mygtukai yra naudojami, kai norite leisti vartotojui pasirinkti vieną iš pateiktų variantų.

1
2
3
4

<form>
  <input type="radio" name="lytis" value="vyras"> Vyras<br>
  <input type="radio" name="lytis" value="moteris"> Moteris
</form>

rezultatas:

pastaba: radio mygtukai yra naudojami tada, kai norime leisti pasirinkti tik vieną variantą

Kontrolinio įvedimo elementas - checkbox

Šis tipas yra naudojamas, kai norima suteikti vartotojui galimybę pasirinkti kelis variantus iš visų pateitkų

1
2
3
4
5
6
7
8
9
10

<form>
  Aš myliu tėtį:
  <input type="checkbox" name="myliu" value="teti">
  <br />
  Aš myliu sesę: 
  <input type="checkbox" name="myliu" value="sese">
  <br />
  Aš myliu Gerdą: 
  <input type="checkbox" name="myliu" value="gerda">
</form>

rezultatas:

HTML formos - atributas action ir duomenų pateikimo mygtukas

Kai vartotojas paspaudžia duomenų pateikimo mygtuką (submit), tada formos duomenys yra išsiunčiami serveriui. Formos action atribute nurodoma koks failas priims siunčiamus duomenis.

1
2
3
4
5

<form name="input" action="html_formos_ivedimas_pvz.php" method="get">
  Vardas: 
  <input type="text" name="vardas">
  <input type="submit" value="Siųsti">
</form>

rezultatas:

Jei įvesite duomenis į šį lauką, jie bus išsiųsti serveryje patalpintam failui html_fromos_ivedimas_pvz.php ir jame esantis kodas priėmęs duomenis, juos išves į naršyklę. Kaip sukurti tokio tipo failus galite pažiųrėti php pamokose.

Pavyzdyje naudoto php failo kodas:

1
2
3
4

Jūsų įvestas vardas:<br />
<?php
print($_GET['vardas']);
?>

HTML formų žymės

Visos žymės pagal abecelę

Visos žymės pagal funkcijas

Pavyzdžiai

Išskleidžiamo pasirinkimo įvedimas
Duomenų pateikimo mygtukas
Fieldset pavyzdys