revista naŢionalĂ de informaticĂ aplicatĂ › ...prin atributul novalidate în tag-ul...

REVISTA NAŢIONALĂ DE INFORMATICĂ

APLICATĂ

“INFO-PRACTIC”

Anul IV Nr. 28 ianuarie 2015

ISSN 2285 – 6560

ISSN–L 2285 – 6560

Referent ştiinţific Lector univ. dr. Claudiu Ionuţ Popîrlan

Facultatea de Ştiinţe Exacte

Universitatea din Craiova

Coordonator Nicolaescu Nicolae

Redactori

Nicolaescu Nicolae – redactor şef

Ionică Gabriela

Luţă Claudia

Diaconu Francesca

Petre Claudia

2

REVISTA NAŢIONALĂ DE INFORMATICĂ APLICATĂ “INFO-PRACTIC”

Anul IV Nr. 28 ianuarie 2015 ISSN 2285 – 6560

ISSN–L 2285 – 6560

CUPRINS

1. Formulare în HTML5…………………………………….…….... 3

2. CSS Backgrounds…………………………………………………13

3. Probleme propuse…………………………………………………22

3



ISSN–L 2285 – 6560

FORMULARE ÎN HTML5

Nicolaescu Nicolae, Slatina

Formularele în HTML se utilizează pentru colectarea unor date (user, parolă, adresă, e-mail etc.).

Declararea unui formular se realizează prin ….

Atributele tag-ului sunt următoarele:

- accept-charset

Specifică setul de caractere acceptat pentru introducerea datelor în formular.

Implicit este setul de caractere acceptat în pagina ce conține formularul

respectiv.

Exemplu:

- action

Specifică adresa (URL) care va procesa datele trimise prin formular (implicit

pagina care conține formularul).

Exemplu:

- autocomplete

Specifică dacă browserul va autocompleta forma sau obiectul de tip input sau

nu (implicit: on). Dacă valoarea este on browserul va reține datele introduse

anterior și le va afișa ca un meniu dropdown (acțiunea depinde și de setările

browserului).

Exemplu: sau

- enctype

Specifică standardul de codare a datelor transmise (implicit: application/x-

www-form-url-encoded).Valori posibile:

application/x-www-

form-urlencoded

Toate caracterele sunt codate înainte de a fi transmise

(spațiile se convertesc în "+" ,iar caracterele speciale

sunt convertite în valorile ASCII )

multipart/form-data Caracterele nu sunt codate. Valoarea este folosită

când se realizează upload.

text/plain Spațiile se convertesc în "+", dar caracterele speciale

nu se convertesc.

Exemplu:

4



ISSN–L 2285 – 6560

- method

Specifică metoda HTTP folosită când se transmit date din formă (implicit:

GET).

Exemplu: sau

Datele transmise prin GET apar la finalul URL-ului și pot apărea probleme în

cazul unor date sensibile, iar cantitatea de date transmise depinde de

lungimea maximă admisă a URL-ului. Datele transmise prin POST nu apar în

URL și cantitatea de date transmisă nu are o limitare reală.

- name Specifică numele folosit pentru identificarea obiectului de tip formă

Exemplu:

- novalidate

Specifică dacă datele din formular vor fi validate sau nu la apăsarea

butonului de tip submit.

Exemplu:

- target

Specifică unde se va afișa fișierul precizat prin atributul action (implicit:

_self).

_blank o fereastră nouă

_self în același frame

_parent în frame-ul părinte

_top în fereastra curentă

framename într-un iframe precizat prin numele său

Exemplu:

Tag-ul … permite gruparea obiectelor în interiorul unui formular.

Tag-ul … permite adăugarea unui titlu pentru obiectul de tip .

Exemplu:

Test

User

5



ISSN–L 2285 – 6560

Nume utilizator

1.Obiectul Input Text

Se utilizează pentru introducerea unor date de tip text. Forma tag-ului este .

Câteva atribute ale tag-ului:

- name pentru stabilirea sau returnarea numelui atribuit obiectului de tip text

- maxLength pentru stabilirea sau returnarea lungimii maxime a textului introdus

- placeholder pentru stabilirea sau returnarea textului situat în interiorul obiectului de tip text

- required pentru stabilirea sau returnarea faptului că trebuie completate date sau nu în obiectul

de tip text în momentul trimiterii informațiilor din formă. Valori posibile required=”true” sau

