Tutorial prof. Dogaru Simona, Alba Iulia

Câmpuri text

Formularul din figura 1. 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.

Figura 1.

Pentru a introduce un formular se procedează astfel: Din meniul Insert →Form → Form. Odată cu introducerea formularului se vor introduce şi cele două butoane SUBMIT şi RESET.

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

Pentru a introduce câmpurile text se va deschide meniul Insert → Form → Textbox .

Figura 2.

Pentru a introduce proprietăţile casetei text se va da dublu click pe casetă. În fereastra care se deschide vom introduce un nume în caseta Name şi se va preciza mărimea în caseta Width in characters (Vezi figura 2.) La fel se va proceda cu caseta text pentru parolă. În plus se va bifa butonul radio Password field cu opţiunea Yes. Pentru cele 2 butoane de comandă SUBMIT şi RESET le vom scrie o etichetă în caseta Value/label. Textul introdus reprezintă textul ce va fi afişat pe buton. (vezi figura 3. ).

Figura 3.

Sursa HTML a formularului din figura 1 este:

<html>

<head>

<title>INREGISTRARE</title>

</head>

<body>

<tr>

<p align="center">INREGISTRARE</td>

</tr>

<tr>

<td width="37%" >ID_Utilizator</td>

</tr>

<tr>

<td width="37%" >Parola</td>

</tr>

<tr>

</tr>

</table>

</form>

</body> </html>

Acum să urmărim modul de transmitere a datelor de un formular HTML către scriptul său de prelucrare. Veţi parcurge următorii paşi:

Pas 1. În folderul xampp/ htdocs/ probe veţi deschide fişierul p1.php cu următorul conţinut:

<?php

phpinfo();

Pas 2. În acelaşi folder vom salva fişierul p1.html care va avea formularul de mai sus, puţin modificat , şi anume, la atributul action=p1.php :

<html>

<head>

<title>INREGISTRARE</title>

</head>

<body>

<tr>

<p align="center">INREGISTRARE</td>

</tr>

<tr>

<td width="37%" >ID_Utilizator</td>

</tr>

<tr>

<td width="37%" >Parola</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

Pas 3. Deschideţi fişierul HTML cu ajutorul unui browser

( http://localhost/probe/p1.html) . După ce completaţi toate câmpurile din formular apăsaţi pe butonul de expediere ( OK).

Pas 4. După ce scriptul de prelucrare p1.php este executat, acesta va afişa un raport cu privire la starea serverului PHP. Derulaţi până la secţiunea PHP Variables pentru a vedea informaţiile celor două controale de tip casetă text IDUtilizator şi ParolaUtilizator.

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 → Option 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 Value a butonului selectat. (vezi figura 4.)

Figura 4.

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

Figura 5.

Sursa HTML a formularului din figura 4 este:

<html>

<head>

<title>Alte butoane</title>

</head>

<body>

<b>1. Cand si-a incetat domnia Mihai Viteazu?</b><br>

<b>2. Vlad Tepes a fost nepotul lui .... ?</b><br>

<input type="radio" name="intrebare2" value="stefan" checked>Stefan cel Mare<br>

<input type="radio" name="intrebare2" value="mircea">Mircea cel Batran<br>

<input type="radio" name="intrebare2" value="vlad">Vlad Dracul<p>

<br>

</form>

</body>

</html>

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

Pentru a urmări modul de transmitere a datelor de formularul HTML către scriptul său de prelucrare, vom parcurge aceiaşi paşi ca în exemplul anterior, în care modificăm numele fişierului HTML:

Pas 1. În folderul xampp/ htdocs/ probe avem salvat fişierul p1.php cu următorul conţinut:

<?php

phpinfo();

din exemplul anterior.

Pas 2. În acelaşi folder vom salva fişierul p2_1.html care va conţine formularul de mai sus.

Pas 3. Deschideţi fişierul HTML cu ajutorul unui browser şi completaţi URL-ul

(http://localhost/probe/p2_1.html). După ce bifaţi toate butoanele din formular apăsaţi pe butonul de expediere ( TRIMITE).

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:

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:

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ăutaare Browse. Sintaxa este:

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 (vezi figura 6.):

Figura 6.

Î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 figura 6. Width in characters reprezintă lungimea unui rând măsurată în caractere iar Number of lines specifică numărul de linii de text vizibile.

Marcajul SELECT

Acest marcaj introduce liste derulante de opţiuni. Din meniul Insert→ Form→ Drop-Down Box .(Vezi figura 7.)

Figura 7.

În căsuţa Name introducem numele marcajului. Pentru a introduce valorile din listă daţi click pe butonul Add…şi introduceţi valorile dorite în căsuţa Choice . La transmiterea datelor din formular , scriptul CGI primeşte pentru fiecare dintre opţiunile selectate de vizitator, valorile precizate prin bifarea căsuţei Specify Value. Prin căsuţa Height corespunzătoare atributului Size din codul HTML, se specifică pe câte rânduri apar scrise valorile din listă. Butoanele radio (Yes/ No) corespunzătoare lui Allow multiple selections semnifică faptul că se permite/ sau nu se permite utilizatorului selectarea mai multor opţiuni din listă.

Codul HTML ar arăta astfel:

</select>

Pentru fiecare formular puteţi face verificarea şi vizualizaţi datele transmise scriptului de prelucrare, în speţă fişierului PHP.

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