Crearea controalelor de baza ale unui formular (INPUT, BUTTON, TEXTAREA)

Crearea controalelor de baza ale unui formular (INPUT, BUTTON, TEXTAREA)

Elementul INPUT este cel mai frecvent īntīlnit deoarece creaza mai multe tipuri de controale care permit utilizatorului sa aleaga. Controalele includ trei tipuri de butoane care pot fi apasate, doua tipuri de butoane pe care utilizatorul le poate seta īnchis/deschis, un element de selectie fisiere si cīmpuri īn care poate fi tastat text. Tag-ul INPUT este nevid.

Controalele de baza pe care le poate utiliza un autor īn cadrul formularelor interactive sīnt create cu elementul INPUT, individualizarea lor facīndu-se prin intermediul atributului sau TYPE. Pe acestea (ca de fapt pe toate controalele unui formular) utilizatorul le expediaza prin intermediul unui buton creat cu INPUT de tipul SEND sau le reintroduce dupa actionarea unui buton de tipul RESET. Nu exista o limita asupra numarului de elemente continute īntr-un formular.

Valorile atributului TYPE care creaza diversele tipuri de controale (pentru elementul INPUT) sīnt:

text

Creaza un control de introducere a unui text pe o singura linie: text input control.

password

La fel ca si "text", dar textul introdus este afisat astfel ca sa nu fie descifrabil / sa fie "ascuns" (de exemplu cīte un asterix pentru fiecare caracter introdus), de aceea se si numeste parola. Valoarea curenta a acestui control este textul introdus de utilizator, nu cel afisat de formular! De remarcat ca protectia oferita īn acest fel este minima, textul transmitīndu-se, daca nu se folosesc tehnici adecvate, īn clar!

checkbox

Creaza o casut 424g65e 9; de marcare: checkbox.

radio

Creaza un buton radio: radio button.

file

Creaza un control utilizat la selectia fisierelor: file select control. Se foloseste valoarea atributului VALUE ca nume initial de fisier.

button

Creaza un buton care poate fi apasat. Este utilizat prin intermediul valorii atributului VALUE care de fapt si este textul ce apare pe acesta.

submit

Creaza un buton care trimite datele din formular: submit button.

reset

Creaza un buton care reinitializeaza datele din formular: reset button.

image

Creaza un buton de submit dar care are o īnfatisare grafica. Valoare atributului SRC specifica adresa URI a imaginii care e folosita la "decorarea" butonului. Se recomanda folosirea si a unui text alternativ (cu atributul ALT) pentru cazul cīnd imaginea nu e vizibila.

Cīnd imaginea este apasata (cu mouse-ul, de exemplu) formularul este transmis serverului īmpreuna cu coordonatele punctului apasat exprimate īn pixeli fata de coltul stīnga-sus. Datele transmise includ name.x=x-value si name.y=y-value, unde "name" este valoarea atributului NAME, iar x-value si y-value sīnt valorile coordonatelor.

Daca serverul are implementate diferite actiuni īn functie de punctul apasat, utilizatorii cu browsere non-grafice vor fi dezavantajati si de aceea se pot lua īn considerare urmatoarele alternative:

Utilizarea butoanelor SUBMIT multiple (fiecare cu imaginea lui). Pozitia acestora poate fi controlata cu style-sheet-uri.

Utilizarea unei harti senzitive de tip client-side image map, care ruleaza pe client, īmpreuna cu un script.

hidden

Creaza un control ascuns: hidden control.

Exemplu:

Acest exemplu defineste un formular simplu care permite utilizatorului introducerea numelui, prenumelui, adresei de email si sexului. Cīnd se activeaza (apasa) butonul de trimitere (submit) formularul va fi trimis programului specificat de atributul ACTION (aici adduser):

<FORM action="https://somesite.com/prog/adduser" method="post">

First name: <INPUT type="text" name="firstname"><BR>

Last name: <INPUT type="text" name="lastname"><BR>

email: <INPUT type="text" name="email"><BR>

<INPUT type="radio" name="sex" value="Male"> Male<BR>

<INPUT type="radio" name="sex" value="Female"> Female<BR>

<INPUT type="submit" value="Send">

<INPUT type="reset">

</FORM>

Astfel, acest formular poate aparea astfel:

Exemplu:

