I. Forms HTML Forms reprezint o serie de controale sub form grafic utile oricrui utilizator.

Aceste controale permit introducerea unor texte, selectarea unor opiuni predefinite dintr-o list, introducerea butoanelor de tip radio, introducerea casetelor de opiuni, precum i introducerea altor tipuri de controale. *** O mare parte din tag-urile categoriei forms nu necesit nchiderea acestora n limbajul HTML. Limbajul XML i derivatele sale (de exmplu XHTML) necesit nchiderea tuturor tag-urilor din cadrul categoriei forms.

1.1. Tag-ul form Tag-ul form trebuie s conin cel puin urmtoarea structur: <form action="url_to_send_data" method="get/post"> </form> Atributul action definete un URL de unde datele din form trebuie transmise pentru a fi manipulate. Dei se poate utiliza aproape orice tip de URL, destinaia ar trebui s fie un script ori alt element care este capabil s interpreteze corect datele i s pun n aplicare instruciunile. Atributul method controleaz modul n care datele sunt transmise pentru a fi manipulate. Pentru acest atribut exist dou valori: GET i POST. Fiecare valoare corespunde protocolului HTTP cu acelai nume. HTTP GET ataeaz datele actualului URL pentru a transmite datele la destinaia specificat n atributul action. Probabil ai observat URL-uri care seamn cu urmtorul: http://www.on-target-games.com/forms.cgi?id=45677&data=Taarna Datele apar dup semnul ntrebrii (?). De exemplu, elementul id are valoarea 45677, iar elementul data are valoarea Taarna. *** Protocolul HTTP GET este nesigur. Nu se recomand utilizarea acestuia pentru transmiterea datelor cu caracter confidenial necriptate deoarece acestea sunt vizibile n majoritatea browserelor i pot fi foarte uor accesibile hackerilor. HTTP POST transmite datele codificate n fluxul de date HTTP. Ca atare, de obicei datele nu sunt vizibile unui utilizator. Prin urmare este o metod mai sigur de a transmite datele, dar poate fi greu de implementat.

Required Attributes
Attribute action Value URL Description DTD Specifies where to send the form-data when a form is STF submitted

Standard Attributes
Attribute class dir id name lang Value classname rtl ltr id Description Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element (replaces the name attribute) name The name of the form (use the id attribute instead) language_code Specifies a language code for the content in an element DTD STF STF STF STF STF

style title xml:lang

style_definition Specifies an inline style for an element STF text Specifies extra information about an element STF language_code Specifies a language code for the content in an STF element, in XHTML documents

Optional Attributes
Attribute accept accept-charset enctype Value MIME_type charset application/x-wwwform-urlencoded multipart/form-data text/plain get post name _blank _self _parent _top framename Description DTD Specifies the types of files that can be STF submitted through a file upload Specifies the character-sets the server can STF handle for form-data Specifies how form-data should be STF encoded before sending it to a server

method name target

Specifies how to send form-data

STF

Specifies the name for a form TF Deprecated. Specifies where to open the TF action URL

Event Attributes
Attribute onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onreset onsubmit Value script script script script script script script script script script script script Description DTD Script to be run on a mouse click STF Script to be run on a mouse double-click STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF Script to be run when a form is reset Script to be run when a form is submitted

1.2. Tag-ul label Label-ul este un cmp de text needitabil. Tag-ul label trebuie s conin cel puin urmtoarea structur: <label for="id_of_related_tag">text_label</label> Exemplu: <label for="theLabel"> Acesta este un <em> label </em> (text needitabil) </label>

Standard Attributes
Attribute accesskey class dir id lang style title xml:lang Value character classname rtl ltr id language_code style_definition text language_code Description Specifies a keyboard shortcut to access an element Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents DTD STF STF STF STF STF STF STF STF

Optional Attributes
Attribute for Value element_id Description Specifies which form element a label is bound to DTD STF

Event Attributes
Attribute onblur onclick ondblclick onfocus onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup Value script script script script script script script script script script script script Description DTD Script to be run when an element loses focus STF Script to be run on a mouse click STF Script to be run on a mouse double-click STF Script to be run when an element gets focus STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF

1.3. Tag-ul input Cu ajutorul acestui tag se pot aduga diferite elemente vizuale precum: casete de text: o pentru text scurt (text input boxes); o pentru text lung (large text input); o pentru crearea de liste (list box); o pentru parole (password input boxes); casete de opiuni (check box); butoane tip radio (radio button); butoane pentru trimitere i de resetare a informaiilor (reset button).

Standard Attributes
Attribute accesskey class dir id lang style tabindex title xml:lang Value character classname rtl ltr id language_code style_definition number text language_code Description Specifies a keyboard shortcut to access an element Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies the tab order of an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents DTD STF STF STF STF STF STF STF STF STF

Optional Attributes
Attribute accept align Value MIME_type left right top middle bottom text checked Description DTD Specifies the types of files that can be submitted STF through a file upload (only for type="file") Deprecated. Use styles instead. TF Specifies the alignment of an image input (only for type="image")

alt checked

disabled

disabled

maxlength number name readonly name readonly

Specifies an alternate text for an image input (only for type="image") Specifies that an input element should be preselected when the page loads (for type="checkbox" or type="radio") Specifies that an input element should be disabled when the page loads Specifies the maximum length (in characters) of an input field (for type="text" or type="password") Specifies a name for an input element Specifies that an input field should be read-only (for type="text" or type="password")

STF STF

STF STF STF STF

size src type

number URL button checkbox file hidden image password radio reset submit text value

Specifies the width of an input field STF Specifies the URL to an image to display as a submit button (only for type="image") Specifies the type of an input element STF

value

Specifies the value of an input element

STF

Event Attributes
Attribute onblur onchange onclick ondblclick onfocus onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onselect Value script script script script script script script script script script script script script script Description DTD Script to be run when an element loses focus STF Script to be run when an element change STF Script to be run on a mouse click STF Script to be run on a mouse double-click STF Script to be run when an element gets focus STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF Script to be run when an element is selected STF

1.3.1. Casete de text (Text input boxes) Text Input Boxes reprezint casete destinate introducerii unui text. Cmpul pentru construcia unei casete de text trebuie s fie sub forma urmtoarei structuri: <input type="text" id="id_of_field" value="initial_value" size="size_of_field" maxlength="max_characters_allowed" /> n urmtorul exemplu schieaz o caset de text care accept maxim 40 de caractere, este lung ct 30 de caractere i are textul iniial Introducere text: <input type="text" id="username" value="Introducere text" size="30" maxlength="40" />

1.3.2. Casete de text tip parol (Password input boxes) Password Input Boxes este similar cu text input boxes, doar c n cadrul password input boxes textul va fi afiat sub forma unor asteriscuri. Acest tip de caset de text este utilizat, dup cum poate reiei din denumirea ei, pentru protejarea utilizatorilor mpotriva persoanelor care ar avea contact vizual i astfel ar putea reine anumite date, de obicei o parol. Cmpul pentru construcia unei casete de text tip parol este sub urmtoarea structur: <input type="password" id="id_of_field" value="initial_value" size="size_of_field" maxlength="max_characters_allowed" /> n urmtorul exemplu se schieaz o caset de text tip parol de lungimea a 20 de caractere i o dimensiune maxim a textului (parolei) de 30 de caractere, avnd parola introdus admin: <input type="password" id="password" value="admin" size="20" maxlength="30" />

1.3.3. Butoane tip radio (Radio buttons) Butoanele radio sunt butoane de opiune rotunde care permit utilizatorului s aleag o singur opiune din fiecare grup.

Cmpul pentru construcia unui buton radio trebuie s fie sub s fie sub forma urmtoarei structuri: <input type="radio" id="control_id" name="group_name" [checked="checked"] value="value_if_selected" /> n urmtorul exempu am construit dou butoane radio: <p> Sexul: <br /> <input type="radio" id="gender_male" name="gender" value="male" /> Masculin <input type="radio" id="gender_female" name="gender" value="female" /> Feminin </p>

