Home - Rasfoiesc.com
Educatie Sanatate Inginerie Business Familie Hobby Legal
Doar rabdarea si perseverenta in invatare aduce rezultate bune. stiinta, numere naturale, teoreme, multimi, calcule, ecuatii, sisteme


Biologie Chimie Didactica Fizica Geografie Informatica
Istorie Literatura Matematica Psihologie

Html


Index » educatie » » informatica » Html
» Formulare HTML


Formulare HTML




Formulare

Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a genera pe ecran zone de dialog cu cititorul documentelor Web. Un formular reprezinta doar o interfata pentru captarea informatiilor, el necesita elemente pentru tratarea datelor colectate. Prelucrarea finala a datelor se executa pe server, de exemplu, prin programele denumite CGI (Common Gateway Interface). Altfel spus, CGI asigura interactiunea server-navigator in sensul personalizarii rezultatelor prin diverse prelucrari asupra elementelor din paginile Web.




Scriptul CGI este lansat in executie pe baza unor parametri transmisi de client. Dialogul intre client si server, pentru prelucrarea unui formular, se deruleaza dupa urmatorul scenariu (fig. 4):

1.      Clientul lanseaza o cerere catre un URL, ce include un formular.

2.      Serverul receptioneaza cererea, o analizeaza si emite formularul de completat catre client.

3.      Clientul completeaza formularul si-l transmite server-ului.

4.      Server-ul lanseaza in executie scriptul CGI, care realizeaza o anumita  prelucrare asupra datelor din formular (interogheaza o baza de date, calculeaza niste valori etc.) si pregateste rezultatele obtinute.

5.      Scriptul transmite in final rezultatele catre server intr-un format care poate fi inteles de acesta.

6.      Server-ul receptioneaza rezultatele si le transmite mai departe clientului.

Figura 4. Interactiunea server-client

Scripturile CGI sunt inregistrate in mod curent pe server, intr-un director care se creeaza la instalarea acestuia (demonul httpd). Pentru serverul Web NCSA, acest director este /cgi-bin. In plus, la configurarea serverului in fisierul srm.conf se pot specifica mai multe directoare care sa gazduiasca scripturi CGI. Un script poate fi scris intr-un limbaj de programare ca: C, Fortran, Perl, Visual C++, Visual Basic. Limbajul Perl este specializat pentru acest scop, fiind de altfel si cel mai utilizat.

Prin intermediul tag-urilor HTML se descriu zonele formularului, care vor fi completate de utilizator. Sintaxa generala pentru deschiderea unui formular este:

<FORM METHOD=tip_m ACTION=URL_cgi NAME=nf TARGET=cadr>

 

unde:

·         Atributul METHOD=tip_m specifica modul cum se emite informatia catre server. Valorile cel mai frecvent utilizate pentru tip_m sunt: GET si POST.

Cand se utilizeaza metoda GET sirul de caractere constituit din ansamblurile nume camp si valoare este adaugat la URL-ul scriptului cgi care se va executa. Separatorul intre numele scriptului si restul sirului de caractere il reprezinta caracterul ?. Deoarece majoritatea browserelor afiseaza URL curent, acest sir de caractere va fi vizibil. Din aceasta cauza se prefera metoda POST, cand sirul de caractere este trimis catre server printr-o secventa HTTP speciala.

De exemplu, daca tag-ul de inceput este:

 

<FORM METHOD=GET ACTION=http://www.infocib.ase.ro/

                               cgi_bin/nume_script>

URL-ul pe care il va apela clientul, dupa completarea formularului, are urmatoarea forma:

http://www.infocib.ase.ro/cgi_bin/nume_script?             

       camp1=valoare1&camp2=valoare2&camp3=valoare3…

·         Atributul ACTION=URL_cgi indica locul unde se emite informatia, unde se gaseste scriptul care se va executa. Valoarea sa este reprezentata prin URL-ul scriptului.

·         Atributul NAME=nf detine doua functii particulare:

Ø      indica scriptului CGI numele formularului care a trimis datele, in situatia cand mai multe formulare exista in acelasi document;

Ø      identifica un formular, prin numele sau, pentru a putea fi referit prin functiile JavaScript.

·         Atributul TARGET=cadr specifica fereastra sau cadrul (frame) in care se va afisa rezultatul executiei scriptului CGI. In absenta atributului TARGET se inlocuieste pagina curenta.

Textul incadrat de <FORM> si </FORM> va contine un ansamblu de comenzi: INPUT, SELECT etc.