Acest exemplu foloseste o functie (verify) scrisa īn JavaScript care este activata cīnd apare evenimentul "onclick" pentru butonul care are pe el textul "Click Me":

<HEAD>

<META http-equiv="Content-Script-Type" content="text/javascript">

</HEAD>

<BODY>

<FORM action="..." method="post">

<INPUT type="button" value="Click Me" onclick="verify()">

</FORM>

</BODY>

Exemplu:

Acest exemplu sugereaza cum poate fi transmis continutul unui fisier indicat de utilizator prin intermediul unui formular. Utilizatorul este īntrebat de numele sau si de lista fisierelor al caror continut se doreste a fi transmis. Prin specificarea valorii atributului ENCTYPE ca "multipart/form-data", fiecare continut va fi "īmpachetat" pentru a fi transmis īntr-o sectiune separata a unui document de tip "multipart".

<FORM action="https://server.dom/cgi/handle"

enctype="multipart/form-data" method="post">

What is your name? <INPUT type="text" name="name_of_sender">

What files are you sending? <INPUT type="file" name="name_of_files">

</FORM>

Elementul INPUT

Sintaxa:

<INPUT>

Atribute posibile:

TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ]

NAME=CDATA (numele care se va asocia elementului)

VALUE=CDATA (valoarea introdusa)

CHECKED (buton radio sau checkbox setat/apasat)

SIZE=CDATA (numar sugerat de caractere pentru introducerea unui text)

MAXLENGTH=Number (numar maxim de caractere pentru introducerea unui text)

SRC=URI (sursa imaginii)

ALT=CDATA (text alternativ pentru o imagine)

USEMAP=URI (harta senzitiva de tip client-side image map)

ALIGN=[ top | middle | bottom | left | right ] (alinierea imaginii)

DISABLED (element inactiv/dezactivat)

READONLY (previne modificari asupra elementului)

ACCEPT=ContentTypes (tipul de media folosit la transmiterea fisierelor)

ACCESSKEY=Character (shortcut key)

TABINDEX=Number (pozitia īn ordinea de parcurgere cu TAB)

ONFOCUS=Script (elementul a primit focusul)

ONBLUR=Script (elementul a pierdut focusul)

ONSELECT=Script (elementul de tip text a fost selectat)

ONCHANGE=Script (valoarea elementului a fost modificata)

atribute comune

Contine:

Nimic

Continut īn:

block-level elements, inline elements, cu exceptia lui BUTTON

Descriere:

Acest element defineste un control al unui formular (form control) pentru a permite unui utilizator sa introduca date. El este utilizat de obicei īn cadrul lui FORM, dar HTML 4.0 permite si folosirea lui īn orice element block-level sau inline (cu exceptia lui BUTTON). De remarcat, totusi ca Netscape Navigator NU va afisa nici un element INPUT īn afara unui FORM.

Cīnd formularul este transmis valoarea curenta a fiecarui element INPUT din FORM este trimisa sub forma unei perechi name/value. Atributul NAME ofera numele ce va fi folosit pentru identificarea controlului respectiv. Tipul valorii depinde de tipul elementului INPUT.

Un formular care include un element INPUT trebuie sa specifice īn tagul elementului FORM METHOD=post si ENCTYPE="multipart/form-data". Nu toate browserele permit trimiterea, odata cu formularul si a continutului unui fisier. Īn acest caz trebuie utilizate alte metode:

Exemplu

Īn exemplul urmator se trimite un document HTML pemtru a fi validat. Numele lui se cere de la utilizator prin intermediul unui formular:

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">

<P>

Selectati un document HTML pentru a fi trimis spre validare. Daca browser-ul Dvs. nu suporta aceasta metoda folositi <A HREF="methods.html">metodele alternative de validare</A>.</P>

<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>

<P><INPUT TYPE=submit VALUE="Validate it!"></P>

</FORM>

Elementul INPUT poate avea mai multi parametri, cel mai important fiind TYPE, fiecare element TYPE avīnd proprii lui parametri pentru definirea īn continuare a elementului. Parametrul TYPE specifica ce fel de INPUT se asteapta de la utilizator si poate primi urmatoarele valori:

Exemplu

<INPUT TYPE="CHECKBOX" NAME="TEST">

Daca nu este specificat TYPE īn elementul INPUT, valoarea implicita atribuita este TYPE=TEXT.

