Lecţia 4 - Forms

Una din cele mai răspândite metode de culegere şi prezentare a informaţiilor pe Web este utilizarea formularelor, prin intermediul cărora se pot selecta şi culege informaţii despre şi de la utilizatori. Problema gestionării datelor implică cunoaşterea utilizării şi gestionării bazelor de date. Tendinţa actuală a site-urilor Web, pe lângă oferirea informaţiilor din baze de date, este aceea de culegere şi validare a datelor direct în baze de date de diferite tipuri. În mod nativ culegerea informaţiilor prin formulare HTML, utilizând doar cod HTML, nu este posibilă, această operaţiune presupunând utilizarea script-urilor JavaScript, VBScript şi aplicaţiilor CGI (common gateway interface). Concepute iniţial pentru sisteme de tip Linux/Unix, CGI-urile nu-şi au relevanţă în free web programming (FWP) (independenţa de mediu, platformă, sistem de operare). Singurele aplicaţii care pot, oarecum să îndeplinească conceptul de FWP sunt cele de genul JavaScript, dar care sunt foarte, foarte limitate. Un limbaj superior este limbajul Java, care presupune cunoştinţe de programare orientată obiect. Revenind la obiectul lecţiei curente creare formularelor implică folosirea tagului <form method="post" name="form1">, în care, method reprezintă forma lucru cu datele "post", “pictarea” datelor într-o bază de date, sau "get" preluarea datelor dintr-o bază de date. În HTML prin bază de date se poate înţelege şi un fişier de tip text, un document HTML sau o altă formă de clasică de reprezentare a acestora. Un alt atribut al tagului form este action, care poate lua drept valoare pe lângă calea de accesare a unui program CGI, şi o adresare mailto care presupune trimiterea datelor prin email, în vederea postării acestora într-un viitor, cât mai apropiat. Principalele elemente pe care le poate conţine un formular sunt în marea lor majoritate cunoscute din ferestrele/formularele de tip Windows: câmpuri de text (text box), liste, butoane radio (radio buttons), căsuţe de selecţie (check box), căsuţe text de tip parola (password). Pentru crearea elementelor mai sus menţionate se foloseşte tagul general <input type="valoare" valoare care poate fi: text, radio, checkbox, button, submit, reset, image, password, hidden, file. Alte atribute care pot fi luate de tagul input sunt: - Name="nume" - numele simbolic al valorii câmpului,folosit de obicei in cadrul scripturilor pentru a identifica respectivul element (este de preferat ca oricărui element din formular sa-i asociem un nume); - Value="valoare" - pentru tipul text specifica textul afişat implicit, iar pentru butoanele radio şi căsuţele de validare reprezintă valoarea trimisa serverului daca utilizatorul selectează acest buton. - Checked - precizează daca butonul radio/căsuţa de validare a fost selectata de vizitator. - Size="marime" - numărul de caractere al căsuţei de text afişate; - Maxlength ="mărime" - specifica numărul maxim de caractere acceptat în căsuţa de text; a) Crearea unei căsuţe de text: <input type="text" name="text1"> Pentru identificare se poate folosi prefixarea declaraţiei respective cu o linie de text obişnuită: Aceasta este o casuţă de text: <input type="text" name="txt1">

© ValÿG

Pagina 12 din 14