required=”false”. Dacă se stabilește atributul required=”true” nu se transmit date din formă

până nu se completează obiectul de tip text.

- autofocus pentru stabilirea sau returnarea faptului că la încărcarea paginii cursorul se va

poziționa pe obiectul de tip text. Valori posibile autofocus=”true” sau autofocus=”false”

- title pentru stabilirea sau returnarea textului care apare în momentul poziționării mouse-ului

deasupra obiectului de tip text

6



ISSN–L 2285 – 6560

- value pentru stabilirea sau returnarea conținutului curent al obiectului de tip text.Valoarea se

poate inițializa de exemplu value=”user” sau value=””.

- pattern pentru stabilirea sau returnarea șablonului stabilit pentru textul introdus.De exemplu

dacă dorim să introducem doar litere putem stabili șablonul pattern=”[A-Za-z]{3,}”, cifra 3

semnificând numărul minim de caractere.

- default value pentru stabilirea sau returnarea conținutului inițial al obiectului de tip text

- disabled pentru stabilirea sau returnarea faptului că obiectul este sau nu utilizabil. Valori

posibile disabled=”true” sau disabled=”false”

- readOnly pentru stabilirea sau returnarea faptului că obiectul este sau nu numai pentru

citire.Conținutul unui astfel de obiect nu poate fi modificat. Valori posibile readOnly=”true”

sau readOnly=”false”

- type returnează tipul obiectului din formă. Rezultatul returnat va fi întotdeauna “text”.

Exemplu:

Name:

Click pe butonul "Type" pentru a vizualiza tipul elementului din campul de tip

text

Type

function myFunction() {

var x = document.getElementById("myText").type;

document.getElementById("demo").innerHTML = x;

}

7



ISSN–L 2285 – 6560

- form returnează id-ul formei ce conține obiectul de tip text

- list pentru preluarea conținutului dintr-o listă predefinită care se va construi cu ajutorul tag-ului

.

Exemplu:

Tag-ul … definește o etichetă pentru un obiect de tip .Se poate utiliza

împreună cu atributul cu ajutorul căruia se identifică obiectul căruia îi aparține eticheta.

Exemplu:

Nume utilizator

2.Obiectul Input Submit

Se utilizează pentru transmiterea unor informații. Forma tag-ului este .

Câteva atribute ale tag-ului:

- autofocus

- defaultvalue

- disabled

8



ISSN–L 2285 – 6560

- form

- type

- title

- name

- value pentru stabilirea textului care va apărea pe butonul de tip submit.

Exemplu:

- formAction pentru stabilirea sau returnarea valorii URL-ului fișierului în care vor fi returnate

rezultatele.Valoarea stabilită are întâietate în fața valorii stabilite prin atributul action în tag-ul

- formEnctype pentru stabilirea sau returnarea formei de criptare a datelor transmise. Valoarea

stabilită are întâietate în fața valorii stabilite prin atributul enctype în tag-ul

- formMethod pentru stabilirea sau returnarea metodei de transmitere a datelor. Valoarea

stabilită are întâietate în fața valorii stabilite prin atributul method în tag-ul .

- formNoValidate pentru stabilirea sau returnarea faptului că datele trebuie sau nu validate în

momentul utilizării obiectului submit. Valoarea stabilită are întâietate în fața valorii stabilite

prin atributul novalidate în tag-ul .

- formTarget pentru stabilirea sau returnarea locului în care se va afișa fișierul care preia datele

transmise. Valoarea stabilită are întâietate în fața valorii stabilite prin atributul target în tag-ul

.

3.Obiectul Input Image

Este asemănător cu butonul de tip submit doar că transmiterea datelor se efectuează prin

efectuarea unui click pe o imagine. Forma tag-ului este . Câteva atribute ale

tag-ului:

- src pentru precizarea fișierului de tip imagine care va fi încărcat

- width pentru stabilirea lungimii imaginii

http://www.w3schools.com/jsref/prop_submit_formaction.asp

9



ISSN–L 2285 – 6560

- height pentru stabilirea lățimii imaginii

- alt pentru stabilirea unui text alternativ în cazul în care imaginea nu este afișată din diferite

motive (URL incorect, conexiune slabă etc).Textul trebuie să descrie imaginea dacă aceasta

conține informații

- defaultvalue

- disabled

- form

- name

- autofocus

- type

- value

- formAction

- formTarget

- formNoValidate

- formEnctype

- formMethod

Exemplu:

Pentru a alinia cele două obiecte putem utiliza următorul cod CSS3:

#t1,#t2{

vertical-align:bottom;

}

unde t1 și t2 sunt id-urile pentru cele două obiecte

10



ISSN–L 2285 – 6560

4.Obiectul Input Tel

Este utilizat pentru obiecte de tip input care trebuie să conțină un număr de telefon. Forma tag-

ului este .În prezent nu este suportat decât de Safari 8.

Alte atribute ale tag-ului:

- name

- placeholder

- title

- required

- autofocus

- pattern

- disabled

- autocomplete

- readOnly

Exemplu:

5.Obiectul Input Date

Este utilizat pentru introducerea unei date calendaristice. Forma tag-ului este .În prezent nu este suportat decât de Safari și Chrome.

11



ISSN–L 2285 – 6560

Atribute ale tag-ului:

- autocomplete

- autofocus

- defaultValue

- disabled

- form

- list

- name

- readOnly

- required

- type

- value

- min stabilește sau returnează valoarea minimă a câmpului de tip date

- max stabilește sau returnează valoarea minimă a câmpului de tip date

Exemplu:

Se poate selecta o dată calendaristică din intervalul stabilit.

http://www.w3schools.com/jsref/prop_date_autofocus.asp

12



ISSN–L 2285 – 6560

- step stabilește sau returnează valoarea intervalului de timp (în zile) dintre datele care pot fi

selectate

Exemplu:

6.Obiectul Input Number

Este utilizat pentru valori numerice. Forma tag-ului este .În prezent nu este suportat decât de Safari,Firefox și Chrome.

Sunt valabile aceleaşi atribute ca şi la obiectul date.

Exemplu:

continuare în numărul următor

Bibliografie

www.html5doctor.com

www.w3schools.com

www.w3.org

http://www.html5doctor.com/http://www.w3schools.com/http://www.w3.org/

13



ISSN–L 2285 – 6560

CSS3 BACKGROUNDS


Proprietăţi:

1. Background-color este utilizată pentru stabilirea culorii de fundal a unui obiect sau a întregii

pagini.Stabilirea culorii se poate face în mai multe moduri:

a) Utilizând numele culorii: background-color: red;

b) Utilizând o valoare RGB: background-color: rgb(255,255,128);

c) Utilizând o valoare HEX: background-color: #bbff00;

d) Utilizând o valoare HSLA: background-color: hsla(50.33%,33%.,0.75);

e) Utilizând valoarea transparent: background-color:transparent; (specifică faptul că fundalul

trebuie să fie transparent)

f) Utilizând valoarea inherit: background-color: inherit; (specifică faptul că fundalul

obiectului moşteneşte culoarea obiectului care-l conţine)

g) Utilizând valoarea initial: background-color: initial; (specifică faptul că fundalul obiectului

dobândeşte valoarea iniţială). Nu este suportată în Internet Explorer.

Fişier HTML5-1.htm

TestCSS

User

Nume utilizator

14



ISSN–L 2285 – 6560

Fişier stil.css

#submit {

background-color:red;

}

2. Background-image este utilizată pentru stabilirea uneia sau mai multor imagini pe fundalul

unui obiect.

Forma proprietăţii este: background-image: url(“numeimagine”);

Exemplu:

background-image:url ("Cat_Small_Google.jpg");

Se stabileşte şi o culoare de fundal, dacă imaginea nu este valabilă.

#submit{

background-image:url("Cat_Small_Google.jpg");

background-color: red;

}

Dacă dimensiunea obiectului este mai mare decăt dimensiunea imaginii, implicit aceasta se

repetă pe orizontală şi verticală.

#submit{


width:200px;

height:50px;

}

15



ISSN–L 2285 – 6560

Se pot stabili mai multe imagini pe fundalul unui obiect.

Exemplu:

#submit{

background-image:url("Cat_Small_Google.jpg"),url("apple.png");

width:250px;

height:150px;

background-repeat: no-repeat, no-repeat;

}

3. Background-repeat este utilizată pentru stabilirea modului în care una sau mai multe imagini

se repetă pe fundalul unui obiect.Valorile posibile sunt:

- background-repeat: repeat-x imaginea se repetă doar pe orizontală

Exemplu:

#submit{


width:250px;

height:150px;

background-repeat: repeat-x;

}

- background-repeat: repeat-y imaginea se repetă doar pe verticală

16



