Formulare si elemente ce se pot folosi intr-un

formular
Click to addBookmark this page

Elementul <form>

Elementul HTML <form> defineste un formular folosit pentru a colecta input-urile utilizatorului.
Un formular HTML contine elemente form.
Elementele form sunt diferite tipuri de elemente de input cum ar fi:campuri de text,checkbox-
uri,butoane de tip radio,butoane de submit si altele.

Elementul <input>
Click to addBookmark this page
Cel mai utilizat element si totodata si cel mai important element de formular este elementul <input>.
Acesta poate fi folosit pentru a colecta diferse input-uri de la utilizator in functie de
atributul type pe care alegem sa il utilizam.
Cel mai simplu argument pentru atributul type este text.
<input type="text" />
 Mentionam faptul ca elementul input poate fi scris si in exteriorul elementului form insa in acest fel codul va mai avea
conectivitate doar la nivel de client,si nu va avea nici un fel de functionalitate la nivel se sever.Astfel in exemplele noastre.

Daca dorim sa specificam o valoare initiala care sa apara in campul text,putem sa folosim atributul value.

Folosind acest atribut in campul de text va aparea implicit textul definit de programator,daca dorim ca acest text sa nu fie
efectiv prezent in campul de text,ci doar sa apara pe fundalul campului si sa reprezinte o descriere sugentiva putem sa folosim
atribitul placeholder.
 Un identificator pentru partea de client este atributul id.
Un tip de input asemanator cu cel text este tipul email,acesta verifica data textul introdus de
utilizator are formatul unui email.
Un alt tip de input este password care diferit fara de text,nu afiseaza textul introdus in clar ci sub
forma de puncte.

Se observa faptul ca orice tip de text introdus nu va fi afisat de browser in clar text.
 In continuare vom prezenta elementul de tip submit care in cazul unei conexiuni cu un server are rolul de a trimite datele
inserate de utilizator catre server.

Elementul de tip button nu are un rol implicit intr-un formular HTML,input-urile de tip button se folosesc pe partea de
JavaScript si acestora li se asocieaza evenimente.Exista o multime de evenimente definite.In interiorul evenimentului se
precizeaza o functie JavaScript ce va fi executata,daca evenimentului nu i se asocieaza nici o functie,atunci acesta nu va avea
nici un efect.
Input-ul de tip file va permite sa cautati si sa alegeti un fisier de pe calculatorul dumneavoastra.
 Daca elementul reset se afla in interiorul unui formular acesta permite resetarea la valoarea implicita a tuturor datelor
introduse de catre utilizator.

Pentru selectarea anumitor optiuni putem folosi input-ul de tip radio,iar in cazul optiunilor multiple,pentru a alege o singura
varianta,este necesar ca atributul name sa fie acelasi pentru toate butoanele radio folosite,atfel pentru input-urile de tip radio
pentru care atributul name este acelasi,va putea fi selectata o singura varianta.
 Daca dorim ca una din optiuni sa fie selectata implicit se foloseste atributul checked.

Pentru a putea anunta serverul care este optiunea selectata se foloseste atributul value.Atributele
value trebuie sa fie diferite intre ele pentru input-urile radio pentru a face diferentierea acestora.
Elementul de tip checkbox permite selectarea simultana a mai multor optiuni.
Elementul select defineste ceea ce e cunoscut sub numele de drop-down menu.Pentru asta,este
nevoie ca in interiorul elementului select sa definim si optiunile disponibile folosind elementul options.

Prima optiune definita,va si si cea care este selectata implicit.

 In cazul in care se doreste selectarea mai multor optiuni,in cadrul elementului select se trece atributul multiple.
<select name="optiuni" multiple>
Meniul se va deschide complet si pentru alegerea mai multor optiuni se tine apasat ctrl si se
selecteaza variantele dorite.

Textarea
Click to addBookmark this page
Pentru definirea unei casute de text in care utilizatorul poate scrie text se foloseste
elementul textarea.In interiorul tagului de deschidere al textarea putem defini dimensiunile casetei
prin atributele rows(linii) si cols(coloane).
 CSS
Click to addBookmark this page
CSS(Cascading Style Sheets) este un limbaj care descrie stilul unui document HTML.CSS descrie modul în care ar trebui
afișate elementele HTML.
CSS actioneaza la 3 nivele

 La nivel global

 La nivel de pagina

 La nivel de tag

Prioritatea cea mai mare o are nivelul cel mai explicit(cel mai de jos din lista)
Primul lucru care trebuie realizat pentru a utiliza CSS este crearea unui folder dedicat.Dupa aceasta
se adauga in folderul dedicat o foaie de stiluri css.
 In interiorul foii de stiluri,p reprezinta elementul vizat pentru utilizarea css-ului,iar in interiorul acoladelor se definesc
regulile pentru elementul respectiv,puteti defini oricate reguli doriti,fara a uita insa ca dupa fiecare regula sa puneti.

In mod implicit,pagina noastra nu va sti sa foloseasca foia de stiluri css,pentru a realiza aceasta
corespondenta trebuie indepliniti urmatorii pasi.
In interiorul elementului head pentru care dorim sa utilizam css se trece elementul link ce are 3
atribute:

 rel-caruia i se atribuie stylesheetce mentioneaza ca se face relationarea cu o foaie de stiluri.

 type-ce specicfica formatul foii de stiluri cu care se face relationarea.

 href-referinta catre foia de stiluri ce se doreste a fi folosita,avand calea relativa la referinta catre
