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>