Codul HTML utilizat pentru a construi paginile cu formulare este similar celui folosit pentru oricare alta pagina. La aceste pagini adaugati etichete care sunt specifice formularelor, l 454i81e a fel cum unele etichete sunt folosite pentru tabele si pentru alte cadre.
Aceste etichete specifice formularelor va permit sa adaugati tot felul de caracteristici paginii dumneavoastra cu formular, ca butoane, casete de validare, liste de derulare, casete pentru parole si casete pentru text. Aceste articole ofera o cale rapida si eficienta de interactiune între utilizator si dumneavoastra sau site-ul dumneavoastra.
Pentru a construi un formular folositi eticheta <Form>. Între eticheta <Form> de deschidere si cea de închidere se afla elementele formularului, cât si etichetele de structura care aranjeaza formularul în pagina. Puteti introduce într-o pagina câte formulare doriti, dar nu le puteti imbrica - ceea ce înseamna ca nu puteti introduce un formular în alt formular.
De obicei, eticheta de deschidere a elementului formular include doua atribute: method si action. Atributul method poate lua valorile get sau post, care determina modul în care datele din formularul dumneavoastra sunt trimise la programul de scriptare pentru a fi prelucrate.
Pont de folosire rapida:
<Form action="actiune" method="medoda" enctype="tipcriptare" accept-charset="setcaractere">
unde actiune specifica agentul de prelucrare a formularului; metoda arata ce metoda HTML va fi folosita pentru a trimite setul de date ale formularului; tipcriptare indica tipul continutului folosit pentru a trimite formularul la server; si setcaractere cuprinde lista de codificari de caractere pentru datele introduse.
Atributul action este un indicator catre scriptul care prelucreaza formularul de partea serverului. Actiunea poate fi indicata de o cale relativa sau de o adresa URL catre un script de pe serverul dumneavoastra sau din alta parte.
Adaugarea de câmpuri de text cu eticheta <INPUT>
Eticheta de baza pentru definirea fiecarui element dintr-un formular online este eticheta <Input>, care se foloseste pentru a adauga butoane de actiune, imagini, casete de validare, butoane radio, parole si câmpuri de text.
Câmpurile de text sunt elementele fundamentale ale unui formular. Un câmp de text accepta aproape orice tip de date de intrare si este unul dintre cele mai plurivalente elemente, adaptabil la aproape la orice.
ex.1:<b>Name:</b>
<input type="text" name="narcisa">
Pont de folosire rapida:
<Input type="tip" name="nume" value="valoare" CHECKED size="marime" maxlength="lungime_maxima">
unde tip specifica text, password, hidden, checkbox, radio, submit, reset, button, file sau image; nume specifica eticheta nume; valoare comunica valoarea initiala; marime spune agentului utilizatorului latimea initiala a controlului si lungime_maxima specifica numarul maxim de caractere pe care le poate introduce utilizatorul.
Câmpul password a fost proiectat în mod special pentru introducerea de parole. Aceste câmpuri de text sunt foarte asemanatoare câmpurilor de text obisnuite, cu exceptia faptului ca, pentru a masca informatiile, caracterele introduse apar ca asteriscuri.
Orice este introdus într-un câmp password este ascuns privirii, pentru a proteja parolele, numerele de cont sau alte informatii secrete. Cu toate ca afisarea este mascata pe ecran, serverul primeste textul original.
Eticheta <Input> este folosita pe scara larga, poate din cauza ca este cea mai usor de creat. Exista multe lucruri pe care nu le puteti face cu un câmp de text; pe de alta parte, poate nu doriti sa acordati utilizatorilor libertatea totala de a introduce orice text doresc. Poate vreti sa le dati doar posibilitatea de a alege.
Butoanele radio indica o lista de articole dintre care doar unul poate fi ales, similar cu o întrebare care are un singur raspuns. Daca este selectat un buton radio din lista, toate celelalte butoane radio din aceeasi lista sunt deselectate. Puteti face o singura selectare când folositi butoanele radio. Acest lucru este foarte important de luat în considerare când va vreti formularul.
Pont de folosire rapida:
<Input type="radio" name="nume" value="valoare" checked>
Puteti atât de usor sa folositi grupuri de butoane radio multiple, independente, atribuind nume diferite pentru fiecare grup. Vom face mai usoara selectarea organizând un pic formularul:
ex.2:
Unde doriti sa mergeti în vacanta:
<ol>
<li><input type="radio" nume="vacation" value="Aruba">Aruba<br>
<ul>
<li><input type="radio" name="location1" value="Beachfront">Beach-front<br>
<li><input type="radio" name="location1" value="Inland">Inlandt<br>
</ul>
<li><input type="radio" name="vacation" value="Paris">Paris<br>
<li><input type="radio" name="vacation" value="Seattle">Seattle<br>
<li><input type="radio" name="vacation" value="Houston">Houston<br>
</ol>
În mod prestabilit nici un buton radio nu este selectat. Un buton implicit poate fi preselectat. Puteti specifica butonul implicit selectat dintr-un grup folosind atributul CHECKED.
Când sunt necesare selectari multiple, va trebui sa folosim casete de validare. Multe întrebari pur si simplu nu au un singur raspuns, deci aici intra în actiune casetele de validare. Acestea, ca si butoanele radio, se plaseaza în grup. Fiecare caseta de validare poate fi selectata sau nu. În mod prestabilit ele nu sunt selectate.
Pont de folosire rapida:
<input type="checkbox" name="nume" value="valoare" checked>
ex.3:
Unde doriti sa va petreceti vacanta?
<input type="checkbox" name="Vacation" value="Aruba">Aruba<br>
<input type="checkbox" name="Vacation" value="Paris">Paris<br>
<input type="checkbox" name="Vacation" value="Seattle">Seattle<br>
<input type="checkbox" name="Vacation" value="Houston">Houston<br>
Casetele de validare pot de asemenea fi preselectate, introducând atributul CHECKED în eticheta <input>, exact ca si pentru butoanele radio.
Selectarile permit cititorului sa aleaga unul sau mai multe articole sau dint-un meniu sau dintr-o lista derulanta. Ele sunt similare în functionare butoanelor radio sau casetelor de validare, dar sunt afisate altfel pe ecran.
Selectarile sunt create cu eticheta <Select>, iar optiunile individuale din cadrul selectiei sunt indicate de eticheta <Option>.
Pont de folosire rapida:
<select name="nume" size="marime" MULTIPLE SELESTED>
ex.4:
Unde doriti sa va petreceti vacanta?
<select name="alegere">
<option>Aruba
<option>Paris
<option>Seattle
<option>Houston
</select>
Daca pentru formularul dumneavoastra nu este de ajuns un câmp obisnuit de text, puteti folosi un câmp de tip zona de text. Zonele de text sunt grozave când vreti sa acordati cu larghete spatiu utilizatorilor, pentru ca acestia sa scrie cât text doresc. Aceasta este de obicei un lucru potrivit pentru câmpurile de comentarii sau de sugestii, unde este bine sa-i încurajati pe utilizatori sa scrie pâna îi dor degetele.
Ca si alte etichete, eticheta <Textarea> trebuie folosita cu eticheta de închidere</Textarea>. Textul scris între eticheta de deschidere si cea de închidere va fi textul implicit introdus în câmpul de text.
Pont de folosire rapida:
<Textarea name="nume" rows="linii" cols="coloane" WRAP="aranjare">
unde nume este numele elementului; linii specifica numarul de rânduri de text vizibile; coloane specifica latimea vizibila în functie de latimea medie a caracterelor; iar aranjare specifica formatul afisarii.
Pentru a specifica modul în care browser-ul face sa se aseze pe rânduri, adaugati atributul WRAP etichetei <TEXTAREA.>:
Wrap=off Implicit, textul se va afisa pe un rând, care se va derula catre dreapta pâna în momentul în care utilizatorul va apasa tasta Enter pentru a trece la un rând nou.
Wrap=soft(sau virtual) Face ca textul sa se limiteze automat la fereastra browser-ului, dar este trimis serverului tot ca un singur rând.
Wrap=hard(sau phisical) Face ca textul sa se aseze automat pe rânduri în fereastra browser-ului; în plus, textul este trimis serverului cu caractere de rând nou în fiecare loc în care textul a trecut pe rândul urmator.
Butoanele Submit si Reset (de trimitere si de reîncepere)
Un ultim lucru de facut pentru a folosi toate aceste informatii valoroase este sa luam datele din formularul dumneavoastra si sa le trimitem scriptului de la server. Pentru aceasta va trebui sa folosim un buton de trimitere: Submit. Cu toate ca este inclus în tipurile etichetei <Input>, tipul SUBMIT are ca efect aparitia pe ecran a unui buton, care, când se executa clic pe el, trimite continutul formularului scriptului specificat în atributul action al etichetei <Form>.
Eticheta implicita a butonului Submit este pur si simplu "Submit". Puteti însa personaliza aceasta eticheta folosind atributul value al butonului Submit.
<input type="submit" value="Trimitere">
Ca si atributul Submit, atributul Reset va crea un buton în formular. Daca executati clic pe butonul Reset, se sterg modificarile aduse formularului si se refac valorile implicite specificate în elementele individuale ale formularului. Daca nu este definita o valoare implicita, orice continut al elementului este sters.
Ca si la butonul Submit, puteti modifica numele implicit al butonului Reset folosind atributul Value al etichetei lui.
|