Tag-uri pentru definirea intrarilor intr-un formular

Sintaxa generala a tag-ului care defineste un camp pentru introducerea datelor intr-un formular este:

<INPUT TYPE='tip' NAME='nume_camp' VALUE='val' SIZE='n' MAXLENGHT='m'>

·         Atributul TYPE specifica  tipul intrarii, care poate fi:

Ø      text: text simplu, parola, ascuns, multilinie;

Ø      meniu: cu selectarea unei intrari sau selectare multipla;

Ø      butoane: caseta de control, radio, reset si submit. 

·         Atributul NAME permite definirea numelor, in scopul identificarii datelor care vor fi trimise catre server. Intr-un formular se utilizeaza o singura data acelasi nume.

Celelalte atribute sunt dependente de tipul intrarii.

Intrarea text este cel mai simplu tip de intrare intr-un formular. Zona de introducere date accepta un cuvant sau o linie de text.    Atributele sunt:

·         VALUE='val', atribut optional care permite predefinirea continutului din campul text, cu alte cuvinte, ceea ce o sa apara pe ecran la prima activare a formularului;

·         SIZE ='n', atribut optional prin care se stabileste lungimea campului de intrare text (in caractere);

·         MAXLENGTH ='m', atribut optional prin care se limiteaza numarul caracterelor care pot fi introduse (daca se depaseste acest numar apare un semnal sonor).

Exemplul 1.

<FORM METHOD='Post' ACTION='http://www.infocib …. '>

Care este numele de familie?

<INPUT TYPE='text' NAME='Nume_familie'   VALUE='Nastase'

SIZE='10' MAXLENGTH='15'>

</FORM>

Intrarea: password  utilizeaza aceleasi atribute ca si intrarea text.

Exemplul 2.

<FORM METHOD='Post' ACTION='http://www.infocib …. '>

Introdu 8 caractere pentru parola:

<INPUT TYPE='password' NAME='parola'  SIZE='8' MAXLENGTH='8'>

</FORM>

 

Intrare: textarea se utilizeaza pentru introducerea unui text multilinie. De data aceasta tag-ul <INPUT  TYPE='text'> este inlocuit cu:

 <TEXTAREA NAME='nume_camp' ROWS='r' COLS='c'>

[Text implicit]

</TEXTAREA>

Atributele sunt:

·         ROWS='r',  specifica numarul de randuri care pot fi afisate, din textul care se va introduce;

·         COLS='c', specifica numarul de coloane care pot fi afisate;

·         Text implicit, text afisat initial. 

Exemplul 3.

 <FORM METHOD='Post' ACTION='http://www.infocib.. '>

Transmiteti eventualele reclamatii

<TEXTAREA NAME = 'Reclamatie'  ROWS='3'   COLS='40'>





Reclamatii despre activitatea de seminar

</TEXTAREA>

</FORM>

 

 Cand numarul liniilor si al coloanelor introduse depasesc pe cele prevazute a fi afisate se utilizeaza scrollbars.

Intrarea meniu: SELECT are loc selectia unei intrari din meniu. De data aceasta se utilizeaza tag-ul  SELECT in contextul:

<SELECT NAME='nume_camp'>

<OPTION [VALUE='v'][SELECTED] > Nume_Optiune1

<OPTION > Nume_Optiune2

……..

</SELECT>

Atributele sunt:

·         OPTION,  prin care se specifica o optiune a meniului;

·         VALUE='v', atribut optional prin care se specifica valoarea optiunii emise spre server   (daca nu se regaseste acest parametru, numele optiunii va fi emis ca valoare);

·         SELECTED, atribut optional prin care se specifica prima optiune afisata a meniului (daca acest atribut lipseste se va afisa prima optiune din lista meniu).

Exemplul 4.

<FORM METHOD='Post' ACTION='http://www.infocib …. '>

Cum evaluati cunostintele dumneavoastra in domeniul calculatoarelor?

<SELECT NAME='evaluare'>

<OPTION>Foarte bun

<OPTION SELECTED>Bun

<OPTION VALUE='acceptabil'>Mediu spre bun

<OPTION>Mediu

<OPTION>Slab

<OPTION>Foarte slab

</SELECT>

</FORM>

 

In faza initiala se afiseaza:

Ulterior, cand se doreste selectarea unei optiuni, se va afisa:

Intrare meniu: SELECT cu SIZE permite alegerea multipla dintr-o lista de optiuni. Diferenta fata de situatia anterioara consta in utilizarea optiunilor: SIZE, prin care se specifica numarul de linii afisate si MULTIPLE, care permite o selectie multipla.

