Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Laborator Tehnologii Web

    Încărcat de

    Mihai26
    18 vizualizări5 pagini
    Laborator Tehnologii Web

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Laborator Tehnologii Web

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    18 vizualizări5 pagini

    Laborator Tehnologii Web

    Încărcat de

    Mihai26
    Laborator Tehnologii Web

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 5

    P.A.I.I.

    - Formulare HTML

    Formulare HTML

    Obiective
    • Dezvoltarea formularelor HTML

    Formularele HTML reprezintă o modalitate de comunicare între utilizatori şi


    server; prezintă o utilitate deosebită atunci când sunt folosite în combinaţie cu scripturi ce
    se execută pe server (ex. PHP, Perl, ASP .NET ect). În cadrul unei aplicaţii web,
    formularele HTML şi scripturile de validare JavaScript sunt referite ca şi client-side iar
    scripturile executate pe server ca server-side. Datele introduse într-un formular sunt de
    regulă trimise către un server web sau prin poştă electronică spre un cont de e-mail.
    Într-un document HTML, formularele sunt introduse prin marcajul
    <form>...</form>. Un document HTML poate să conţină mai multe formulare, însă
    numai informaţiile dintr-un singur formular pot fi trimise la un anumit moment dat către
    server. În general, câmpurile unui formular destinate introducerii datelor (câmpuri text,
    butoane de comandă, casete de validare, butoane radio etc), se specifică prin intermediul
    marcajului <input>.

    Elementul <FORM>
    Atribute:
    • name – permite specificarea unui nume unic. Acest atribut este util atunci când un
    document HTML conţine mai multe formulare.
    • action – specifică URL-ul programului server care va prelua datele din formular.
    • method – specifică metoda prin care browser-ul transmite informaţiile către
    server.

    Exemple:
    <html>
    <head><title>Primul formular</title></head>
    <body>
    <form name=”formular1” method=”post” action=”http://apollo.eed.usv.ro
    /~tudor_c/prim.php”>
    </form>
    </body>
    </html>

    <html>
    <head><title>Formular mail</title></head>
    <body>
    <form NAME="formularMail" METHOD="POST" ENCTYPE="text/plain"
    ACTION="mailto:webmaster@site.com?Subject=Program conferinta">
    </form>
    </body>
    </html>
    P.A.I.I. - Formulare HTML

    Elementul <INPUT>
    Atribute:
    • type – specifică tipul controlului.
    o button – buton de comandă. La un click de mouse, se poate declanşa o
    acţiune prin intermediul unui script (ex. JavaScript)
    o checkbox – casetă de validare. Optiunea checked poate fi utilizată pentru a
    specifica daca o casetă este "marcată" sau nu.
    o file – permite utilizatorului să selecteze un fişier din computerul propriu,
    pentru a-l încărca pe server
    o hidden – un control "invizibil" utilizatorului. Păstrează o pereche
    variabilă/valoare care nu este vizibilă utilizatorului.
    o submit – buton de comandă utilizat pentru trimiterea datelor din formular,
    către server
    o image – un buton pe suprafaţa căruia este afişată o imagine şi care are o
    funcţie asemănătoare cu submit.
    o password – un câmp de tip text, care înlocuieşte fiecare caracter tastat cu
    un asterix (*).
    o radio – buton cu interblocare; un grup de elemente radio au acelaşi nume,
    însă numai un singur element poate fi selectat
    o text – permite introducerea de text
    o reset – "curăţă" întregul formular, revenind la valorile implicite
    • name - numele controlului (elementului)
    • value - valoarea atribuită elementului
    • size - numărul de caractere care vor fi vizibile într-un câmp de tip text sau
    password
    • maxlength - numărul maxim de caractere ce pot fi introduse într-un câmp de tip
    text sau password
    • disabled - dezactivează un element
    • readonly - un element ce poate fi citit, dar nu şi fi modificat

    Elementul <TEXTAREA> - permite introducerea de text pe mai multe rânduri.


    <textarea [cols=x] [rows=y]
    [name=nume] [wrap] [readonly]
    ...
    </textarea>

    Elementul <SELECT> - implementează o listă de opţiuni cu derulare


    <select [name=nume] [size=dimensiune] [multiple] >
    <option [value=valoare_1]> … </option>
    P.A.I.I. - Formulare HTML

    <option [value=valoare_2]> … </option>


    …
    <option [value=valoare_n]> … </option>
    </select>

    Atribute:
    • name – specifică numele controlului
    • size – specifică numărul de opţiuni din listă
    • multiple – prezenţa acestui atribut specifică faptul că lista permite selectarea mai
    multor elemente cu ajutorul tastei Ctrl.

    Exemplu.

    <html>
    <head><title>Primul formular</title></head>
    <body>
    <form name=”formular”>
    P.A.I.I. - Formulare HTML

    <table bgcolor=lightgray border=2>


    <tr>
    <td>Nume:</td>
    <td> <input type="text" name="nume" maxlength=20> </td>
    </tr>
    <tr>
    <td>Adresa:</td>
    <td> <input type="text" name="nume" maxlength=50> </td>
    </tr>
    <tr>
    <td>Telefon:</td>
    <td> <input type="text" name="nume" maxlength=50> </td>
    </tr>
    <tr>
    <td>Varsta:</td>
    <td>
    <input type="radio" name="cat_varsta">10-15
    <input type="radio" name="cat_varsta" checked>15-20
    <input type="radio" name="cat_varsta">peste 20
    </td>
    </tr>
    <tr>
    <td valign=top>Pasiuni:</td>
    <td>
    <table border=0>
    <tr>
    <td>
    <input type="checkbox" name="muzica">Muzia
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="literatura">Literatura
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="sportul">Sportul
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>Contact:</td>
    <td>
    <select name="contact">
    <option>YM</option>
    <option>MSN</option>
    <option>Google Talk</option>
    </select>
    </td>
    </tr>
    <tr>
    <td valign=top>Comentarii:</td>
    <td>
    <textarea name="comentarii" cols=20 rows=8>Comentariile dv.</textarea>
    P.A.I.I. - Formulare HTML

    </td>
    </tr>
    <tr>
    <td></td>
    <td align=center>
    <input type="submit" name="trimite" value="Trimite">
    <input type="reset" name="reset" value="Reset">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    Temă: Scrieţi formularul HTML corespunzător figurii de mai jos:

    S-ar putea să vă placă și