Atributul NAME este un parametru cerut de toate elementele INPUT, cu exceptia elementelor SUBMIT si RESET. Parametrul NAME creaza un nume generic care va fi asociat cu raspunsul utilizatorului si permite serverului sa interpreteze formularul pentru a determina corelatia dintre fiecare raspuns al utilizatorului si elementele formularului. NAME poate avea orice valoare.

Exemplu

NAME="cīini" - īntr-o selectie de rase de cīini

NAME="profesii" - īntr-o selectie de profesii

NAME="adresa" - pentru un cīmp text

Elementul tip text (TYPE=TEXT)

Sintaxa:

<INPUT TYPE="text" NAME="nume" VALUE="valoare" SIZE=xx MAXLENGTH=yy>

Cīmpul text este utilizat frecvent ca forma de intrare a datelor pentru culegerea unor informatii cum ar fi nume, adrese e-mail, numere de telefon, comentarii scurte sau orice altceva care poate fi tastat pe un rīnd. Ca majoritatea elementelor INPUT, un rīnd text trebuie sa aiba un nume (NAME). La trimiterea datelor din formular la server, numelui īi va fi asociata valoarea tastata. De pilda, pentru culegerea unor adrese email, daca am ales ca nume al rīndului NAME=adresa, la server va fi trimisa secventa adresa=ce s-a tastat.

Parametrul VALUE este egal cu textul implicit pe care īl dorim introdus īn rīndul text. Daca VALUE lipseste, rīndul va fi initial blanc.

Parametrul SIZE (dimensiune) permite setarea lungimii rīndului īn numar de caractere. Daca numarul de caractere este mai mare (pīna la valoarea maxima admisa prin MAXLENGTH), rīndul se va derula (scroll orizontal). Numarul maxim specificat de MAXLENGTH nu reprezinta o cale sigura de a limita numarul de caractere introduse de utilizator care, de exemplu, poate edita pagina ce contine formularul si trimite un numar oricīt de mare de caractere pentru text. Aceasta limitare trebuie luata īn considerare si de programul care primeste formularul. Daca parametrul SIZE lipseste, se considera ca are valoarea implicita de 20 de caractere.

Majoritatea navigatoarelor suporta cīmpuri text formate din mai multe rīnduri, definite prin SIZE=X,Y unde X=numar de caractere pe rīnd si Y=numar de rīnduri. Deoarece HTML suporta si comanda TEXTAREA (zona text), elementul tip text se foloseste aproape exclusiv la definirea unui singur rīnd.

Atributul READONLY, nou īn HTML 4.0, este destul de putin suportat de browsere. El previne editarea continutului unui control de tip text sau parola, dar totuti sīnt trimise cu formularul.

Exemplu

<FORM>

Tastati numele Dvs.:

<INPUT TYPE="text" NAME="nume" SIZE=40 MAXLENGTH=60></input>

Si adresa e-mail:

<INPUT TYPE="text" NAME="adresa" SIZE=30 MAXLENGTH=40></input>

</FORM>

Tot un control utilizat la introducerea textelor pe o linie se poate crea si cu elementul ISINDEX. Cu ajutorul lui se poate introduce un text avīnd oricīte caractere. Acesta este īnsa un element depasit, chiar si pentru crearea unui prompter simplu.

Exemplu

Se poate īnlocui declaratia lui ISINDEX:

<ISINDEX prompt="Enter your search phrase: ">

cu:

<FORM action="..." method="post">

<P>Enter your search phrase: <INPUT type="text"></P>

</FORM>

Elementul parola (TYPE=PASSWORD)

Sintaxa:

<INPUT TYPE="password" NAME="nume" VALUE="Valoare" SIZE=xx MAXLENGTH=yy></input>

Acest tip de intrari este folosit daca se accepta date de la utilizator dar nu se doreste ca informatiile tastate sa apara pe ecran (de pilda īn cazul furnizarii unor informatii confidentiale; dar atentie, aceasta modalitate nu realizeaza o criptare a datelor). Parametrii NAME, VALUE si MAXLENGTH actioneaza exact ca si īn cazul elementului TEXT.

Exemplu

Se utilizeaza elemente tip text si parola care au si etichete atasate cu LABEL:

<LABEL ACCESSKEY=U>

User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8>

</LABEL>
<LABEL ACCESSKEY=P>

Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12>

</LABEL>

Casute de selectie (TYPE=CHECKBOX)

Sintaxa:

