CREAREA FORMULARELOR HTML

           

Formularele HTML (form) se utilizează atunci când dorim să realizăm un site interactiv. Cu ajutorul lor , utilizatorul îşi poate bifa opţiunile ce corespund cu preferinţele lui. Aceste informaţii urmează a fi preluate şi prelucrate de aplicaţii aflate „în spatele” paginii ( aplicaţiile acestea se numesc script-uri CGI – Common Getway Interface şi rulează pe server-ul ce găzduieşte site-ul).

            De exemplu, vizitatorul unui site ce oferă crearea unui email va trebui să completeze un astfel de formular. Script-ul CGI preia datele din formular, include vizitatorul în baza de date a clienţilor şi creează un cont pentru noul client.

            Pentru a crea un astfel de formular se parcurg următorii paşi:

Pas 1:   Proiectarea formularului de intrare care va fi completat de vizitator

Pas 2:   Scrierea aplicaţiei care va prelucra informaţiile din formular

Pas 3:   Proiectarea documentului răspuns generat de script-ul CGI

 

Descrierea unui formular se realizează prin accesarea meniului Insert – Form – Define Form şi produce apariţia marcajelor: <form>….. </form>în Source.

Atributele acestui marcaj sunt:

1. Action=”valoare”  : stabileşte ce anume se va întâmpla cu datele scrise în formular

Unde valoare poate fi:

1. URL-ul unui script CGI (calea către un alt fişier) aflat de obicei în directorul htdocs de pe serverul www local sau se poate introduce adresa paginii unde dorim să ne redirecţioneze formularul odată ce el este completat
2. Action= „mailto:adresa_mail „ adică datele din formular vor fi trimise prin email la adresa specificată unde vor fi prelucrate ulterior
1. Method=”valoare” unde valoare poate avea valoarea POST sau GET.

Metoda GET  permite transmiterea unei cantităţi relativ mici de date, acestea fiind vizibile în URL-ul script-ului apelat şi este folosit pentru operaţiile care nu modifică nimic pe server.

Metoda POST permite transmiterea unei cantităţi mari de date, acestea nefiind vizibile în URL-ul script-ului şi este utilizat în operaţii de modificare, actualizare sau ştergere.

3. Name=”nume”  asociază formularului un nume unic.

 

Un formular poate conţine următoarele elemente:

-          câmpuri de text

-          butoane radio

-          căsuţe de validare

-          casete combinate

-          butoane de comandă

Toate aceste elemente pot fi definite cu unul din marcajele, după fiecare caz în parte: INPUT, TEXTAREA şi SELECT.

 

 

            Marcajul INPUT

 

 

Aceste marcaj poate avea atributele:

 

1. Type=”tipul_elementului” unde tipul_elementului poate fi unul din următoarele :

a)      text (caseta de text) : permite introducerea unui şir de caractere pe un singur rând

b)      radio (buton radio) : se definesc grupuri de butoane radio, numai unul din ele putând fi selectat la un moment dat

c)      checkbox (căsuţa de validare) : permite transmiterea unor date cu două valori posibile (Da/Nu sau Adevărat/Fals)

d)     hidden : defineşte câmpuri ascunse care nu sunt vizibile utilizatorului

e)      button (buton de comandă) : se utilizează împreună cu o secvenţă JavaScript sau VBScript, pentru a declanşa o anumită acţiune atunci când utilizatorul execută click pe suprafaţa acestuia

f)       submit (buton de comandă special) : determină transmiterea datelor din formular către scriptul CGI care va prelucra datele din formular

g)      reset : se întoarce la valorile iniţiale din câmpurile formularului

h)      image : permite înlocuirea unui buton SUBMIT cu o imagine specificată

i)        password (caseta de text):  caracterele introduse sunt înlocuite cu asteriscuri pentru preluarea parolelor de acces

j)        file (fişier): vă permite să selectaţi un fişier de pe disc, cu ajutorul unui buton de Browse.

2. Name=”nume” este un nume simbolic al elementului de formular folosit pentru a identifica în mod unic elementul de formular
3. Value=”valoare”

a)      pentru tipul TEXT specifică textul afişat implicit în câmpul text

b)      pentru tipul SUBMIT defineşte textul afişat pe suprafaţa butonului

c)      pentru butoanele radio şi checkbox-uri reprezintă valoarea trimisă către server atunci când utilizatorul  selectează respectivul element

4. Checked : precizează dacă butonul radio/checkbox a fost selectat de către vizitator
5. Size=”mărime” reprezintă numărul de caractere vizibile al căsuţei de text afişate
6. Maxlength =”mărime” reprezintă numărul maxim de caractere acceptate în caseta text

 

Câmpuri text

 

 

Formularul din figură utilizează: câmpuri text, butonul SUBMIT pentru a prelua ID-ul utilizatorului şi parola de acces şi butonul RESET care revine la valorile iniţiale.

 

 

Pentru a introduce un câmpul text  se procedează astfel: Din meniul Insert→Form→Form Field. Odată cu introducerea formularului se vor introduce şi cele două butoane SUBMIT şi RESETalegând din caseta Field Type comenzile Submit Button şi Reset button.

Pentru a alinia elementele din formular se va utiliza un tabel cu liniatura ascunsă (border=0).

Pentru a introduce câmpul text se alege în caseta Field Type opţiunea Text iar pentru câmpul de tip parolă alegem Password.

 

 

 

 

În fereastra Form Field Properties introducem proprietăţile casetei text/ password. În caseta FieldName se va numele casetei . Dacă activăm butonul More Properties printr-un click atunci vom putea preciza şi alte atribute ale casetei text: mărimea fontului în căsuţa  Field Size sau lungimea textului (care poate fi până la 255 caractere) în Maximum Length..