Exemplul 5.

<FORM METHOD='Post' ACTION='http://www.infocib…. '>

Doresti sa cumperi:

<SELECT NAME='cumparaturi' MULTIPLE SIZE='5'>

<OPTION> Imbracaminte

<OPTION VALUE='AL' SELECTED> Alimente

<OPTION> Rechizite scolare

<OPTION SELECTED> Carti de specialitate

<OPTION> Echipament sportiv

<OPTION> Incaltaminte

</SELECT>

</FORM>

Intrarea buton: checkbox (caseta de control), principiul de introducere a datelor este: daca da, completeaza caseta.     Pentru acest tip de  intrare se revine la tag-ul:

<INPUT TYPE='checkbox' VALUE='v' CHECKED>,

unde:

·         VALUE='v', atribut optional prin care se specifica valoarea trimisa catre server, in cazul selectarii (daca nu este definita, o valoare “on“ se emite catre server);

·         CHECKED, atribut optional pentru selectarea in mod implicit a casetei.

Exemplul 6.

<FORM METHOD='Post' ACTION='http://www.infocib…. '>

<INPUT TYPE='checkbox' NAME='donatie' CHECKED>Da, daca vrei sa faci o donatie

<P>

<INPUT TYPE='checkbox' NAME='lista e-mail'>Da, daca vrei sa fii inclus in lista de posta

</FORM>

Intrare buton: radio selecteaza una dintre posibilitatile existente. Sunt cazuri cand trebuie aleasa o optiune din mai multe, tipul campului de intrare este definit prin atributul TYPE='radio'. Alte atribute:

·         VALUE='v', atribut necesar pentru a indica valoarea asociata butonului, daca acesta este selectat. Valoarea specificata prin atributul NAME identifica blocul de butoane;

·         CHECKED, buton radio selectat (se recomanda sa se foloseasca acest atribut).

Exemplul 7.

<FORM METHOD='Post' ACTION='http://www…. '>




Calculatorul ruleaza sub:

<DL>

<DD> Sistemul de operare:

<P>

<INPUT TYPE='radio' NAME='Sistem_operare'

                                  VALUE='DOS'> DOS

<INPUT TYPE='radio' NAME='Sistem_operare'

                               VALUE='WIN'> WINDOWS

<INPUT TYPE='radio' NAME='Sistem_operare

                   'VALUE='W_NT' CHECKED> WINDOWS NT

<P><DD> Iesirea se face la:<P>

<INPUT TYPE='radio' NAME='Iesire'

                                VALUE='ecran'>Ecran

<INPUT TYPE='radio' NAME='Iesire'

                          VALUE='Imprim'>Imprimanta

</DL>

</FORM>

Intrarea buton: reset/submit, prin activarea acestor campuri are loc stergerea tuturor zonelor de intrare din formular (se vor regasi valorile initiale), respectiv transmiterea datelor catre server. Butonul SUBMIT transfera informatia, din formularul completat, la URL specificat prin atributul ACTION al tag-ului <FORM…>. Atributul optional VALUE se utilizeaza pentru afisarea unui text pe buton.

Exemplul 8.

<FORM METHOD='Post' ACTION='http://www.infocib…. '>

---------------

---------------

<INPUT TYPE='reset' VALUE='Sterge campurile'>

<INPUT TYPE='submit' VALUE='Trimite datele'>

</FORM>

Intrarea: hidden transmite informatie ascunzand textul.

Atributul VALUE='v' este necesar pentru a se specifica valoarea textului ascuns, care va fi emis catre server.

Exemplul 9.

<FORM METHOD='Post' ACTION='http://www.infocib…. '>

Nu se va vedea nimic

<INPUT TYPE='hidden' NAME='nume' VALUE='ABCD'>

</FORM>

Exemplul 10. Ordin de bursa (fig. 5)

<HTML>

<HEAD>

<TITLE> *** ORDIN DE BURSA *** </TITLE>

<BODY>

<H2 ALIGN=CENTER>ORDIN DE BURSA</H2>

<FORM METHOD='post' ACTION='http://www.infocib…' >

<P>DATA EMITERII ORDINULUI :

 <INPUT NAME=dataord TYPE=data SIZE=20>

<P>NUMAR CONTRACT/COMANDA :

 <INPUT NAME=nrcntr TYPE=int SIZE=15>

<P> SENSUL TRANZACTIEI :

<P>CUMPARARE

<INPUT NAME=tip TYPE=radio CHECKED>