<INPUT TYPE="CHECKBOX" NAME="nume" VALUE="valoare" CHECKED>

Tipul CHECKBOX (casute de selectie) permite crearea unui buton pe care utilizatorul īl poate seta activ/inactiv (īnchis/deschis). Functia īndeplinita de CHECKBOX permite culegerea de raspunsuri la īntrebari simple, pentru care nu exista decīt doua raspunsuri posibile. Īntr-un formular se pot include oricīte casute de selectie. Fiecare va fi independenta de celelalte. La trimiterea formularului, vor fi remise serverului doar casutele selectate. Casuta selectata implicit are parametrul CHECKED (selectat) īn elementul formularului.

Elementele CHECKBOX pot contine de asemenea un parametru VALUE care permite setarea sirului de caractere care va fi trimis serverului la selectarea casutei. Daca VALUE nu apare, valoare implicita asignata este ON.

Utilizatorul poate selecta nici una, una sau mai multe casute. Pentru fiecare casut 424g65e 9; selectata va fi trimis serverului un sir nume=valoare.

Exemplu

<FORM>

<INPUT TYPE="CHECKBOX" NAME="cīini" VALUE="Cocker"> Cocker <P>

<INPUT TYPE="CHECKBOX" NAME="cīini" VALUE="Setter"> Setter <P>

<INPUT TYPE="CHECKBOX" NAME="cīini" VALUE="Mioritic"> Mioritic <P>

</FORM>

Butoane Radio (TYPE=RADIO)

Sintaxa:

<INPUT TYPE="radio" NAME="nume" VALUE="valoare" CHECKED>

Elementele tip butoane radio functioneaza asemanator cu casutele de selectie, adica pot fi īn pozitiile selectat/deselectat. Diferenta consta ca īntr-un grup de butoane, numai unul poate fi selectat la un moment dat. Selectarea altuia conduce automat la deselectarea celui selectat anterior. Elementul este util pentru a forta selectia unui singur element dintr-o lista multipla. Ca si casutele de selectie, butoanele radio pot avea nume generice, acelasi pentru toate butoanele unui anumit grup. Īntr-un grup poate fi activat un singur buton.

Butonul selectat implicit (care este necesar pentru unele browsere) este marcat cu CHECKED.

Exemplu

<FORM>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="3_luni"> 3_luni <P>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="6_luni"> 6_luni <P>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="12:luni"> 12 luni <P>

</FORM>

Exemplu

Īn exemplul urmator se selecteaza o metoda de plata prin intermediul butoanelor radio. De remarcat ca toate butoanele au acelasi nume, atributul NAME), deci fac parte din acelasi grup. Se mai foloseste si o casut 424g65e 9; (un buton) de marcare.

<P>Please indicate your method of payment:</P>
<P>

<LABEL ACCESSKEY=C>

<INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card

</LABEL><BR>

<LABEL ACCESSKEY=D>

<INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card

</LABEL><BR>

<LABEL ACCESSKEY=M>

<INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL>

</P><P>

<LABEL ACCESSKEY=S>

<INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail

</LABEL></P>

Elemente tip push-buton (TYPE=BUTTON)

Sintaxa:

<INPUT TYPE="button" NAME="nume" VALUE="valoare">

Elementele tip buton specifica un buton care se poate apasa si care se foloseste cu scripturi (client-side). Valoarea atributului VALUE da textul ce apare pe buton. Atributul ONCLICK este folosit īn mod tipic pentru a defini o actiune ce se declanseaza cīnd butonul este apasat, ca īn exemplul urmator:

<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

Īn acest caz, īn momentul īn care butonul este apasat (click) se executa functia toggle(), definita anterior cu un element SCRIPT.

Īntrucīt astfel de butoane sīnt utile doar cīnd posibilitatea de executie a scripturilor pe partea de client (client-side scripting) este activa (permisa), se recomanda evitarea unor butoane care nu fac nimic prin inserarea tagului <INPUT TYPE=button> folosind scripturi, ca īn exemplul urmator:

<SCRIPT TYPE="text/javascript">

<!--

document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\""

+ "ID=toggler ONCLICK=\"toggle()\">");

// -->

</script>

Un set mai complet de optiuni este oferit de elementul BUTTON, dar suportul scazut acordat de browsere acestuia fac utilizarea lui INPUT īnca extrem de utila.