Pentru cele 2 butoane de comandă SUBMIT şi RESET  le vom scrie o etichetă în caseta FieldValue. Textul introdus reprezintă textul ce va fi afişat pe buton.

 

 

 

Sursa HTML a formularului din figura 1 este:

Butoane radio

 

 

Se utilizează atunci când vizitatorul trebuie să selecteze o singură variantă de răspuns din mai multe variante posibile. Din meniul Insert→Form→Form Field - Radio Button . Butoanele radio care fac parte din acelaşi grup trebuie să aibă acelaşi nume. Acţionarea unui buton din cadrul unui grup permite selectarea variantei corespunzătoare, valoarea transmisă fiind valoarea atributului FieldValue a butonului selectat.

 

 

După cum se observă în figura de mai jos  pentru a doua întrebare avem alt nume pentru grupul de butoane radio.

 

 

 

Sursa HTML a formularului este:

 

<form enctype="text/plain" method="post" action="www.google.ro" name="identificare"> <div align="center"></div> <b>1. Cand si-a incetat domnia Mihai Viteazu ?</b><br> <input name="intrebare1" value="1593" type="radio">1593<br> <input name="intrebare1" value="1600" type="radio">1600<br> <input name="intrebare1" value="1601" type="radio">1601<br> <br> <b>2. Vlad Tepes a fost nepotul lui...?</b><br> <input name="intrebare2" value="stefan" type="radio">Stefan cel Mare<br> <input name="intrebare2" value="mircea" type="radio">Mircea cel Batran<br> <input name="intrebare2" value="vlad" type="radio">Vlad Dracul<br> <br> <br> <input value="TRIMITE" name="trimite" type="submit">&nbsp;&nbsp;&nbsp; <input name="sterge" value="ANULEAZA" type="reset"><br> <br> </form>

 

Observaţi că la sfârşitul fiecărei linii apare eticheta <br> pentru a simula tasta Enter.

 

 

Caseta text ascunsă

 

Valoarea unei astfel de casete este trimisă la server alături de celelalte valori conţinute în controalele formularului. Ea nu este vizibilă utilizatorului şi se foloseşte în cadrul unei serii de formulare. Atunci când datele introduse în primul formular al seriei sunt necesare în formularele următoare, pentru a scuti utilizatorul să introducă datele în fiecare formular , ele pot fi stocate într-un câmp ascuns. Astfel se elimină şi eventualele erori care pot apărea atunci când  utilizatorul nu introduce aceleaşi valori. Sintaxa este următoarea:

 

<input type="hidden" name="ascuns" value="orice">

 

atributele type şi name sunt obligatorii; iar prin atributul value se transmite automat serverului valoarea acestuia; deci caseta nu-şi are utilitate dacă nu folosim şi acest atribut.

 

 

            Caseta de validare

 

 

            Se utilizează atunci când vizitatorul trebuie să aleagă o variantă din două posibile adică: selectată ( caseta are în interior un semn de bifare) sau neselectată (caseta rămâne goală) semnificând faptul că vizitatorul este de acord sau nu cu cerinţa exprimată de această casetă. Caseta va trimite opţiunea aleasă de vizitator prin valoarea stabilită de atributul Value. Starea unei astfel de casete se modifică atunci când vizitatorul execută click pe aceasta.

 

 

Butonul imagine

 

 

            Se utilizează în locul butonului de expediere a valorilor din formular (submit). Are şi un alt aspect în pagină şi are sintaxa:

 

<input  type="image" src="url_fişier_imagine" name="nume" align=”aliniere” >

 

atributele SRC şi TYPE sunt obligatorii , unde SRC reprezintă calea până la fişierul ce conţine imaginea

name= atribuie un nume acestui control

align= orice valoare (top/ middle/ bottom) , aliniere care va fi relativă la textul înconjurător.

 

 

           

            Butonul fişier

 

Este un buton ce permite alegerea unui fişier de pe disc , cu ajutorul butonului de căutare Browse. Sintaxa este:

<input type=”file” name=”aaaa”>

 

           

 

Marcajul TEXTAREA

 

           

            Acest marcaj se utilizează pentru cazurile când vizitatorul doreşte să introducă un text mai mare care se întinde pe mai multe rânduri. Din meniul Insert→Form→Text Area . Atributele acestui marcaj:

 

 

În caseta Initial value se va introduce un text ajutător pentru vizitatorul paginii ce va fi afişat în interiorul zonei de text, după cum se poate observa în figură. Columns reprezintă lungimea unui rând măsurată în caractere iar Rows specifică numărul de rânduri afişate.

 

 

            Marcajul SELECT

 

Acest marcaj introduce liste derulante de opţiuni. Din meniul Insert→Form→Selection List.

 

 

În căsuţa ListName introducem numele marcajului. Prin căsuţa Heightcorespunzătoare atributului Size  din codul HTML, se specifică  pe câte rânduri apar scrise valorile din listă.Bifarea în caseta corespunzătoare lui Multiple Selections semnifică faptul că se permite/ sau nu se permite utilizatorului selectarea mai multor opţiuni din listă.

 

 

 

            Pentru a introduce valorile din listă daţi click pe butonul Add Option şi introduceţi valorile dorite în caseta Text . La transmiterea datelor din formular , scriptul CGI primeşte pentru fiecare dintre opţiunile selectate de vizitator, valorile precizate prin bifarea căsuţei Value..

 

 

Codul HTML ar arăta astfel:

 

<select size="1" name="varsta"> <option value="10-16">10-16</option> <option value="17-21">17-21</option> <option value="22-30">22-30</option> <option value="31-35">31-35</option> </select>

 

 

Observaţie:

Într-o pagină putem avea mai multe formulare, fiecare formular având propriul buton de expediere a datelor.