Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Laborator

    Încărcat de

    Diana Skopetz
    0 vizualizări10 pagini
    T. I. C

    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
    T. I. C

    Drepturi de autor:

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

    Laborator

    Încărcat de

    Diana Skopetz
    T. I. C

    Drepturi de autor:

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

    Laborator 4 

    Limbajul HTML. Formulare 


    FORMULARE  –  asigură  crearea  paginilor  web  interactive.  În  general  sunt  folosite  pentru 
    preluarea  datelor  de  la  utilizator  (în  vederea  efectuării unei comenzi pentru diferite produse). Un 
    formular  este  constituit  din  elemente  speciale  numite  controale  (CONTROLS):  butoane 
    radio,butoane  de  validare,  meniuri,  casete  de  text,  prin  intermediul  cărora  utilizatorul  transmite 
    informaţii server-ului care găzduieşte pagina web. 
    Înserarea unui formular într-un document web se realizează prin etichetele <form> </form> , 
    între care sunt incluse controalele. 
    1. Elemente de control: 
    Tagul INPUT –permite inserarea unor elemente de control în funcţie de valorile asociate 
    atributelor sale: 
    NAME=şir de caractere (asociază controlului un nume) VALUE=şir de caractere (specifică o 
    valoare iniţială; strict necesară în cazul grupului de butoane radio) 
    TYPE=TEXT | PASSWORD |CHECKBOX | RADIO| SUBMIT | RESET | FILE | 
    HIDDEN | IMAGE | BUTTON (specifică tipul elementului de control creat). 
    Control Acţiune utilzator Tag Text Introducerea unui text de volum redus Input 
    Password 
    Introducerea uni text de volum redus, care apare, pe ecran, mascat cu „*” 
    Input 
    Submit 
    Activare (pentru a transmite informaţiile înscrise în formular către server) 
    Input 
    Reset 
    Activare (pentru a restabilii valorile iniţiale ale tuturor controalelor formularului) 
    Input 
    Push 
    Activare (pentru a executa o acţiune definită de autorul formularului) 
    Input 
    Checkbox Bifare (pentru selecţie multiplă a unor opţiuni) Input 
    Radio 
    Bifare (pentru selecţie unei singure opţiuni dintr- o listă de opţiuni) 
    Input 
    Textarea Introducerea unui text de volum mare Textarea Menu Alegerea unei opţiuni dintr-un 
    meniu Select, option 
     
    Principalele atribute de control dintr-un formular 
    CONTROL TAG 
    ATRBUTE OPŢIONALE Text Input Type ,name Value, size, maxlength Password Input Type 
    ,name Size, maxlength Submit Input Type Value Reset Input Type Value Checkbox Input Type 
    ,name Radio Input Type ,name Textarea Textarea Name Cols, rows Menu Select,option Name 
    Size, multiple, value 
    2. Utilizarea tabeleleor pentru a insera un formular: 
    Se utilizează o structură tabelară pentru poziţionarea corectă a controalelor: <form> <table> <tr> 
    <td>Nume</td> <td><input type="text" name="a" /></td> </tr> <tr> 
    <td>Glicemie</td> <td><input type="password" name="b" /></td> </tr> <tr> 
    <td>Azi vrei desert? </td> <td align="center">DA <input type="radio" name="c" />NU <input 
    type="radio" name="c" /></td> </tr> <tr> 
    <td>Prajituri preferate</td> <td align="center"> <select name="d"> 
    <option> Cu ciocolata</option> <option> Cu fructe</option> <option> Cu frisca</option> 
    </select> </td> </tr> <tr> 
    <td>Alte comentarii</td> <td align="center"> <textarea name="e"> </textarea> </td> </tr> <tr 
    bgcolor="f6d324"> 
    <td align="right"> <input type="reset" /> </td> <td align="left"> <input type="submit" /> </td> 
    </tr> </table></form> 
    ATRIBUTE OBLIGATORII 
     
    Probleme rezolvate 
    Problema 1: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Exemplu de formular</title> </head> <body> 
    <form method="POST" action=”mailto:costica@utgjiu.ro”> <p><b>Introduceti numele 
    dvs. --></b> <input type="text" name="nume" size="30"></p> <p><input type="submit" 
    value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> </body> 
    </html> 
    Problema 2: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Formular logare</title> </head> <body> 
    <form method="POST" action="mailto:costica@utgjiu.ro"> <table border="0"> <tr> 
    <td><b>Introduceti numele dvs. de identificare --></b> </td> <td> <input type="text" 
    name="nume" size="30"></td> </tr> <tr> <td><b>Introduceti parola dvs.?</b></td> 
    <td><input type="password" name="parola" size="30"></td> </tr> </table> <p><input 
    type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> 
    </body> </html> 
     
    Problema 3: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Optiuni concediu</title> </head> <body> <form method="POST" 
    action="mailto:costica@utgjiu.ro"> <h4>Unde doriti să va petreceti concediul?</h4> 
    <p><input type="radio" value="munte" checked name="Loc">la munte</p> <p><input 
    type="radio" name="Loc" value="mare">la mare</p> <p><input type="radio" 
    name="Loc" value="acasa">acasa</p> <hr> <h4>Daca plecati în concediu, unde ati dori 
    să va cazati?</h4> <p><input type="radio" name="Cazare" value="hotel" checked>la 
    hotel</p> <p><input type="radio" name="Cazare" value="vila">vila</p> <p><input 
    type="radio" name="Cazare" value="pensiune">pensiune agroturistica</p> <p><input 
    type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> 
    </body> </html> 
    Problema 4: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Cursuri WEB</title> </head> <body> <form method="POST" 
    action="mailto:costica@utgjiu.ro"> <h4>Ce cursuri doriti să urmati?</h4> <p><input 
    type="checkbox" name="Cursuri" value="html" checked>HTML</p> <p><input 
    type="checkbox" name="Cursuri" value="asp" checked>ASP</p> <p><input 
    type="checkbox" name="Cursuri" value="jvscript">JAVA SCRIPT</p> <p><input 
    type="checkbox" name="Cursuri" value="java">JAVA</p> <p><input type="checkbox" 
    name="Cursuri" value="php">PHP</p> <p><input type="checkbox" name="Cursuri" 
    value="asp">ASP</p> <p><input type="submit" value="Expediaza"><input 
    type="reset" value="Anuleaza"></p> </form> </body> </html> 
     
    Problema 5: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Ataseaza Fişier</title> </head> <body> <form method="POST" 
    action="mailto:costica@utgjiu.ro"> <input type="file"> <input type="submit"> </form> 
    </body> </html> 
    Problema 6: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> <head> <title>Zodiac</title> </head> <body> <form method="POST" 
    action="mailto:costica@utgjiu.ro"> <p><b><i>Zodia dumneavoastra este: </i></b> 
    <select name="Zodie" size="1"> <option value="Var">Varsator</option> <option 
    value="Pes">Pesti</option> <option value="Ber">Berbec</option> <option 
    value="Tau">Taur</option> <option value="Gem">Gemeni</option> <option 
    value="Rac">Rac</option> 
    <option value="Leu">Leu</option> <option value="Fec">Fecioara</option> <option 
    value="Bal">Balanta</option> <option value="Sco">Scorpion</option> <option 
    value="Sag">Sagetator</option> <option value="Cap">Capricorn</option> </select> 
    </p> 
    <p><input type="submit" value="Expediaza"></p> <p><input type="reset" 
    value="Anuleaza"></p> </form> </body> </html> 
     
    Problema 7: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Librarie informatica</title> </head> <body> <form method="POST" 
    action="mailto:costica@utgjiu.ro"> <h4>Selectati cartile care va intereseaza:</h4> 
    <p><select size="3" name="Carti" multiple> <option value="sg" selected>Sabin Buraga - 
    Aplicatii Web la cheie. Studii de caz implementate în PHP</option> <option 
    value="ta">Traian Anghel - Programare Web</option> <option value="lw">Luke 
    Welling, Laura Thomson - Dezvoltarea aplicatiilor Web cu PHP şi MySQL</option> 
    <option value="lu" selected>Larry Ullman - PHP şi MySQL pentru site-uri 
    dinamice</option> </select></p> <p><input type="submit" value="Expediaza"><input 
    type="reset" value="Anuleaza"></p> </form> </body> </html> 
    Problema 8: 
    Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl 
    salvati apoi cu extensia .html: 
    <html> 
    <head> <title>Carte de oaspeti</title> </head> <body> <form method="POST" 
    action="mailto:costica@utgjiu.ro"> <h4>Parerea dvs.:</h4> <p><textarea 
    name="Comentarii" rows="5" cols="19"> Introduceti aici parerea dvs. </textarea></p> 
    <p><input type="submit" value="Expediaza"> <input type="reset" 
    value="Anuleaza"></p> </form> </body> </html> 
     
    Aplicaţie implementată 
    Un formular complex – Rezervarea unei camere de hotel 
    <html> 
    <head> <title>Rezervare camere hotel</title> </head> 
    <body> <form method="POST" action="rezervari.asp" > <h3><u>Hotel Costica - 
    Formular de rezervare</u></h3> <p><u>1. Informatii Generale</u></p> <table 
    border="0"> <tr> <td><b>Ce fel de camere doriti ?</b></td> <td><select size="1" 
    name="Camera"> <option>Single</option> <option>Double</option> 
    <option>Apartament</option> </select></font> </td> </tr> 
    <tr> <td><b>Optiuni camera:</b></td> <td><input type="checkbox" name="Televizor" 
    value="ON" checked>Televizor <br> <input type="checkbox" name="VederePlaja" 
    value="ON" checked>Vedere catre plaja </td> </tr> <tr> <td><b>Ce modalitate de plata 
    alegeti ?</b></td> <td><input type="radio" name="ModalitatePlata" value="Numerar" 
    checked>Numerar<br> <input type="radio" name="ModalitatePlata" 
    value="CarteCredit">Carte credit<br> <input type="radio" name="ModalitatePlata" 
    value="TransferBancar">Transfer bancar </td> </tr> <tr> <td><b>Alte 
    observatii</b></td> </tr> <tr> <td> <p align="center"><textarea name="Observatii" 
    rows="5" cols="39">Introduceti aici optiunile dvs. daca nu este disponibila nici o camera 
    conform cererii exprimate !</textarea></p> <hr align="center"> 
     
    </td> 
    </tr> </table> <p><u>2. Informatii Contact</u></p> <table border="0"> <tr> 
    <td><b>Nume şi prenume :</b></td> <input type="text" size="35" maxlength="256" 
    name="Nume"> </tr> <tr> <td><b>Telefon :</b></td> <input type="text" size="35" 
    name="Tel"> </tr> </table> <p><input type="submit" value="Rezerva"> <input 
    type="reset" value="Anuleaza"></p> </form> </body> </html> 
     
    Probleme propuse spre rezolvare 
    1.  Editaţi  un  CV  personal  în  care  să  adăugaţi  o  legătură  către  un  document  PDF  care  să  se 
    deschidă  într-o  nouă  fereastră  (folosiţi  atributul  target al tag-ului a). Folosiţi atributul title pentru 
    a adăuga o descriere (tooltip) legăturii spre fişierul PDF. 
    2. Realizaţi în HTML o listă ordonată (în ordinea rangului) cu persoane din conducerea 
    Universităţii Constatin Brâncuşi. 
    3. Realizaţi în HTML o listă neordonată cu colegii dumneavoastră de grupă. 
    4. Realizaţi un document HTML care afişează un tabel simplu: 
    5. Realizaţi o listă de definiţii în care termenii sunt oraşe din ţara în care aţi fost, iar definiţiile 
    sunt câteva impresii despre fiecare oraş. 
    6. Realizaţi un formular de introducere date conform următoarelor specificaţii: ➢ Componenta 
    de tip text pentru preluare nume şi prenume ➢ Componenta de tip text pentru preluare adresa 
    e-mail ➢ Componenta de tip casetă de selecţie pentru preluare specializare ➢ Componenta de 
    tip casetă de selecţie pentru preluare curs ➢ Componenta de tip casetă de selecţie pentru preluare 
    activitate. Activităţile pot fi: studiu 
    curs, lucrare laborator, test grilă ➢ Componenta de tip buton radio pentru selecţie an de 
    studiu (I, II, II sau IV) ➢ Componenta de tip buton validare (checkbox) pentru specificare 
    selecţii dintre variantele: 
    ➢ Activitate interactivă ➢ Activitate de studiu individual ➢ Activitate de lucru în colaborare cu 
    alţi studenţi ➢ Trei butoane de submisie a informaţiilor introduse în formular cu următoarele 
    semnificaţii: 
    ➢ Lansare activitate ➢ Afişare stare student în raport cu activitatea selectată ➢ Anulare 
    informaţii introduse în forma clasică (Cancel) 

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