Butonul RESET (TYPE=RESET)

Sintaxa:

<INPUT TYPE="reset" VALUE="Reseteaza">

Īn HTML se poate defini un singur buton pentru resetarea tuturor cīmpurilor din interiorul unui formular. Resetarea aduce toti parametrii la valorile lor implicite. Butonul de resetare nu are nume deoarece starea lui nu este niciodata transmisa serverului, apasarea lui afectīnd doar navigatorul utilizatorului. Singurul parametru pentru RESET este VALUE, a carui valoare va fi īnscrisa pe buton.

Butonul SUBMIT (TYPE=SUBMIT)

Sintaxa:

<INPUT TYPE="submit" NAME="nume" VALUE="Trimite">

Elementul INPUT TYPE="submit" (trimite) este utilizat pentru crearea butonului care trimite formularul serverului. La apasarea butonului, formularul si continutul lui curent sīnt trimise serverului specificat de atributul ACTION al elementului FORM, utilizīnd procedeul specificat cu METHOD. Cīmpurile necompletate si butoanele neselectate nu vor fi transmise.

Parametru VALUE da o valoare care va fi īnscrisa pe buton. Daca apare si atributul NAME, browserul va trimite o pereche name/value si pentru butonul SUBMIT, aceasta permitīnd existenta mai multor butoane SUBMIT īntr-un formular, fiecare cu propria actiune.

Butonul grafic SUBMIT (TYPE=IMAGE)

Sintaxa:

<INPUT TYPE="image" NAME="nume" VALUE="Trimite"

SRC="URL" ALT="text" USEMAP="URL">

Elementul INPUT TYPE="image" este utilizat pentru crearea unui buton submit grafic. Atributul SRC trebuie inclus pentru a specifica adresa imaginii folosite, atributul ALT oferind o alternativa (un text) pentru browser-ele care nu afiseaza imagini. Numai HTML 4.0 defineste acest atribut, browser-ele bazīndu-se pe valorile atributelor NAME sau VALUE, astfel ca recomandarea este ca toate sa aiba acelasi text asociat.

Atributul ALIGN, depasit acum, specifica modul de aliniere al acestui tip de buton. Valorile top, middle si bottom specifica pozitia butonului īn raport de continutul adiacent īn dreapta si stīnga, iar valorile left si right transforma butonul īntr-un element flotant, plasīnd imaginea la marginea din stīnga, respectiv dreapta, restul continutului curgīnd pe līnga el. Pentru a trimite restul continutului sub buton se foloseste <BR CLEAR=left|right|all>. Īn locul acestui atribut se recomanda folosirea proprietatilor CSS vertical-align si float.

Un astfel de buton trimite īn plus si coordonatele punctului īn care s-a apasat sub forma perechilor: name.x=x-value si name.y=y-value. Daca se combina atributul USEMAP cu TYPE=image, se defineste o harta senzitiva prelucrata de client (client-side image map) dar metoda este foarte putin suportata.

Selectia unui fisier (TYPE=FILE)

Sintaxa:

<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">

Elementele tip selectie de fisier creaza un cīmp prin intermediul caruia utilizatorii pot trimite fisiere de pe computerul local īn retea. Valoarea atributului VALUE specifica numele fisierului initial, dar este ignorata (īn mod normal) de toate browser-ele din motive de securitate. Atributul ACCEPT ofera o lista cu tipurile de media (fisiere) suportate, permitīnd browser-elor un filtru asupra acestora, dar īn general este ignorat.

Elemente ascunse (TYPE=HIDDEN)

Sintaxa:

<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">

Elementele tip ascuns permit inserarea īn formulare a unor elemente care nu sīnt vizibile (de fapt nu sīnt afisate de browser dar ele pot fi vazute īn sursa documentului fara nici o problema). Ele sīnt extrem de utile cīnd aplicatiile utilizeaza mai multe documente HTML: ceea ce introduce utilizatorul poate fi "transportat" de la un formular la altul fara ca acesta sa vada acest lucru. De asemenea, astfel de elemente sīnt utile si pentru anumite scripturi CGI generale, cīnd sīnt folosite pentru a defini variabile pentru acesta, ca īn exemplul urmator (unde se defineste un subiect si o adresa de email pentru un raspuns trimis prin email):

<INPUT TYPE=hidden NAME=recipient VALUE="lp@csd.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your course">