ISSN–L 2285 – 6560

- background-repeat: repeat imaginea se repetă atât pe orizontală cât şi pe verticală

- background-repeat: no-repeat imaginea nu se repetă

- background-repeat: space imaginea se repetă atâta timp cât nu trebuie decupată, spaţiul

distribuindu-se în mod egal între imagini

- background-repeat: round imaginea îşi modifică dimensiunea (creştere sau micşorare)

astfel încât să acopere exact fundalul

- background-repeat: inherit moşteneşte proprietatea de la elementul ce conţine obiectul

respectiv

4. Background-size este utilizată pentru stabilirea dimensiunii imaginii care va acoperi

fundalul obiectului.Valorile posibile sunt:

- background-size: auto imaginile apar la dimensiunea lor normală

- background-size: dim1 dim2 se precizează dimensiunile (lungime,lăţime) în pixeli

Exemplu: background-size: 40px 30px;

- background-size: proc1 proc2 se precizează dimensiunile (lungime,lăţime) în procente

raportate la dimensiunile obiectului (nu ale imaginii !).

- Exemplu: background-size: 40% 30%

17



ISSN–L 2285 – 6560

- background-size: cover imaginea este modificată proporţional astfel încât să acopere în

întregime fundalul obiectului.Modificarea se face astfel încât să se obţină cea mai mică

imagine ale cărei dimensiuni să fie mai mari sau egale decât dimensiunile obiectului.

- background-size: contain imaginea este modificată proporţional astfel încât să se obţină

cea mai mare imagine ale cărei dimensiuni să fie mai mici sau egale decât dimensiunile

obiectului.

- background-size: inherit moşteneşte proprietatea de la elementul ce conţine obiectul

respectiv

- background-size: initial setează proprietatea la valorile iniţiale

5. Background-position este utilizată pentru stabilirea poziţiei de start a primei imagini dintre

cele care vor acoperi fundalul obiectului. În mod implicit aceasta este colţul din stânga sus.

Valorile posibile sunt:

- left top, left center, left bottom, right top, right center, right bottom, center top,

center center, center bottom

Exemplu: background-position: left center;

18



ISSN–L 2285 – 6560

Dacă una din valori lipseşte cealaltă este în mod implicit center.

- background position: x% y% prima valoare se referă la poziţia pe orizontală, iar cea de-

a doua la poziţia pe vericală.Colţul din stânga-sus este 0%

0%, iar colţul din dreapta-jos este 100% 100%.

Exemplu: background-position: 20% 20%;

- background position: xpoz ypoz prima valoare se referă la poziţia pe orizontală, iar cea

de- a doua la poziţia pe vericală.Colţul din stânga-sus

este 0 0.Unităţile pot fi pixeli sau alte unităţi.Dacă nu se

precizează decât o valoare, cealaltă este implicit 50%

(se pot combina valori numerice şi procentuale).

Exemplu: background-position: 20px 50px;

- background position: initial;

- background position: inherit;

6. Background-attachment este utilizată pentru a stabili dacă imaginea stabilită ca fundal

rămâne fixă sau se deplasează odată cu elementul respectiv (scroll).Opţiunile sunt:

- background-attachment: scroll se deplasează odată cu elementul respectiv

- background-attachment: fixed imaginea rămâne fixă, iar restul conţinutului se

deplasează

19



ISSN–L 2285 – 6560

- background-attachment: local se deplasează odată cu conţinutul elementului respectiv

- background-attachment: initial

- background-attachment: inherit

7. Background-origin este utilizată pentru a stabili elementul la care trebuie să se raporteze

proprietatea background-position.

Exemplu:

#submit{


border:5px solid black;

width:250px;

height:150px;

background-origin: padding-box;

background-repeat: no-repeat;

background-position: left top;

}

Opţiunile sunt:

- background-origin: padding-box

- background-origin: border-box

- background-origin: content-box

20



ISSN–L 2285 – 6560

- initial

- inherit

8. Background-clip este utilizată pentru a stabili porţiunea care va fi umplută cu culoare

folosind proprietatea background-color.

Exemplu:

#submit{

border:5px black dotted;

padding 25px;

width:250px;

height:150px;

background-color: yellow;

background-clip:padding-box;

}

- background-clip: padding-box

- background-clip: border-box

- background-clip: content-box

21



ISSN–L 2285 – 6560

- background-clip: initial

- background-clip: inherit