aceasta.

Daca dorim sa folosim css la nivel la tag,in interiorul tagului de deschidere se specifica atributul id care sa identifice
paragraful ce se doreste sa foloseste css.

Dupa care voi defini regula css in foia de stiluri,pentru elementul cu id-ul corespunzator,acesta fiind precedat de #.
In cazul in care ne dorim sa folosim css pentru mai multe taguri putem sa folosim atributul class.

Dupa care voi merge in foaia de stiluri si voi defini regulile pentru clasa respectiva,numele acesteia fiind precedat de . (punct)
 In momentul in care stabiliti regulile css,aveti o serie de variante posibile.Pentru a le putea
vedea,puteti sa folositi combinatia de tastectrl-space pentru a fi afisata o lista cu toate regulile ce
pot fi definite.
Pentru a realiza stilizarea la nivel de pagina se foloseste elementul style in interiorul caruia se
definiesc regulile css similar cu modul in care au fost definite in foaia de stiluri.
 Se observa faptul ca,asa cum am mentionat anterior,regula de la nivel de pagina a suprascris-o pe cea de la nivel global.
Pentru setarea regulilor la nivel de tag,in interiorul acestuia se va scrie atributul style.

Din nou,regula de la nivel global a fost suprascrisa de cea de la nivel de tag.

Toate elementele HTML pot fi considerate drept cutii. În CSS, termenul "model de cutie" este folosit atunci când vorbim
despre design și aspect.
 Modelul cutiei CSS este în esență o cutie care încadreaza fiecare element HTML. Se compune din:
margins, borders, padding, si continutul in sine. Imaginea de mai jos ilustrează modelul casetei.

 Content-Continutul cutiei,unde apar textul si imaginine

 Padding-O zona transparenta,goala,in jurul continutului

 Border-O bordura prezenta in jurul padding-ului si a continutului

 Margin-O zona transparenta,goala,in exteriorul bordurii

Acest model permite definirea unor spatii,cu anumite caracteristici pentru diferentierea unor
elemente.
In exemplul ce urmeaza a fi prezentat vom crea mai intai un folder dedicat pentru imagini in care
vom pune 2 imagini,si de asemnea va fi urmata procedura precedenta de creare a unei foi de
stiluri,unde vom defini reguli css.

In exemplul de mai sus folosim * pentru a ne referi la toate elementele din pagina.
 Implicit in momentul in care definim o regula,aceasta se va aplica pentru toate cele patru
zone(left/right/bottom/top),putem insa sa stabilim o regula pentru modificarea unei incadrari doar
pentru o anumita zona folosind unul din atributele de mai jos.

Pentru a putea vedea mai bine efectele pe care le are modificare padding-ului vom defini si o regula pentru o bordura in felul
urmator.
 Pentru definirea bordurii,am folosit atributele:

 border-color-care precizeaza ce culoare va avea bordura.

 border-width-care precieaza care va fi dimensiunea acesteia.

 border-style-care preziceaza ce forma va avea bordura.

Acestea sunt doar cateva dintre atributele ce definesc o zona,puteti gasi toate atributele disponibile
folosind asa cum am mentionat anterior combinatia de taste ctrl-space.Aceste atribute va permit sa
definiti o multime de moduri in care ar putea arata incadrarile continutului in "cutie",prin combinarea
acestora.
O alta metoda prin care puteti sa definiti o zona este sa insirati toate caracteristicile in modul
urmator:
 Am vazut mai devreme ca putem sa specificam explicit o culoare prin numele acesteia.O alta modalitate prin care putem sa
specificam o culoare este folosirea codului unuic RGB(red green blue),in care grupurile de cate doua cifre hexazecimale
reprezinta intensitatea culorii corespondente(primele doua cifre-ROSU,urmatoarele doua-VERDE,ultimele doua-ALBASTRU)
in culoarea pe care dorim sa o obtinem.Fiecare dintre cele 3 culori poate avea o valoare in hexazecimal de la 00(0 in zecimal)
pana la FF(255 in zecimal).

Bootstrap
Click to addBookmark this page
Bootstrap este un framework web gratuit și open-source pentru proiectarea de site-uri web și aplicații web. Acesta conține
șabloane de design HTML și CSS pentru tipografii, formulare, butoane, navigație și alte componente de interfață, precum și
extensii JavaScript opționale.
Bootstrap poate fi numit o biblioteca ce contine o serie de reguli deja definite ce poate fi referentiata
in proiectul propriu si utilizata conform necesitatilor.
Sursele pentru Bootstrap pot fi descarcate de la adresa https://getbootstrap.com/docs/3.3/getting-
started/
 Documentatia privind modul de utilizare al Bootstrap poate fi gasita la adresa https://getbootstrap.com/docs/3.3/css/
Pentru a putea referentia Bootstrap este nevoie ca fisierul descarcat sa fie adaugat in sursele
proiectului.
Pentru referentierea efectiva a Bootstrap-ului se foloseste elementul link.