Atribute comune tuturor tipurilor de INPUT

Atributul DISABLED, putin suportat, dezactiveaza un control. Astfel, un control devine read-only, nu poate primi focusul, este sarit cīnd se navigheaza cu tasta TAB si, īn plus, valoare sa nu este trimisa serverului.

Atributele ACCESSKEY si TABINDEX se aplica tuturor, exceptie facīnd hidden. ACCESSKEY specifica un singur caracter Unicode (inclusiv entitatile) ca shortcut pentru a da focusul unui control. Acelasi rezultat se obtine si daca se seteaza la elementul LABEL Atributul TABINDEX specifica un numar īntre 0 si 32767 pentru a indica ordinea elementului īn lista de parcurgere (cu TAB). Un element cu TABINDEX=0 sau fara TABINDEX va fi vizitat dupa toate elementele cu o valoare pozitiva. Īntre elementele cu valoare pozitiva a lui TABINDEX, primele se viziteaza cele cu valori mai mici. Īn caz de egalitate, primele aparute īn document sīnt primele vizitate.

Toate variatiile lui INPUT pot specifica si atribute utilizate de scripturi pe diverse evenimente. Pe līnga evenimentele de tip core ce apar pentru majoritatea elementelor, INPUT mai accepta si urmatoarele:

ONFOCUS, cīnd elementul primeste focusul;

ONBLUR, cīnd elementul pierde focusul;

ONSELECT, cīnd textul dintr-un control de tip text sau password este selectat;

ONCHANGE, cīnd elementul pierde focusul si valoarea lui a fost schimbata fata de momentul īn care l-a primit

Elementul BUTTON

Sintaxa:

<BUTTON> ... </BUTTON>

Atribute posibile:

NAME=CDATA (numele care se va asocia elementului)

VALUE=CDATA (valoarea introdusa)

TYPE=[ submit | reset | button ] (tipul butonului)

DISABLED (element inactiv/dezactivat)

ACCESSKEY=Character (shortcut key)

TABINDEX=Number (pozitia īn ordinea de parcurgere cu TAB)

ONFOCUS=Script (elementul a primit focusul)

ONBLUR=Script (elementul a pierdut focusul)

atribute comune

Contine:

Elemente inline exceptīnd A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, IFRAME

Elemente block-level exceptīnd FORM, ISINDEX, FIELDSET

Continut īn:

Elemente block-level, elemente inline, cu exceptia lui BUTTON

Descriere:

Acest element creaza butoane īntr-un mod similar cu INPUT, dar ofera mai multe posibilitati de afisare (mai multe etichete, asocierea cu imagini, continut). Mai mult, toate browser-ele sugereaza pentru aceste butoane apasarea, spre deosebire de cele definite cu INPUT care pot fi "plate". Totusi elementul este nou īn HTML 4.0 si exista browsere care īnca nu-l suporta!

Butoanele care pot fi definite cu acest element sīnt submit button (implicit), reset button si push button si sīnt stabilite de valoarea lui TYPE. Atributele NAME si VALUE determina perechea name/value trimisa la server, oferind posibilitatea de avea mai multe butoane submit īntr-un formular.

Exemple de tipuri de butoane:

<BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Modificare </BUTTON>
<BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Continuare </BUTTON>

<BUTTON ACCESSKEY=S>Submit <IMG SRC="checkmark.gif" ALT="&#10004;"></BUTTON>
<BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON>

<BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide </BUTTON>

Atributul DISABLE face butonul inaccesibil: nu se mai poate apasa, nu mai primeste focusul si este sarit cīnd se navigheaza cu TAB.

Atributele ACCESSKEY, TABINDEX si cele care specifica actiuni de scriptare (ONFOCUS si ONBLUR) se folosesc la fel ca si la INPUT.

Exemplu:

Acest exemplu īl extinde pe cel de la INPUT, dar creaza butoanele Submit si Reset cu BUTON īn locul lui INPUT. Butoanele pot contine imagini (inserate cu elementul IMG) si se recomanda folosirea atributului ALT al acestora pentru cazul īn care nu sīnt afisate.

<FORM action="https://somesite.com/prog/adduser" method="post">

<P>

First name: <INPUT type="text" name="firstname"><BR>

Last name: <INPUT type="text" name="lastname"><BR>

email: <INPUT type="text" name="email"><BR>

