Formulare si introducerea datelor de la utilizator

Formulare si introducerea datelor de la utilizator

2.1.1Formulare HTML

Formularele HTML sunt delimitate de marcajul <FORM> cu corespondentul sau </FORM> care se specifica prin <FORM ACTION=url METHOD=metoda>, unde url-ul indica fisierul sau aplicatia aflata la distanta care urmeaza sa prelucreze informatiile iar metoda se specifica prin GET sau POST. Pentru formularele Web exista 2 metode prin care informatiile pot fi transmise de la programul de navigare Web la server-ul din celalalt capat al retelei. Daca se transmit informatii cuprinse într-un formular iar URL-ul de destinatie include informatiile pe care le 656b14g -ati introdus, metoda utilizata este GET. Cealalta metoda este POST si este aceea cînd se transmite informatia dar URL-ul de destinatie nu contine elemente suplimentare adaugate la sfârsit.

Marea majoritate a câmpurilor unui formular destinate introducerii datelor se specifica prin intermediul marcajului <INPUT> care are atribute diferite - prezentate în Rezumat 9.

Programele e navigare Web curente permit lucruri cu difertite tipuri de (<INPUT>) fiecare dintre ele determinând un tip diferit de iesire, tipurile de intrari utilizator sunt:

TEXT - este tipul stabilit cu SIZE utilizat la specificarea maarimii prestabilite a casetei ce se creaza

PASSWORD - câmp de text datele utilizatorului fiind afisate cu asteriscuri sau alte simboluri , pentru securitate, se poate utiliza MAXLENGTH pentru a se specifica lungimea maxima de caractere pentru parola

CHECKBOX - asigura o singura caseta de validare, optiune CHECKED permite specificarea marcarii sau nu a a cesteia în mod prestabilit, optiunea VALUE specifica textul asociat casetei de validare

HIDDEN - permite transmiterea informatiilor programului care prelucreaza datele utilizator fara ca utilizatorul sa le vada pe ecran, utila când pagina ce contine formularul HTML este generata automat de un script CGI.

FILE - permite utilizatorului sa transmita serverului un fisier, care poate fi specificat prin nume sau ales utilizând buton Browse.

RADIO - afiseaza un buton cu interblocare, butoanele cu interblocare diferite cu acelasi NAME=valoare sunt grupate în mod automat si un singur buton poate fi selectat

Cele mai importante tipuri <INPUT> t:

SUBMIT - detremina aparitia unui buton în formular care atunci cînd e apaat transmite continutul formularului la server

IMAGE - identic cu SUBMIT dar în locul butonului puteti specifica o imagine grafica pentru transmisie date sau un buton de Enter

RESET - permite utilizatoilor stergerea continutului tuturor câmpurilor formularului

Marcajul <SELECT> este un meniu derulant de optiuni iar parametrul <OPTION> defineste fiecare optiune a meniului. Pentru toate marcajele utilizate în cadrul formularelor trebuie specificat parametrul NAME si toate numele trebuie sa fie unice în carul fiecarui formular. În cadrul marcajului <SELECT> parametrul SIZE se utilizeaza pentu indicarea numarului de articole de meniu ce vor fi asisate odata, iar parametrul MULTIPLE specifica dreptul utilizatorilor de a selecta mai mult de o optiune. Daca exista o valoare prestabilita trebuie adaugati SELECTED iar marcajul <OPTION> indica acea valoare.

Marcajul <TEXTAREA> permite construirea unei casete de intrare pe multiple. Acest marcaj permite definirea dimensiunii casetei de intrare de tip text prin ROWS si COL.

Daca doriti sa creati un formular prin intermediul caruia vizitatorii sa va paota transmite mesaje prin posta electronica puteti utiliza un formular ca si cel de mai jos:

<FORM ACTION=https://www.intuitive.com/colweb/apps/query.cgi METHOD=GET>

<B>Va rugam transmiteti-ne parerea dumneavoasta despre site-ul nostru</B>

<P>

<B>Nume:</B>

<INPUT TYPE=text NAME=nume_vizit>

<P>

<B>E-mail:</b>

<INPUT TYPE=text NAME=email>

<P>

<B>Comentarii:</b><BR>

<TEXTAREA NAME=coment ROWS=5 COLS=60>

</TEXTAREA>

<P>

<INPUT TYPE=SUBMIT VALUE="trimite mesaj">

<INPUT TYPE=RESET VALUE="sterge text introdus">

</FORM>

Daca doriti sa utilizati o imagine grafica pe post de buton de transmisie se poate utiliza INPUT TYPE=image si specificati imaginea dorita. Butonul de reinitializare trebuie sa fie nelipsit din orice formular!Exemplul e mai jos include un grup de butoane cu interblocare si un meniu derulant.

<FORM ACTION=https://www.intuitive.com/colweb/apps/query.cgi METHOD=GET>

<B>Va rugam transmiteti-ne parerea dumneavoasta despre site-ul nostru</B>

<P>

<B>Nume:</B>

<INPUT TYPE=text NAME=nume_vizit>

<P>

<B>E-mail:</b>

<INPUT TYPE=text NAME=email>

<P>

<B>Ati aflat despre site-ul nostru din:</B>

<SELECT NAME=gasit>

<OPTION SELECTED>(alegeti o optiune)

<OPTION>Yahoo

<OPTION>HotBot

<OPTION>PC Magazine

<OPTION>CNN On Line

<Option>Other.

</SELECT>

<B>Varsta:</B>

<INPUT TYPE=radio Name=varsta VALUE="copil"> sub 18

<INPUT TYPE=radio Name=varsta VALUE="tanar"> 18-30

<INPUT TYPE=radio Name=varsta VALUE="30plus"> 30-50

