Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • 0103 Formulare

    Încărcat de

    Iulian Moisă
    12 vizualizări5 pagini

    Titlu original

    0103_formulare

    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

    Drepturi de autor:

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

    0103 Formulare

    Încărcat de

    Iulian Moisă

    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

    Crearea unui formular HTML

    Life is like a coin. You can spend it any way you wish,
    but you only spend it once. (Lillian Dickson)

    Obiective:

    Prezentarea elementelor unui formular


    Crearea unui formular de inscriere la facultate

    1. Ce este un formular ? - Un formular este un ansamblu de zone active alcatuit din butoane,
    casete de selectie, campuri de editare etc. Formularele va asigura construirea unori pagini Web
    care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.

    Elementele unui formular sunt cuprinse intre tagurile <form></form>.


    2. Elementele unui formular

    Input text este folosit pentru introducerea de text pe o singura linie.


    Input password este folosit pentru introducerea parolelor.
    <input type="text" name="utilizator" />
    <input type="password" name="parola" />
    Input radio sau radio button este folosit in formulare pentru a permite utilizatorului o singura
    alegere dintr-o lista de optiuni.

    <input type="radio" name="sex" value="masculin" />


    <input type="radio" name="sex" checked="checked" value="feminin" />
    Combo box este un element grafic alctuit dintr-o list de tip drop-down i un textbox ce
    afieaz textul pe o singur linie

    <select name="stuenti">
    <option value="PI">Popescu</option>
    <option value="II" selected="selected">Ion</option>
    <option value="GR">Georgescu</option>
    <option value="IP">Ionescu</option>
    </select>
    Input submit. Input reset. Input button

    <input type = "submit" value = "Trimite!" /> - este butonul prin care formularul este trimis
    <input type = "reset" value = "Reset" /> - este butonul prin care formularul este resetat
    <input type = "button" value = "Buton 1" /> - este un buton care nu face nimic, in mod implicit,
    decat daca i se atribuie o actiune cu ajutorul limbajului JavaScript
    3. Crearea unui formular de inscriere la facultate
    In prima instanta vom crea un document html, ce va contine doar tag-urile de baza.
    <html>
    <head></head>
    <body></body>
    </html>
    Stabilim un titlu documentului, titlu ce va aparea pe bara superioara a browser-ului.
    Pentru aceasta il vom introduce in head intre tag-urile <title>Formular inscriere facultate</title>
    In body deschidem tag-ul <form> unde vom face un tabel cu doua coloane si grosimea
    liniei 0, pentru alinierea corespunzatoare a textului si a elementelor de formular. Primele doua
    celule din tabel le vom lipi, pentru a da un nume continutului. In acest moment, codul va arata in
    felul urmator:
    <html>
    <td colspan="2" ><h1>Formular
    <head>
    inscriere facultate</h1></td>
    <title> Formular inscriere facultate </title>
    </tr>
    </head>
    <tr>
    <body>
    <td></td>
    <form>
    <td></td>
    <table border="0" cellpadding="5">
    </tr>
    <tr>
    </table>
    </form>
    </body>
    </html>
    Se poate observa ca in tag-ul table am inclus doua atribute. Atributul border stabileste
    grosimea liniei iar atributul cellpadding stabileste distanta din jurul textului pana la tabel. Tagurile <tr></tr> si <td></td> reprezinta linia si respectiv coloana unde va fi creeata celula.
    Atributul colspan din tag-ul td, stabileste lipirea primelor doua celule din tabel.
    In continuare vom introduce in prima coloana a tabelului urmatoarele elemente: Nume,
    Prenume, Sex, Varsta, Data nasterii, Locul nasterii, Domiciliul actual, CNP, Specializarea,
    Media la bacalaureat. In acest moment pagina ar trebui sa arate in felul urmator:

    In a doua coloana vom introduce elementele active ale formularului. Pentru fiecare
    dintre elementele Nume, Prenume, Varsta, Data nasterii, Locul nasterii, Domiciliul actual, CNP
    si Media la bacalaureat, vom defini un element input text. De exemplu pentru campul Nume,
    vom scrie: <input type="text" name="nume" />. Facem la fel si pentru restul elementelor.
    In celula corespunzatoare rubricii Sex, introducem radio butoane, iar ca variante de
    raspuns Masculin si Feminin.
    <input type="radio" name="sex" value="masculin" />
    <input type="radio" name="sex" value="feminin" />
    In celula ce corespunde rubricii Specializarea, vom defini un ComboBox ce va contine ca
    argumente urmatoarele specializari: Tehnologia Informatiei, Energetica Industriala, Mecatronica,
    Informatica si va avea selectat implicit optiunea a doua:
    <select name="specializare">
    <option value="ti">Tehnologia Informatiei</option>
    <option value="ei" selected="selected">Energetica Industriala</option>
    <option value="me">Mecatronica</option>
    <option value="in">Informatica</option>
    </select>
    Acum, pagina noastra ar trebui sa arate in felul urmator:
    Pentru campul data nasterii puteti folosi facilitate HTML 5 (selectia din calendar)

    <input type="date" value="2012-12-12;">

    Braowsere-le care suporta acest tip de data sunt:

    4. Aplicatie
    1. Adaugati un nou rand in tabel, in care sa definiti doua checkbox-uri ce reprezinta tipul
    locurilor pentru care se depunde candidatura: Bugetate/Nebugetate.
    2. Pentru Varsta si Media la bacalaureat stabiliti lungimea campului de patru caractere.
    3. Pentru campul Data nasterii, stabiliti ca valoare implicita textul zz/ll/aaaa.
    4. Adaugati pe un rand nou un buton pentru stergerea valorilor (reset).
    5. Adaugati un tag tabelului, astfel incat sa-l pozitionati pe mijlocul paginii.
    6. Pentru campul Domiciliul actual, inlocuiti elementul de tip input text cu unul ce permite
    scrierea textului pe mai multe randuri.
    La final formularul va arata asa:

    Bibliografie
    http://html-tutor.net/formulare/
    http://jserv.3x.ro/html/formulare1.html
    http://etutoriale.ro/articles/127/1/formularelor-HTML/
    http://tools.webmart.de/form-generator
    http://wufoo.com/html5/types/4-date.html

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