VINZARE

<INPUT NAME=tip  TYPE=radio>

<P>DENUMIREA TITLULUI MOBILIAR :

<INPUT NAME=codtitlu TYPE=text SIZE=20>

<P>NUMARUL TITLURILOR:

<INPUT NAME=nrtitlord TYPE=int SIZE=10>

<P>MODUL DE NEGOCIERE :

<P>LA VEDERE

<INPUT NAME=modneg TYPE=radio CHECKED>

LA TERMEN

<INPUT NAME=modneg TYPE=radio>

<P>CURSUL DE EXECUTIE :

<P ALIGN=RIGH>

<SELECT  NAME='tipcurs' SIZE='4'>

<OPTION>LA PRIMUL CURS

<OPTION>CEL MAI BUN

<OPTION>LA CURS LIMITAT<P>

<OPTION>LA CURS LIMITAT, CU MENTIUNEA STOP

</SELECT>

<P>MENTIUNI SUPLIMENTARE :

<TEXTAREA NAME='Comentariu' ROW=12 COLS=44>

Mentiuni asupra cursului de executie

</TEXTAREA>

<P>TERMENUL LIMITA DE EXECUTIE :

<INPUT NAME=termlim TYPE=data SIZE=20>

<P>Tasteaza pentru :

<INPUT TYPE=SUBMIT VALUE=VALIDARE> sau pentru

<INPUT TYPE=RESET VALUE=ANULARE>

</FORM>

</HTML>

Figura 5. Exemplul 1 de formular

Exemplul 11. Chestionar (fig. 6)

<HTML>

<HEAD>

<TITLE> *** Chestionar *** </TITLE>

<BODY>

<H1 ALIGN=CENTER>CHESTIONAR</H1>

<UL>

<LI><P><H2>Care este domeniul dumneavoastra de

 activitate:</H2>

<FORM METHOD='post' ACTION='http://www.infocib…' >

<SELECT MULTIPLE NAME='domeniu' SIZE='6'>

<OPTION>EDUCATIE/INVATAMINT

<OPTION>INFORMATICA

<OPTION>SANATATE

<OPTION>COMERT

<OPTION>SERVICII PUBLICE

<OPTION>FINANTE

<OPTION>CHIMIE

<OPTION>CONSTRUCTII

<OPTION>ALTE DOMENII

</SELECT>

<LI><P><H2>Care este functia pe care o indepliniti: </H2>

<SELECT MULTIPLE NAME='functie' SIZE='6'>

<OPTION>DIRECTOR

<OPTION>PROFESOR

<OPTION>ADMINISTRATOR

<OPTION>INGINER



<OPTION>MUNCITOR

<OPTION>CERCETATOR

<OPTION>SEF COLECTIV

<OPTION>ALTE

</SELECT>

<P>

<INPUT TYPE=SUBMIT VALUE=Tasteaza_pentru_Validare>

</FORM>

</HTML>

Figura 6. Exemplul 2 de formular

Figura 6.  Prelucrarea formularelor in contextul JavaScript

Meta – informatii in paginile Web

Paginile Web poseda, in afara continutului acestora, o serie de informatii care nu sunt destinate direct utilizatorului. Aceste informatii se numesc meta–informatii si sunt destinate in special programelor specializate in analiza documentelor HTML. Exista programe robot de analiza automata a documentelor HTML de pe Internet, care indexeaza paginile Web, pentru a crea cataloage. Pe de alta parte, exista programe de cautare rapida care folosesc aceste rezultate.

Specificarea meta–informatiilor intr-o pagina HTML se face prin tag-ul META, care se plaseaza in antet, inainte de tag-ul <HEAD>..</HEAD>.

<META NAME='cuvant_cheie' CONTENT='v_cuvant_cheie'>

Atributele NAME si CONTENT permit asocierea unei valori pentru un cuvant_cheie. Cuvintele-cheie care pot fi specificate ca valori ale atributului NAME sunt:

·         AUTHOR specifica autorul/autorii documentului;

·         KEYWORDS, cuvintele-cheie din interiorul documentului;

·         DESCRIPTION, o scurta descriere a documentului sau serverului Web.

Atributul NAME va fi inlocuit cu HTTP-EQUIV, daca meta-informatia este inclusa in zona antet a raspunsului.

Exemplu:

<META HTTP-EQUIV='Expira:' CONTENT='Marti, 15 decembrie 1998“>

Mesajul Expira: Marti, 15 decembrie 1998 va fi inclus de server in antetul documentului raspuns.

8. Tabele