<INPUT type="radio" name="sex" value="Male"> Male<BR>

<INPUT type="radio" name="sex" value="Female"> Female<BR>

<BUTTON name="submit" value="submit" type="submit">

Send<IMG src="/icons/wow.gif" alt="wow">

</BUTTON>

<BUTTON name="reset" type="reset">

Reset<IMG src="/icons/oops.gif" alt="oops">

</BUTTON>

</P>

</FORM>

Exemplu ilegal:

De remarcat ca este ilegal sa se asocieze o harta senzitiva cu un IMG care apare ca si continut al unui element BUTTON. De aceea exemplul urmator este ILEGAL!

<BUTTON>

<IMG src="foo.gif" usemap="...">

</BUTTON>

Elementul TEXTAREA

Sintaxa:

<TEXTAREA> ... </TEXTAREA>

Atribute posibile:

NAME=CDATA (numele care se va asocia elementului)

ROWS=Number (numar de rīnduri)

COLS=Number (numar de coloane)

DISABLED (element inactiv/dezactivat)

READONLY (previne modificari asupra elementului)

ACCESSKEY=Character (shortcut key)

TABINDEX=Number (pozitia īn ordinea de parcurgere cu TAB)

ONFOCUS=Script (elementul a primit focusul)

ONBLUR=Script (elementul a pierdut focusul)

ONSELECT=Script (elementul de tip text a fost selectat)

ONCHANGE=Script (valoarea elementului a fost modificata)

atribute comune

Contine:

Text (incluzīnd entitati)

Continut īn:

Elemente block-level, elemente inline, cu exceptia lui BUTTON

Descriere:

TEXTAREA creaza un control pentru introducerea unui text multi-linie, valoarea initiala fiind afisata de browser la īnceput īn interiorul controlului (nu trebuie sa contina taguri HTML). El este utilizat de obicei īn cadrul lui FORM, dar HTML 4.0 permite si folosirea lui īn orice element block-level sau inline (cu exceptia lui BUTTON). De remarcat, totusi ca Netscape Navigator NU va afisa nici un element TEXTAREA īn afara unui formular definit cu FORM.

Acest element ofera posibilitatea de a accepta de la utilizator un bloc de text, astfel ca acesta īsi poate "lipi" un document īntreg īntr-o pagina HTML. Elementul TEXTAREA nu este o comanda de tip INPUT ci una de cu totul alt tip. Ca si elementele INPUT, regiunile text au un nume care permite identificarea acestui cīmp de catre server, care va primi informatia de forma nume=continut.

Elementul TEXTAREA are parametrii (obligatorii) ROWS si COLS care specifica dimensiunile ferestrei afisate utilizatorului, exprimate īn numar de caractere pe orizontala, respectiv verticala. Aceasta nu īnseamna o limitare a utilizatorului īn privinta volumului de informatie care poate fi tastat deoarece umplerea ferestrei determina aparitia unor bare de derulare. Se limiteaza totusi cantitatea totala de text ce se poate introduce (īn practica) la 32 ... 64 KB. Limitarea finala este facuta de scriptul CGI sau de servletul Java care primeste formularul.

Elementul TEXTAREA nu este vid, ceea ce īnseamna ca trebuie un terminator </TEXTAREA>. Ceea ce se afla īntre cele doua etichete va apare ca text implicit īn cīmpul definit.

Atributul READONLY, nou īn HTML 4.0 si destul de putin suportat, determina afisarea unui text nemodificabil. Diferenta fata de textul simplu este ca acesta este trimis serverului odata cu formularul.

Atributul DISABLED se comporta ca si la INPUT, transformīnd textul īn read-only.

Atributele ACCESSKEY, TABINDEX si cele care specifica actiuni de scriptare (ONFOCUS, ONBLUR, ONSELECT si ONCHANGE) se folosesc la fel ca si la INPUT.

Exemplu:

Acest exemplu creaza un control TEXTAREA de 20 de rīnduri si 80 de coloane, avīnd initial 2 linii de text. Acest control este urmat de doua butoane: Submit si Reset.

<FORM action="https://somesite.com/prog/text-read" method="post">

<P>

<TEXTAREA name="thetext" rows="20" cols="80">

Prima linie a textului initial.

A doua linie a textului initial.

</TEXTAREA>

<INPUT type="submit" value="Send">

<INPUT type="reset">

</P>

</FORM>