<INPUT TYPE=radio Name=varsta VALUE="batran"> peste 50

<P>

<B>Comentarii:</b><BR>

<TEXTAREA NAME=coment ROWS=5 COLS=60>

</TEXTAREA>

<P>

<INPUT TYPE=SUBMIT VALUE="trimite mesaj">

<INPUT TYPE=RESET VALUE="sterge text introdus">

</FORM>

Marcajul <SELECT> construieste meniul derulant iar setul de butoane e specificat prin INPUT TYPE=radio. Fiecare buton dispune de acelasi nume deci fac parte din aceeasi familie si numai unul dintre ele e selectat la un moment dat. Daca ar avea nume diferite s-ar putea selecta mai multe optiuni. Daca alegeti categoria 18-30, valoarea care va fi transmisa server-ului este varsta=tanar.

Marcajul <TEXTAREA> are diferite optiuni prima este NAME care e obligatorie, optiunile ROWS si COLS pentru dimensiune câmp text rezultat. Optiunea WRAP semnifica faptul ca textul introdus de utilizator se va deplasa automat la linie noua când textul ajunge la marginea din dreapta

2.1.2.Creare formular propriu

Cea mai obisnuita strategie pentru a crea formulare atractive este amplasarea acestor câmpuri într-un tabel, lucru ce permite alinierea relativ usoara a tutror câmpurilor si casetelor de date de intrare.

Exemplul de mai jos prezinta o fereastra de conectare a unor agenti comerciali la locatia OrderEasy.

<BODY>

<CENTER>

<IMG SRC="logo.gif"

<P>

<FONT size=7><B>Conectare agent comecial</B></FONT>

<P>

<FORM ACTION="none" METHOD=post>

<TABLE BORDER=0 WIDTH=75% BGCOLOR=#DDDDDD CELLPADDING=15>

<TR><TD><FONT size=+1>

<B>Ca masura de securitate fiecare agent comercial trebuie sa se legimimeze cu numarul de agent care I-a fost atribut de administratorul Order Easy. Acest numar este de tipul "p0502". Aveti de asemenea nevoie de parola de acces la cont:

</B></FONT>

<P>

<CENTER>

<TABLE BORDER=1 CELLPADDING=10 BGCOLOR=white>

<TR>

<TD>Cod identificare agent:</TD>

<TD><input type=text name="agid" size=30></TD>

</TR><TR>

<TD>Parola agent:</TD>

<TD><input type=password name="parola" size=30></TD>

</TR>

</TABLE>

<P>

<INPUT type=submit value="accesare cont">

</CENTER>

</TD></TR>

</table>

</FORM></BODY>

2.1.3.Cautari usoare din propria pagina

Daca va conectati la pagina gazda Yahoo se poate vizualiza sursa HTML printre care si urmatoarea secventa ce defineste caseta de cautare ce e afisata în partea superoara a paginii. Secventa este urmatoarea:

<FORM ACTION="https://search.yahoo.com/search" method=GET>

<INPUT size=30 name=p>

<INPUT type=submit value=search>

<Font size=-1>

<A href="https://search.yahoo.com/search/options">Options</A>

</font>

</FORM>

Aceasta secventa o puteti utiliza în proriile pagini Web. De asemenea puteti utiliza si optiunile din exemplul de mai jos.

<BODY BGCOLOR=white>

<CENTER>

<FONT size=+3><B>Cautari on line?</B>

</FONT>

</CENTER>

<BLOCKQUOTE><B>

Sunt multe locuri in care putei sa aveti acces on line la informatii din pagini Web specializate in cautarea pe domenii. Introduceti unul sau doua cuvinte cheie de cautare pentru a gasi informatia dorita!</B>

</BLOCKQUOTE>

<CENTER><TABLE BORDER=0 CELLSPACING=5>

<TR><TD BGCOLOR=#CCCCCC ALIGN=center>

<B>YAHOO</B>

</TD><TD VALIGN=center ALIGN=center>

<!-YAHOO -->

<form action="https://search.yahoo.com/search" method=get>

<input type=text size=35 name="p">

<input type=submit value="Search">

</FORM>

</TD></TR>

<TR><TD BGCOLOR=#CCCCCC ALIGN=center>

<B>EXCITE</B>

</TD><TD VALIGN=center ALIGN=center>

<!--Excite -->

<form action="https://www.excite.com/search" method=get>

<input type=hidden name=trace value=a>

<input type=text size=35 name="search" size=35>

<input type=submit value="Search">

</FORM>

</TD></TR>

<TR><TD BGCOLOR=#CCCCCC ALIGN=center>

<B>InfoSeeK</B>

</TD><TD VALIGN=center ALIGN=center>

<!-InfoSeek -->

<form method=get action="https://www.infoseek.com/titles">

<input type=text size=35 name="qt" value="" maxlength=511>

<input type=hidden name="col" value="WW">

<input type=submit value="Search">

</FORM>

</TD></TR>

<TR><TD BGCOLOR=#CCCCCC ALIGN=center>

<B>ALTAVISTA</B>

</TD><TD VALIGN=center ALIGN=center>

<!-altavista -->

<form action="https://www.altavista.digital.com/cgi-bin/query" method=get>

<input type=hidden name=pg value=q>

<input type=hidden name=what value=web>

<input type=hidden name=kl value=en>

<input type=text size=35 name=q maxlength=800 wrap=virtual>

<input type=submit value="Search"

</FORM>

</TD></TR>

</TABLE>

</CENTER>

</BODY>

Daca analizati cu atentie programul observati ca multe dintre optiuni dispun de informatii suplimentare ascunde (hidden) care se transmit împreuna cu restul informatiilor.

Rezumat 1