value textul care va fi afişat pe butonul respectiv. h) Câmpurile de tip file se folosesc pentru introducerea anumitor fişiere în cadrul documentelor HTML. Creare unui buton se realizează conform următoarei declaraţii: <input type="button" name="Confirma" value="Confirma" onclick="afiseaza()"> în care name reprezintă numele pe care-l poartă butonul respectiv în cadrul formularului. g) Câmpurile de tip password se folosesc pentru protecţia datelor introduse de către utilizator de la consolă. Acest control este asemănător listelor derulante din formularele Windows (combo box) Ce părere aveţi despre pagina aceasta ? Foarte buna Proasta Foarte proasta Sursa Html este : <B>Ce parere aveti despre pagina aceasta ?</B><BR> <Select Name="lista"><BR> © ValÿG Pagina 13 din 14 . <Textarea> Acest marcaj a fost creat pentru ca vizitatorul sa poată introduce un text de lungime mai mare.urilor de la conturile de e-mail. În categoria acestor tipuri de controale se încadrează întrebările din care se pot alege mai multe variante de răspuns. Spre exemplu: <B> Care este parerea d-voastră despre acest produs?</B><BR> <Input Type="radio" Name="intrebare1" Value="a" Checked>Foarte buna <BR> <Input Type="radio" Name="intrebare1" Value="b">Proasta <BR> <Input Type="radio" Name="intrebare1" Value="c">Nasoala rau tare de tot<BR> c) Crearea listelor de alegere (checkbox). Fiecare optiune este inserata cu ajutorul marcajului <Option>.specifica numarul de randuri.specifica lungimea unui rând in caractere.. Apare si atributul Multiple care permite selectarea mai multor optiuni din lista. iar reset sterge toate datele introduce in formularul current.</Option>.. e) submit şi reset reprezintă alte forme de butoane prin care submit trimite date conform specificaţiilor din declaraţia formului. <B> Care sunt culorile d-voastra preferate?</B><BR> <Input Type="checkbox" Name="intrebare2" Value="a" Checked>Albastru<BR> <Input Type="checkbox" Name="intrebare2" Value="b">Red 153 (rosu FEAA)<BR> <Input Type="checkbox" Name="intrebare2" Value="c">Ambele dar sunt si altele<BR> d) Crearea butoanelor. <Select> Este un marcaj container ce introduce meniuri derulante de opţiuni.b) Crearea butoanelor radio: De obicei butoanele radio sunt prezente într-o colecţie de cel puţin două care oferă o singură variantă de răspuns (o singură opţiune) la o anumită întrebare. onclick numele unei funcţii declarată printr-un script la începutul documentului. Atributele specifice acestui marcaj sunt: Cols=numar_coloane . În loc de caracterele obişnuite vor apărea steluţe (caracterul asterisc * ). Sunt foarte asemănătoare attachment . Butoanele se folosesc pe lângă transmiterea informaţiilor în baze de date şi la crearea legăturilor între diferitele pagini ale unui site. Rows=numar_linii . care se întinde pe mai multe rânduri. apelată la evenimentul click asupra butonului respectiv. f) Valorile de tip image presupun utilizarea diferitelor imagini în loc de butoanele clasice. Ele au aceleaşi attribute ca la inserarea imaginilor obişnuite în documentele HTML. Exemplu: <Textarea Cols=50 Rows=6>Aici se poate introduce mai mult text</Textarea> 2. Alte tipuri de controale care pot fi introduse în documentele HTML: 1. Atributul Size=numar indica numarul optiunilor prezente in meniu.

1 – Fişierul forms. .<Option Value="a" Selected>Foarte buna </Option><BR> <Option Value="b">Proasta </Option><BR> <Option Value="c">Foarte proasta </Option><BR> Urmărind sursa de mai sus trebuie să facem următoarele observaţii: Nu este obligatoriu sa închidem marcajul <Option> . Combinând exemplele anterioare putem ajungem la următorul cod HTML: Exemplul nr.html care conţine majoritatea tipurilor de controale întâlnite în cadrul formularelor HTML: EXERCITIU: Creaţi un document HTML care să cuprindă informaţii şi păreri despre anumite produse. © ValÿG Pagina 14 din 14 .Valoarea asociata fiecărei opţiuni prin atributul Value este valoare ce va fi transmisa scriptului CGI prin trimiterea formularului.Anumite opţiuni pot fi selectate implicit. pe care le-ar comercializa magazinul d-voastră virtual. Selectarea mai multor opţiuni se poate face doar daca a fost folosit atributul Multiple in conjuncţie cu marcajul <Select>. marcajul<Option> corespunzător va conţine atributul Selected.

Sign up to vote on this title
UsefulNot useful