1.3.4. Casete de opiuni (Check box) Check box-urile sunt casete de opiune ptrate care permit utilizatorului s aleag mai multe opiuni, spre deosebire de radio buttons, care permit utilizatorului s selecteze o singur opiune. Cmpul pentru construcia casete de opiuni trebuie s fie sub forma urmtoarei structuri: <input type="checkbox" id="id_of_field" [checked="checked"] value="value_if_selected" /> Exemplu: <p> <input type="checkbox" id="spam_me" checked="checked" value="spam" /> Add me to your email list </p>

1.3.5. Cmpuri ascunse (Hidden fields) Hidden fields este utilizat pentru a adauga informaii n form fr a fi vizibile utilizatorilor. Hidden field are urmtoarea structur: <input type="hidden" id="id_of_field" name="name_of_field" value="value_of_field" />

1.3.6. Butoane (Buttons) Pentru a face mai atractiva pagina web se pot introduce butoane in pagin. Structura acestora este urmtoarea: <input type="button" id="id_of_field" name="name_of_field" value="text_for_button" /> Exemplu: <input type="button" id="BuyNow" name="buy_button" value="Buy Now!" /> De menionat c n structura acestora se pot introduce i scripuri. Ex.: <input type="button" id="Google" name="Go to Google" value="Google" onClick="window.location.href('http://google.com')" />

1.3.7. Butoane de trimitere i resetare (Submit & Reset buttons) Butoanele submit i reset permit utilizatorului s trimit datele ctre un obiectiv specificat n cod, respectiv s reseteze form-ul la optiunile de baz. Codul se prezint astfel: a) submit button: <input type="submit" id="id_of_field" name="name_of_field" [value="text_for_button"] /> b) reset button <input type="reset" id="id_of_field" name="name_of_field" [value="text_for_button"] /> Atributul value este opional pentru ambele butoane. Dac acesta este omis, atunci textul afiat pe buton va fi cel de baz, de regul, submit, respectiv reset. Desigur, acest text este generat de browser.

1.3.8. Imagini (Images) Utiliznd image type din tag-ul input, se pot aduga imagini in form, imagini ce pot fi utilizate mpreun cu celelalte elemente din form. Structura se prezint astfel: <input type="image" id="id_of_field" name="name_of_field" src="url_to_image_file" /> Exemplu: <input type="image" id="manifest" name="manifest_romania" src="manifest.jpg" onclick="manifest()" />

1.3.9. Cmpuri de fiiere (File fields) File fields permite utilizatorilor s caute un fiier local i s-l trimit ataat. Structura codului se prezint astfel: <input type="file" id="id_of_field" name="name_of_field" size="display_size_of_field" /> De menionat c pentru a utiliza acest cmp n form trebuie: - s menionai form-ul ca fiind multipart, care permite fiierului s fie ataat restului fiierelor; - utilizai method post, iar NU get, ca metod de livrare. Asta nseamn c tag-ul form trebuie s arate astfel: <form action="formhandler.cgi" method="post" enctype="form/multipart"> 1.3.10. Ordinea filelor i scurtturile tastelor (Tab order & Keyboard shortcuts) Atributul tabindex desemneaz ordinea n care sunt selectate filele atunci cnd utilizatorul apas tasta Tab. Acest atribut ia n calcul numai valori numerice. Atributul accesskey definete tasta pe care o poate apsa utilizatorul pentru a fi redirecionat ctre o anumit fil. Acest atribut ia n calcul numai o singur liter, care devine o scurttur pentru a accesa fila respectiv. De obicei, tasta specificat ca fiind scurttur necesit o tasta suplimentar pentru a putea accesa scurttura, tast diferit n funcie de browser-ul utilizat.

De exemplu, pentru a fi direcionat ctre pagina acas (home), utiliznd browserul Opera 11.50, este necesar apsarea tastei suplimentare alt, pe lng tasta home. Pentru exemplificare vom prezenta urmtorul cod, care permite utilizatorului s acceseze caseta de text Nume prin simpla apsare a tastei suplimentare Alt, alturi de tasta precizat n cod: N: <p> <label for="Nume"> <strong> N</ strong>ume: </label> <input type="text" id="Nume" name="Nume" value="" tabindex="3" accesskey="N" size="30" maxlength="40" /> </p>