HTML  permite descrierea tabelelor intr-o maniera amanuntita ca si in cazul listelor. Un tabel poate contine un alt tabel. O celula dintr-un tabel poate contine: text, liste, imagini, legaturi hipertext sau elemente ale unui formular. Sintaxa generala pentru crearea unui tabel este:

<TABLE BORDER=m CELLPADING=n2 CELLSPACING=n3 WIDTH=n4%>

 --- descrierea tabelului---

</TABLE>

Proprietatile generale ale unui tabel se specifica prin atributele:

·         BORDER, grosimea bordurii de incadrare a tabelului;

·         CELLPADING, spatiul din jurul textului unei celule;

·         CELLSPACING, spatiul intre celule;

·         WIDTH specifica in procente cat la suta din suprafata ferestrei ocupa tabelul.

Tabelul este descris rand cu rand cu ajutorul tag-ului:

<TR VALIGN=TOP|BOTTOM|MIDDLE ALIGN=RIGHT|LEFT|CENTER>

</TR>

Atributul VALIGN specifica alinierea verticala a textului in toate celulele randului, iar ALIGN da alinierea orizontala.

Definirea unei celule in cadrul unui rand se face prin:

<TD VALIGN=v1 ALIGN=v2 COLSPAN=n1 ROWSPAN=n2 NOWRAP>

</TD>

Toate celulele unui rand mostenesc valorile atributului VALIGN definit in tag-ul <TR>, cu exceptia cazului cand acest atribut este redefinit prin tag-ul <TD>, devenind astfel prioritar in raport cu primul.

Atributul COLSPAN specifica latimea celulei, ca multiplu de latimea coloanei de baza, iar ROWSPAN specifica inaltimea celulei, ca multiplu de inaltimea randului de baza. Dimensionarea celulelor unui tabel se face automat la lungimea maxima a textului din celule. Daca textul introdus intr-o celula este mai lung de 64 caractere, navigatorul il imparte automat in mai multe randuri. Atributul NOWRAP permite inhibarea acestei reguli, lasand textul pe un singur rand, indiferent de lungimea acestuia.

Antetul tabelului  se descrie prin tag-ul <TH> </TH> care are aceleasi atribute ca si <TD>. Textul din acest tag este automat centrat si bolduit.

Titlul tabelului se specifica prin tag-ul:

< CAPTION ALIGN=TOP|BOTTOM></CAPTION>

Se poate colora intreg tabelul, o linie sau o celula cu ajutorul atributului BGCOLOR din tag-urile TABLE, TR sau TD.

Exemplul 18. Tabel ale carui celule contin elemente de tipuri diferite: legaturi hipertext, imagini, formular, liste si text (fig. 8).

<HTML><HEAD>

   <TITLE>Tabel in pagina HTML</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=10 >

<TR ALIGN=CENTER>

<TD><A HREF='http://www.infocib.ase.ro'>CIBERNETICA, STATISTICA SI

</A>

<BR><A HREF='http://ie.ase.ro'>INFORMATICA 

ECONOMICA</A></TD>

<TD>Catedrele <BR>facultatii</TD>

<TD></TD>

</TR>

<TR>

<TD><IMG SRC='WWW.GIF'></TD>

<TD>

<UL>

<LI>Informatica Economica</LI>

<LI>Matematica</LI>

<LI>Statistica</LI>

</UL></TD>

<TD ALIGN=CENTER>

<A HREF ='http://www.infocib.ase.ro'>

<IMG SRC='Revenire.gif' ></A></TD>

</TR>

<TR>

<TD ALIGN=CENTER><I>Introduceti numele</I>

<BR><I>dumneavoastra</I></TD>

<TD ALIGN=LEFT><FORM method='post'

 action=' '><INPUT name='nume'></TD>

<TD ALIGN=CENTER><INPUT type='submit'

value='OK'></FORM></TD>

</TR>

<CAPTION align='bottom'>Exemplu de <B>tabel</B></CAPTION>

</TABLE>

</BODY>

</HTML>

Figura 8. Tabel multielement

Exercitiu 2

 

Sa se realizeze o pagina HTML a carei reprezentare este:

 







Politica de confidentialitate


Copyright © 2019 - Toate drepturile rezervate

Html


Access
Adobe photoshop
Autocad
Baze de date
C
Calculatoare
Corel draw
Excel
Foxpro
Html
Internet
Java
Linux
Mathcad
Matlab
Outlook
Pascal
Php
Powerpoint
Retele calculatoare
Sql
Windows
Word