9. Background permite setarea tuturor proprietăţilor referitoare la fundal printr-o singură

declaraţie.

Exemplu: background: url("Cat_Small_Google.jpg") no-repeat fixed center;

Bibliografie

https://developer.mozilla.org

www.w3schools.com

www.w3.org

https://developer.mozilla.org/http://www.w3schools.com/http://www.w3.org/

22



ISSN–L 2285 – 6560

PROBLEME PROPUSE

CLASA A XI-A

XI.12 Cluburile sportive cautǎ o soluție software care informatizeazǎ activitatea de gestionare/evidențǎ

a jucǎtorilor.

1. Proiectați baza de date relaţională cu numele Cluburi sportive.mdb.

Baza de date trebuie să conțină date despre cluburile sportive și jucătorii fiecărui club.

2. Proiectați următoarele tabele și stabiliți sistemul relațional între tabele:

3. Stabiliți pentru câmpul Nume Prenume să nu permită introducerea a mai mult de 20 caractere.

4. Stabilți pentru câmpul Începere contract o regulă de validare prin care să nu se permită

introducerea datelor de după 1.01.2014 iar textul de validare să fie Nu se introduc contractele

noi.

5. Introduceți câte 3 cluburi cu câte 2 jucători pentru fiecare club.

6. Proiectați un formular care să conțină câmpurile Nume club, adresă site. Salavați formularul cu

numele Site.

7. Afișați jucătorii disponibili pentru transfer precum și numele cluburilor. Numele jucătorilor să

apară în ordine alfabetică. Salvați interogarea cu numele Transferuri.

8. Afișați numele cluburilor care au jucători propuși pentru transfer. Salvați interogarea cu numele

Transferuri cluburi.

23



ISSN–L 2285 – 6560

9. Afișați numele cluburilor care nu au imagine afișată. Salvați interogarea cu numele Fără

imagini.

10. Afișați jucătorii de la un club (de ex. FC Steaua) propuși pentru transfer. Salvați interogarea cu

numele Transferuri Steaua.

11. Afișați numărul cluburilor. Salvați interogarea cu numele Număr cluburi.

12. Afișați salariul mediu, salariul minim, salariul maxim pentru fiecare club. Salvați interogarea cu

numele Salarii pe echipe .

13. Afișați jucătorii de la un club (de ex. FC Steaua) care au salariile cuprinse între 2000 și 3000.

Salvați interogarea cu numele Salarii1.

14. Afișați jucătorii care au salariile 2000, 3000, 4000. Salvați interogarea cu numele Salarii2.

15. Afișați jucătorii care au salariile mai mari ca 4000 sau mai mici ca 2000. Salvați interogarea cu

numele Salarii3.

16. Afișați numele cluburilor care au jucători al căror nume începe cu litera R. Salvați interogarea cu

numele Nume jucători

17. Realizați un raport pentru interogarea Fără imagini. Salvați raportul cu numele Imagini club.

Profesor Alexandru CAZAN, Liceul Tehnologic “Grigore Moisil”- Brǎila

CLASA A XII-A

XII.6 Scrieţi codul HTML5 şi CSS3 pentru a crea obiectul de mai jos. Se vor folosi imagini

corespunzătoare din Google Images.


24



ISSN–L 2285 – 6560

XII.7 Scrieţi codul HTML pentru a realiza formularul de mai jos.

Cerinţe:

- la deplasarea mouse-ului deasupra fiecărui obiect este afişat un mesaj corespunzător; - trebuie completat fiecare câmp al formularului; - pentru introducerea numărului de telefon se utilizează şablonul #### ### ###; - pentru introducerea codului cărţii se stabileşte ca valoare minimă codul 1000; - pentru introducerea seriei CI primele două caractere trebuie să fie litere, iar celelalte şase

trebuie să fie cifre;

- pentru introducerea datei naşterii se introduce ca valoare maximă 2005-10-10.


XII.8 Realizaţi codul HTML pentru o pagină web cu un tabel, cu celule extinse pe verticală şi pe

orizontală, care sǎ ducǎ la urmǎtorul rezultat ȋn browser:

25



ISSN–L 2285 – 6560

Profesor Alexandru CAZAN, Liceul Tehnologic “Grigore Moisil”- Brǎila

Adresa pentru corespondență: [email protected]
mailto:[email protected]

revista naŢionalĂ de informaticĂ aplicatĂ › ...prin atributul novalidate în tag-ul...

Documents