1.3.11. Protecia mpotriva schimbrilor (Readonly & Disabled) n cazul n care se dorete ca un cmp s nu poat fi editat se poate utiliza unul din urmtoarele dou atribute: readonly sau disabled. Atributul readonly (doar citire) servete la prevenirea schimbrilor aduse de utilizator n cadrul cmpului respectiv, iar atributul disabled (dezactivat) dezactiveaz efectiv respectivul cmp, marcndu-l n gri. Pentru exemplificare vom preciza urmtorul cod: <p> <label for="Nume"> Nume (readonly): </label> <input type="text" id="Nume" name="Nume" value=" readonly" tabindex="3" size="30" maxlength="40" readonly="readonly"/> </p> <p> <label for="Prenume"> Prenume (disabled): </label> <input type="text" id="Prenume" name="Prenume" value=" disabled" tabindex="3" size="30" maxlength="40" disabled="disabled"/> </p>

De remarcat faptul c utiliznd atributul redonly, utilizatorul va putea selecta textul din caseta de text (n acest caz), pe cnd la folosirea atributului disabled, utilizatorul nu va mai putea executa aceast operaiune deoarece controlul respectiv este dezactivat total. 1.4. Casete de text tip list (List box) List box-ul este o list asemntoare casetelor de text. List box-urile se introduc n pagin prin utilizarea tag-urilor <select> i <option>, optional se poate utiliza tag-ul <optgroup>. Pentru deschiderea listei se utilizeaz tag-ul <select>, care trebuie s conin cel puin urmtoarea structur: <select id="id_of_field" size="items_to_show" [multiple="multiple"] /> Tag-ul <option> are rolul de a prezenta fiecare element din list. Acesta trebuie deshis i nchis pentru fiecare element nou prezentat i poate avea urmtoarele atribute: - label: a shorter label for the item that the user agent can use; - selected: indicates that the item should be initially selected; - value: the value that should be sent to the handler if the item is selected; if this attribute is omitted, the text of the item is sent instead; - id: a unique identifier for the form object (replaces the name attribute); - name: the name of the form (deprecated, use the id attribute instead). Opional, se poate utiliza tag-ul <optgroup>, care are menirea de a grupa elementele aflate n interiorul acestui tag. Pentru exemplificare voi prezenta urmtorul exemplu care ncorporeaz toate cele trei tag-uri: <select id=week size=10> <optgroup label="Weekend"> <option>Sunday</option> <option>Saturday</option> </optgroup> <optgroup label="Weekday"> <option>Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>Thursday</option> <option>Friday</option> </optgroup> </select>

Standard Attributes
Attribute disabled multiple name size Value disabled multiple name number Description Specifies that a drop-down list should be disabled Specifies that multiple options can be selected Specifies the name of a drop-down list Specifies the number of visible options in a drop-down list DTD STF STF STF STF

Optional Attributes
Attribute class dir id lang style tabindex title xml:lang Value Classname rtl ltr id language_code style_definition number text language_code Description Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies the tab order of an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents DTD STF STF STF STF STF STF STF STF

Event Attributes
Attribute onblur onchange onclick ondblclick onfocus onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup Value script script script script script script script script script script script script script Description DTD Script to be run when an element loses focus STF Script to be run when an element change STF Script to be run on a mouse click STF Script to be run on a mouse double-click STF Script to be run when an element gets focus STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF

1.5. Casete de text mari (Large text input) Large Text Input este asemntor cu Text Input Boxes, n sensul c ambele coduri sunt destinate crerii unor spaii destinate redactrii de texte, cu meniunea c large text input creeaz un spaiu multi-linear. Cmpul pentru construcia unei casete de text trebuie s fie sub forma urmtoarei structuri: <textarea id="id_of_field" name="name_of_field" cols="number_of_columns" rows="number_of_rows"></textarea> Exemplu: <textarea cols="50" rows="6"> Popescu Ion Str. Vasile Alecsandri Bacu, Romnia </textarea>

