Formos apibrėžiamos naudojant form elementą. Visi elementai, esantys formos viduje, yra priskiriami tam atitinkamai formai.
<form> … </form>
Į pradinį <form> laukiamas action atributas. Čia, galiausiai, nurodoma, kas turi būti padaryta su formos duomenimis. Paprastai tai yra PHP programos.
<form method="post" action="form.php"> … </form>
Pastebėkite, kad nurodytas failas gali būti tikrai radomas. Taigi, turite nurodyti teisingą kelią.
Vietoje scenarijaus galima nurodyti taip pat elektroninio pašto adresą.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Šiuo atveju formos duomenys bus išsiųsti el. paštu. Tačiau tai nėra elegantiška, todėl dažniausiai pasirenkama scenarijaus varianta. Bet jei kada nors neturėtumėte scenarijaus po ranka, galėsite formos siuntimą atlikti el. paštu.
Dar vienas svarbus formos elemento atributas yra method. Nurodant jį, nurodoma HTTP perdavimo metodą formos turiniui nusiųsti. Yra du skirtingi variantai, kuriuos galima pasirinkti.
• post = Formos duomenys yra siunčiami į nurodytą adresą dvejais etapais. Pirmiausia naršyklė susisiekia su nurodytu adresu. Jei tai pavyksta, formos duomenys perduodami scenarijui.
• get = Šiuo metodu formos duomenys pridedami prie URL pabaigos, kuriai buvo priskirtas action atributas. Formos duomenys taip pat matomi naršyklės adreso juostoje.
Žinoma, kyla klausimas, kurį iš šių dviejų variantų turėtumėte pasirinkti, norėdami siųsti formos duomenis. Iš esmės galite naudoti abu. Bet ypač, kai kalbama apie didelius duomenų kiekius ir failų įkėlimą į serverį, turėtumėte rinktis post metodą.
Paprasti formos laukai
Iki šiol buvo apibrėžta tik formos išorinė struktūra. Naršyklėje formos dar nematyti.
<form method="post" action="form.php"> … </form>
Dabar laikas užpildyti formą turiniu.
Turbūt labiausiai reikalingas laukų tipas yra vienos eilutės įvesties laukas. Juos naudojame, pvz., paprašydami vardo, pavardės ir el. pašto.
Šios laukų tipas apibrėžiamas taip:
<input type="text" name="vorname" />
input elementui priskiriamas atributų-vieneto derinys type="text". Be to, kiekvienam įvesties laukui turėtumėte suteikti vidinį identifikatorių. Šis identifikatorius turi būti unikalus dokumente. Jis ypač naudingas, kai formos duomenys tvarkomi scenarijumi. Identifikatoriuje nepanaudokite tuščių ar specialių simbolių.
Pamatę rezultatą naršyklėje, pamatysite štai tokį vaizdą:
Kol kas tai nepersmelkstantis vaizdas. Bet jei paspausite ant teksto lauko, pastebėsite, kad jame jau galite įvesti duomenis.
Tai, kas dar reikalinga, kad lankytojai žinotų, ką įvesti į lauką, yra antraštė.
Vorname: <input type="text" name="vorname" />
Čia vėl, pažvelgus į naršyklę, matysi norimą rezultatą.
Suteikite laukų plotį naudodami atributą size.
Vorname: <input type="text" name="vorname" size="30" /> <br /> Postleitzahl: <input type="text" name="plz" size="5" />
Atributui size nustumkite norimą lauko plotį.
Čia "5" turi būti tiksliai penki simboliai. Šiam tikslui taip pat naudingas atributas maxlength. Jis nurodo maksimalų simbolių skaičių, kuris leidžiamas įvesti į lauką. Čia yra dar vienas pavyzdys:
Vorname: <input type="text" name="vorname" size="30" maxlength="40" />
Jei maksimalus įvestų simbolių skaičius nurodytas atributoje maxlength yra didesnis nei atributas size, ilgesni įrašai automatiškai bus slypiami lauke.
Naudodami atributą value, galite pasiekti įrašo iš anksto nustatymą.
Vardas: <input type="text" name="vorname" value="Jūsų vardas" />
Pridėtas value yra rodomas kaip numatytasis laukas.
Vartotojai gali išvalyti šį numatytąjį vertę.
Galite užkirsti kelią duomenų šalinimui iš laukų. Tam apibrėžiama įvesties laukas, kuris esmėje nebėra įvesties laukas. Tokius laukus dažnai naudojami informacijai pateikti. Tai galėtų būti naudinga pavyzdžiui skaičiuotuvui rodyti skriptu nustatytas vertes. Taip pat galima rankiniu būdu užpildyti lauką tekstu, kurį lankytojai nebegali keisti. (Pastaba: Euro ženklas PDF vaizde, deja, neteisingai nepateikiamas).
<input name="kaina" type="text" value="€ 699.-" readonly />
Norint nustatyti lauką tik skaitymui, jam priskiriama savybė readonly. Taip pat čia dar kartą pažvelkime į rezultatą:
Numatytasis tekstas rodomas tiesiogiai. Tačiau jo negalima ištrinti.
Apibrėžti slaptažodžio laukus
Įvesti duomenys į įvesties lauką nėra matomi, o naršyklė automatiniu būdu juos pakeičia žvaigždutėmis/taškais. Šios varianto privalumas: asmenys, galintys jus stebėti įvedant slaptažodį, negali jo iššifruoti. Tačiau neteisinga manyti, kad slaptažodžių laukai automatiškai yra saugūs. Iš tikrųjų slaptažodžiai normaliose HTTP sąlygose yra perduodami aiškia tekstu užpildžius formą.
Slaptažodžių laukai apibrėžiami taip:
<input type="password" name="slaptazodis" />
type-Savybei priskiriamas password kaip reikšmė. Taip pat čia dar kartą pažvelkite į rezultatą.
Jei įrašysite kažką, naršyklės tai automatiškai padarys neišskaitoma.