Required Attributes
Attribute cols rows Value number number Description Specifies the visible width of a text-area Specifies the visible number of rows in a text-area DTD STF STF

Standard Attributes
Attribute accesskey class dir id lang style tabindex title xml:lang Value character classname rtl ltr id language_code style_definition number text language_code Description Specifies a keyboard shortcut to access an element Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies the tab order of an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents DTD STF STF STF STF STF STF STF STF STF

Optional Attributes
Attribute disabled name readonly Value disabled name_of_textarea readonly Description Specifies that a drop-down list should be disabled Specifies the name for a text-area Specifies that a text-area should be read-only DTD STF STF STF

Event Attributes
Attribute onblur onchange onclick ondblclick Value script script script script Description Script to be run when an element loses focus Script to be run when an element change Script to be run on a mouse click Script to be run on a mouse double-click DTD STF STF STF STF

onfocus onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onselect

script script script script script script script script script script

Script to be run when an element gets focus STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF Script to be run when an element is selected STF

1.6. Grupri i legende (Fieldsets & Legends) Controlul Fieldset este utilizat pentru a grupa anumite elemente dintr-un form ntr-un chenar. Pentru exemplificare vom reda urmtorul cod: <fieldset> <p> Sex: <br /> <input type="radio" id="sex" value="Barbat" /> Barbat <br> <input type="radio" id="sex" value="Femeie" /> Femeie </p> </fieldset>

Standard Attributes
Attribute class dir id lang style title xml:lang Value classname rtl ltr id language_code style_definition text language_code Description Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents DTD STF STF STF STF STF STF STF

Event Attributes
Attribute onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup Value script script script script script script script script script script Description DTD Script to be run on a mouse click STF Script to be run on a mouse double-click STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF

Tag-ul legend permite cmpului fieldset s fie legend. Exemplu: <fieldset> <legend> <p> Sex: </legend> <br /> <input type="radio" id="sex" value="Barbat" /> Barbat <br> <input type="radio" id="sex" value="Femeie" /> Femeie </p> </fieldset>

Standard Attributes
Attribute class dir id lang style title xml:lang Value classname rtl ltr id language_code style_definition text language_code Description Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents DTD STF STF STF STF STF STF STF

Optional Attributes
Attribute align Value left right top middle bottom Description DTD Deprecated. Use styles instead. TF Specifies the alignment of an image input (only for type="image")

Event Attributes
Attribute onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup Value script script script script script script script script script script Description DTD Script to be run on a mouse click STF Script to be run on a mouse double-click STF Script to be run when mouse button is pressed STF Script to be run when mouse pointer moves STF Script to be run when mouse pointer moves out of an STF element Script to be run when mouse pointer moves over an STF element Script to be run when mouse button is released STF Script to be run when a key is pressed STF Script to be run when a key is pressed and released STF Script to be run when a key is released STF

II. Culorile i imaginile (Colors & Images) La momentul actual exist o diversitate de tipuri de culori, dar urmtoarele trei sunt suportate de majoritatea agenilor: - GIF; - JPEG; - PNG. Toate aceste trei tipuri de culori utilizeaz o form de compresie specific fiecruia. Aceasta se datoreaz faptului c o imagine necompilat ar ocupa mult prea mult spaiu pe disc. Mai precis, o imagine de 3x3 inch, cu 16,7 milioane de culori ar ocupa 139 kb. n urmtorul tabel sunt cteva exemple:

Dimensiunea imaginilor necompilate

Dimensiune (inch) 1x1 1x1 1x1 2x2 2x2 2x2 3x3 3x3 3x3 Culori 2 256 16,7 milioane 2 256 16,7 milioane 2 256 16,7 milioane Spaiul ocupat pe disc 9 kb 9 kb 18 kb 16 kb 24 kb 63 kb 16 kb 49 kb 139 kb