Valori de la și către în formă html. Formulare HTML

De multe ori am văzut pagini Web în care ni s-a cerut să introducem câteva date în câmpurile de introducere. HTML are un mecanism pentru obținerea datelor de la utilizator. Desigur, aceste date mai trebuie prelucrate, dar acest lucru se face prin programe specializate. Să ne uităm la modul în care acestea interacționează cu paginile Web.

Deci, utilizatorul a încărcat o pagină Web pentru el însuși, care conține controalele pentru introducerea informațiilor. Toate sunt combinate într-un set comun numit formă. Fiecare formular are un buton, prin click pe care datele introduse de utilizator sunt transferate in programul de procesare. Acest program este găzduit pe un server Web care deservește această pagină. Astfel de programe pot fi create folosind o mare varietate de tehnologii de programare. Singurul lucru care îi unește este o singură ordine de obținere a datelor dintr-o pagină Web. Datele sunt transferate folosind Common Gateway Interface (CGI). Prin urmare, programele de procesare sunt adesea denumite aplicații CGI sau scripturi CGI.

Deci, aplicația primește date și le prelucrează. Apoi poate fie să trimită un e-mail, fie să efectueze o operațiune în baza de date, fie să trimită utilizatorului o nouă pagină Web, posibilele acțiuni sunt limitate doar de proprietățile tehnologiei și de imaginația programatorului. Cu ajutorul unor astfel de programe funcționează tot felul de sisteme de înregistrare, sisteme de feedback, cărți de oaspeți, forumuri, chat-uri. Cu ajutorul lor se creează sisteme mai ramificate și complexe, de exemplu magazine online.

Pentru a crea astfel de aplicații, mai trebuie să fiți capabil să programați și să cunoașteți regulile adecvate pentru crearea aplicațiilor CGI. Atâta timp cât nu știm cum să facem acest lucru, mai trebuie să folosim scripturi CGI disponibile public. Dar dacă obținem aceste aplicații, atunci formularul de introducere a utilizatorului trebuie să se facă în continuare independent. În această secțiune, vom învăța cum să facem acest lucru.

Formular delimitat de etichete

și

... Între aceste etichete se află etichete care creează controale de intrare și etichete pentru crearea conținutului normal al paginii Web, adică controalele de intrare în sine pot fi amplasate într-un tabel, care la rândul său este complet plasat în formular. Etichetă

nu creează nicio structură afișabilă. Mai degrabă, este destinat grupării interne a obiectelor.

Etichetă , desigur, are o serie de parametri care stabilesc proprietățile formularului creat. Să luăm în considerare acești parametri.

• Parametru acțiune este necesară. Valoarea sa este o adresă URL care indică locația aplicației CGI care va procesa datele introduse de utilizator folosind controlul acestui formular.
• Parametru metodă are scopul de a indica modul în care datele vor fi transferate către aplicația de prelucrare. Unul dintre cele două cuvinte cheie predefinite este folosit ca valoare a parametrului: obține sau post... Acum nu trebuie să aflăm ce mecanisme sunt implementate folosind aceasta sau acea metodă. Cu toate acestea, documentația însoțitoare pentru aplicația CGI specifică metoda de transfer de date care trebuie utilizată. Pictograma implicită este obține.
• Parametru enctype folosit pentru a specifica tipul de date care vor fi transmise din formular. De obicei, nu este nevoie să-l utilizați, deoarece valoarea cerere / x-www-form-urlencoded Valoarea implicită este ideală pentru marea majoritate a aplicațiilor CGI.
• Parametru accept-charset este utilizat în cazurile în care utilizatorul transferă din formular în aplicație nu numai informații, ci și fișiere. În acest caz, putem specifica în mod explicit codificarea fișierelor transferate. Ca valoare a acestui parametru, se folosește un șir de text, în care sunt scrise unul sau mai multe nume de codificare. În cazul în care sunt folosite mai multe codificări, numele acestora sunt separate prin spații sau virgule. Valoarea implicită este necunoscut, care îi spune serverului că ar trebui să-și dea seama de codările folosite de el însuși
• Parametru Accept specifică tipurile de fișiere care trebuie transferate. De obicei, nu este utilizat, deoarece serverul este destul de capabil să recunoască tipul fișierului primit în sine.
• Parametru Nume vă permite să specificați un nume unic pentru formular. Desigur, o pagină Web poate conține mai multe forme. În acest caz, valorile parametrilor numelui nu ar trebui să fie aceleași.

Etichetă cu geamul ei de acoperire , de fapt, creați un container pentru plasarea organelor de introducere a informațiilor. Majoritatea acestor intrări sunt implementate folosind eticheta ... Să demonstrăm acest lucru cu un mic exemplu (Fig. 1.32).

Lista 1.33

„http://www.w3.org/TR/html4/strict.dtd”>

<р>Câmp pentru introducerea unui rând de text< input type="text">

Orez. 1.32. Fereastra browserului care arată rezultatul afișării fișierului afișat în Lista 1.33

Așadar, în ilustrație se poate observa că am putut crea un câmp de introducere a textului și un buton, la clic pe care informațiile introduse de utilizator vor fi trimise către aplicația CGI pentru procesare. Și dacă ne uităm la codul de listare, vom vedea că atât butonul cât și câmpul de introducere au fost create folosind aceeași etichetă ... Ajustarea proprietăților acestei etichete se face folosind numeroșii săi parametri, pe care îi vom lua acum în considerare.

• Parametru tip este probabil parametrul cheie. Folosind valoarea sa, putem seta tipul controlului creat. Unul dintre următoarele cuvinte cheie este folosit ca valoare: text, parolă, casetă de selectare, radio, trimitere, resetare, fișier, ascuns, imagine, buton. Valoarea implicită este text. Ne vom uita la aceste tipuri mai detaliat puțin mai târziu.
• Parametru Nume conceput pentru a seta nume unice pentru fiecare control. Deși acest parametru este opțional, este foarte recomandat să îl utilizați. Documentația însoțitoare pentru aplicațiile CGI trebuie să indice cum ar trebui să fie numele cu autoritățile de intrare relevante.
• Parametru valoare folosit pentru a specifica valoarea implicită afișată pentru butoane și câmpuri de introducere a textului. Dacă folosim comutatoare, atunci valoarea parametrului valoare nu va fi vizibilă pentru utilizator, dar aceasta este valoarea pe care o va obține aplicația de procesare CGI dacă utilizatorul selectează butonul radio corespunzător.
• Parametru cercat folosit numai pentru casetele de selectare și butoanele radio. Le stabilește starea inițială. Dacă acest parametru va fi introdus în etichetă<intrare>, apoi comutatorul va fi pornit. Parametrul este utilizat fără valori.
• Parametru dezactivat face controlul indisponibil pentru utilizarea utilizatorului. Parametrul este utilizat fără valori.
• Parametru numai citire se aplică numai organelor de introducere a tipurilor de parole text. Utilizarea acestui parametru înseamnă că datele afișate în aceste câmpuri nu pot fi modificate.
• Parametru mărimea de obicei specifică dimensiunea corpului de introducere a datelor. Dar pentru fiecare tip separat de organe de intrare, acțiunea sa este specifică.
• Parametru maxilungime vă permite să setați numărul maxim posibil de caractere pe care utilizatorul le poate introduce în câmpurile de introducere a textului. Valoarea parametrului este un număr întreg pozitiv.
• Parametru src utilizat în cazurile în care creăm corpuri de intrare legate de grafică. Valoarea acestui parametru este adresa URL a fișierului grafic care conține imaginea afișată.
• Parametru alt vă permite să creați scurte descrieri ale corpului de introducere a datelor creat. Această descriere poate fi afișată ca un mic sfat indicativ atunci când utilizatorul trece cu mouse-ul peste organul de intrare dat.
• Parametru tabindex setează numărul controlului în succesiunea tuturor obiectelor, deplasând focalizarea de intrare între care se realizează prin apăsări succesive ale tastei de tabulare.
• Parametru cheie de acces vă permite să setați o „tastă rapidă”, atunci când este apăsată de utilizator, focalizarea de intrare va merge la acest control.

Deci, ne-am uitat la parametrii utilizați în etichetă ... Dar știm deja că cu această etichetă putem crea o varietate de obiecte formular. Este timpul să ne ocupăm de ele în detaliu.

Obiectele incluse în formular sunt împărțite în două tipuri - organe de introducere a datelor și butoane care inițiază diverse acțiuni. Mai întâi, să vedem cum putem crea organe de intrare.

Unul dintre cele mai comune obiecte de formular este câmpul de intrare cu o singură linie. Am văzut în Listarea 1.33 că este creat folosind parametrul tip cu textul valorii. În același timp, destul de des trebuie să stabilim limite pentru numărul maxim posibil de caractere pe care utilizatorul le poate introduce în acest câmp. Această limitare este implementată folosind parametrul maxlength.

Există o modificare a câmpului de introducere a textului pe o linie, care este conceput special pentru introducerea de informații secrete, de exemplu, parole. Ei afișează textul introdus și îl înlocuiesc cu asteriscuri. Astfel de câmpuri de intrare sunt create folosind următoarea construcție:

Folosind tip Caseta de bifat vă permite să creați comutatoare independente. Toate sunt pătrate familiare, în care cu un clic al mouse-ului putem seta și debifa casetele de selectare. Acesta folosește parametrul valoare. Valoarea acestui parametru va fi transmisă aplicației de procesare CGI dacă utilizatorul bifează această casetă de validare.

De asemenea, putem crea grupuri de butoane radio, care sunt adesea numite butoane radio dependente. În acest grup, utilizatorul poate selecta și bifa un singur buton radio. Fiecare buton radio este creat cu o etichetă cu parametru tip, a atribuit valoarea radio. Pentru ca browserul să înțeleagă că mai multe butoane radio aparțin aceluiași grup, valorile lor pentru parametrul nume trebuie să fie aceleași. Dar, în același timp, valorile parametrilor de valoare trebuie să fie diferite pentru ei.

Să luăm un exemplu de reguli de creare și afișare a corpurilor de intrare a informațiilor luate în considerare.

Lista 1.34

:! DOCTYPE HTML PUBLIC „- // W3C // DTD HTML 4.01 // EN”
http://www.w3.Qrg/TR/html4/strict.dtd ">
,

1 punct
2 puncte
3 puncte

/ html>

Orez. 1.34. Fereastra browserului care arată rezultatul afișării fișierului afișat în Lista 1.35

Mai rămâne un singur element de introducere a datelor de luat în considerare. Acesta este un câmp de introducere a textului cu mai multe linii. Este implementat folosind eticheta textareax Această etichetă creează o zonă de introducere care poate fi destul de mare și este de obicei folosită pentru a introduce cantități medii până la mari de informații text. O etichetă nu poate face fără parametri. Și cu siguranță le vom lua în considerare.

• Parametru Nume vă permite să setați un nume unic pentru un anumit element de introducere a datelor,
• Parametru rânduri setează numărul de linii de afișat pentru câmpul de introducere creat. De fapt, aceasta este înălțimea sa, dar este așezată în linii. Acest parametru este obligatoriu. Un număr întreg pozitiv este folosit ca valoare.
• Parametru cols specifică lățimea, în caractere, a câmpului de introducere a textului generat. Parametrul este de asemenea necesar.
• Parametru dezactivat folosit dacă câmpul trebuie să fie indisponibil pentru utilizare.
• Parametru numai citire folosit pentru a crea câmpuri cu text needitabil. Textul din astfel de câmpuri de introducere poate fi doar afișat, dar utilizatorul nu îl poate modifica.
• Parametru tabindex setează numărul ordinal al elementului de introducere a datelor în secvența de obiecte, tranziția focalizării de intrare între care se face cu ajutorul tastei de tabulare.
• Parametru cheie de acces vă permite să setați o tastă, când este apăsată, focalizarea de intrare va fi transferată automat în acest câmp de introducere.

Acum să vedem cum sunt create astfel de câmpuri de intrare (Fig. 1.35).

Lista 1.36

„http://www.w3.org/TR/html4/strict.dtd”>

<br>Textul care urmează să fie afișat într-un câmp cu mai multe linii, introducere

Pe lângă aceste câmpuri de intrare, există un alt obiect care se referă la crearea de formulare. Putem crea așa-numitele etichete text pentru unele autorități de introducere a datelor.

Într-adevăr, butoanele radio și casetele de selectare au dimensiuni destul de mici, iar pentru a le activa nu este de dorit să plasați cu precizie mouse-ul în zona lor activă.Nu este întotdeauna convenabil. Prin urmare, în multe programe cu o interfață de utilizator bine gândită, puteți activa astfel de controale chiar și făcând clic pe numele lor text. HTML ne oferă exact aceeași oportunitate.

Orez. 1 .35. O fereastră de browser care arată rezultatul afișării fișierului în Lista 1 .36

Pentru a crea etichete de text și titluri similare asociate cu elemente specifice de introducere a datelor, putem folosi eticheta Dar putem lega astfel de etichete doar la acele organe de introducere a datelor pentru care am setat în mod explicit id-ul de identificare. Pe ea se stabilește corespondența dintre etichetă și obiectul formularului. Parametrul principal pentru etichetă se folosește parametrul for, a cărui valoare este valoarea parametrului id al obiectului la care este legată eticheta de text dată. Să dăm un exemplu de creare a unei astfel de conexiuni. Mai întâi vom crea o casetă de selectare și apoi vom atașa un titlu de text asociat acesteia. O operație similară este efectuată folosind următorul fragment de cod:

Comutator independent
Tip de intrare = „checkbox” name = „check” value = „(! LANG: bifat" id="checkl"> !}

Cu toate acestea, puteți face fără parametrul for dacă eticheta care declară corpul de intrare de date asociat este plasată între etichete
Și aici putem încheia revizuirea procedurii de creare a formularelor pentru introducerea datelor în documente HTML statice.

HTML. Formele și atributele lor

Elementele de formular sunt familiare tuturor utilizatorilor rețelei globale moderne. Acestea sunt câmpuri de introducere a textului și a parolei, butoane standard, butoane radio, casete de selectare, liste derulante etc. Cele mai evidente utilizări sunt: ​​introducerea cuvintelor cheie în motoarele de căutare, lucrul cu e-mailul printr-o interfață web, înregistrarea pe un site web, profiluri web, teste online. Imediat, observăm că utilizarea formularelor implică interactivitate și, prin urmare, furnizarea de funcționalități este asociată inevitabil cu programarea (client sau server). Poate că, în majoritatea cazurilor, formularele sunt folosite pentru a transfera date pe server, cu toate acestea, pe partea clientului există sarcini în care este convenabil să utilizați formulare (de exemplu, un calendar sau un calculator).

Rolul HTML este de a descrie elementele necesare și de a le aranja pe pagină. Toate atributele formularelor și elementele lor, care sunt descrise folosind HTML, sunt traduse în proprietățile corespunzătoare ale obiectelor DOM și utilizate în scripting JavaScript.

Descrierile controalelor de formular care sunt concepute pentru a oferi funcționalitatea necesară ar trebui să fie localizate în containerul de formulare, ale cărui atribute sunt esențiale în etapa de scriptare. Principalele atribute ale elementului formular sunt:

atribut	Descriere	valori posibile
Nume	Nume
acțiune	adresa fișierului script de server care va procesa formularul completat și trimis
metodă	metoda de transfer de date către server	obține post
enctype	tipul de conținut utilizat pentru a trimite formularul către server	multipart / form-data
accept-charset	o listă de codificări de caractere introduse de date care vor fi procesate de server
ţintă
onSubmit	JavaScript să ruleze înainte de a trimite datele formularului către server
onReset	JavaScript de executat atunci când resetați valorile elementelor de formular la valorile implicite

După ce ați citit cu atenție descrierile atributelor, veți observa că cele mai multe dintre ele sunt relevante atunci când procesați datele din formular în script-ul de pe server. Trei atribute au valori implicite (ceea ce este, în general, neobișnuit în HTML).

Cu toate acestea, toate atributele de mai sus sunt formal opționale

• atunci când lucrați pe partea clientului, trebuie să specificați numele numelui formularului pentru a putea accesa elementele formularului din JavaScript;
• Trimiterea datelor din formular către server necesită cel puțin un atribut de acțiune care definește scriptul de procesare pe partea serverului.

Semnificația a cel puțin două atribute trebuie explicată mai detaliat.

Atributul metodei

Atributul metodei are două valori principale posibile: get (implicit) și post.

Semnificația acestor valori este următoarea. La trimiterea datelor folosind metoda get, datele formularului sunt trimise la server în antetul cererii, iar când se utilizează metoda post, acestea sunt trimise în corpul cererii. Transferul datelor text se poate face prin oricare dintre aceste metode. Dar datele binare pot fi trimise numai folosind metoda post. Acest lucru se întâmplă în cazul încărcării unui fișier non-server (toată lumea înțelege un exemplu - un atașament la un e-mail). Apropo, în acest caz trebuie să specificați enctype = ”multipart / form-data” (vezi notele despre atributul enctype de mai jos).

Deci, cu excepția cazului de transfer de date binare, ambele metode posibile pot fi aplicate în mod egal. Acest lucru nu afectează în niciun fel complexitatea dezvoltării unui script de server care acceptă date dintr-un formular. Care este metoda preferată? Este logic să aruncați o privire atentă asupra resurselor de pe web și să vă asigurați că metoda get este folosită în marea majoritate a cazurilor (de exemplu, în motoarele de căutare). Poate fi considerată o regulă generală nerostită? Pentru a răspunde la această întrebare, ar trebui să comparați metodele de obținere și postare în cel puțin trei aspecte: cantitatea de date transferate, securitate și ușurință pentru utilizare.

1. Trebuie avut în vedere faptul că cantitatea maximă de date transmisă prin metoda get este limitată, în funcție de setările protocolului, și în niciun caz nu poate depăși 8192 KB.
2. Transmiterea de informații confidențiale folosind metoda get prezintă cu siguranță un anumit risc de securitate, deoarece șirul get rămâne în jurnalele tuturor serverelor intermediare și serverului proxy.
3. Pe de altă parte, vă puteți gândi care opțiune este mai convenabilă pentru utilizatorul resursei de informații.

Când trece prin metoda get, utilizatorul are plăcerea de a vedea datele formularului în bara de adrese. Sunt codificate alte caractere decât alfabetul latin standard. De exemplu, spațiul este % 20. Fiecare dintre noi observă constant această situație atunci când lucrează cu motoarele de căutare. Să setăm, de exemplu, în Yandex combinația de cuvinte cheie „ limbaj HTML„Și vezi în bara de adrese:

Cuvântul " limba„Este codificat cu secvența% FF% E7% FB% EA și” HTML „este transmis ca atare. La primirea unei astfel de solicitări, programul de server corespunzător va accesa baza de date și, în cele din urmă, va genera și trimite o listă cu rezultatele căutării către browser. Este plăcut să te uiți la o astfel de bară de adrese? Nu. Dar utilizatorul poate salva un marcaj unic pe pagina generată.

Atunci când sunt trimise prin metoda postării, datele formularului sunt trimise și către server. În acest caz, utilizatorul nu vede nimic „de prisos” în bara de adrese. Dar apar și alte probleme: o încercare de reîmprospătare a paginii provoacă un mesaj de neînțeles pentru majoritatea utilizatorilor: „... pagina nu poate fi reîmprospătată fără retrimiterea datelor...”. Și nu salvați marcajul.

Rezumat. Aparent, în majoritatea sarcinilor tipice, ar trebui să alegeți metoda implicită de obținere în toate cazurile, cu exceptia transferuri pe server:

• date binare,
• informații confidențiale,
• cantitate mare de date.

Atributul Enctype

Acest atribut are două semnificații posibile:

• cerere / x-www-form-urlencoded(Mod implicit)
• multipart / form-data

Prima valoare este folosită în marea majoritate a cazurilor. Nu are sens să-l specificați în mod explicit - este deja presupus în mod implicit. Al doilea tip de codificare (multipart / form-data) este indicat în singurul caz: la încărcarea unui fișier binar pe server. În acest caz, este necesar să setați atributul metoda = „post”.

Formulare HTML sunt controale care sunt utilizate pentru a colecta informații de la vizitatorii site-ului web.

Formularele web sunt alcătuite dintr-o colecție de casete de text, butoane, liste și alte controale pe care se poate face clic. Din punct de vedere tehnic, formularele transferă date de la un utilizator la un server la distanță.

Pentru a primi și a procesa datele din formular, se folosesc limbaje de programare web, cum ar fi PHP, Perl.

Înainte de HTML5, formularele web erau o colecție de elemente multiple. , terminand cu un buton ... A fost nevoie de mult efort pentru a stila formularele în diferite browsere. În plus, formularele necesitau JavaScript pentru a valida introducerea și au fost eliminate anumite tipuri de câmpuri de intrare pentru a specifica informații de zi cu zi, cum ar fi datele, adresele de e-mail și adresele URL.

Formulare HTML5 a rezolvat majoritatea acestor probleme comune prin introducerea de noi atribute, oferind posibilitatea de a schimba aspectul elementelor de formular prin CSS3.

Orez. 1. Formulare web îmbunătățite cu HTML5

Crearea formularelor HTML5

1. Element

Orice formă se bazează pe un element ...... Nu prevede introducerea datelor, deoarece este un container, care ține împreună toate controalele formularului - câmpuri... Atributele acestui element conțin informații care sunt comune tuturor câmpurilor de formular, așa că trebuie să includeți câmpuri combinate logic într-un singur formular.

Tabelul 1. Atributele etichetei

Atribut	Sens/Descriere
accept-charset	Valoarea atributului este un spațiu delimitat lista de codificare a caracterelor pentru a fi folosit pentru a trimite formularul, de exemplu .
acțiune	Atribut obligatoriu care specifică url-ul handler-ului de formular de pe serverul căruia îi sunt transmise datele. Este un fișier (de exemplu, action.php) care descrie ce trebuie făcut cu datele din formular. Dacă valoarea atributului nu este specificată, atunci după reîncărcarea paginii, elementele formularului vor lua valorile implicite. Dacă toată munca va fi efectuată pe partea clientului prin scripturi JavaScript, atunci valoarea # poate fi specificată pentru atributul acțiune. De asemenea, vă puteți asigura că formularul completat de vizitator ajunge prin poștă. Pentru a face acest lucru, trebuie să faceți următoarea intrare:
completare automată
enctype	Folosit pentru a indica MIMA-tip de date trimise cu formularul, de exemplu, enctype = "multipart / form-data". Specificat numai dacă metoda = „post”. application / x-www-form-urlencoded este tipul de conținut implicit, indicând faptul că datele trimise sunt o listă de variabile de formular codificate în URL. Caracterele de spațiu (ASCII 32) vor fi codificate ca + și caracterele speciale, cum ar fi! va fi codificat în hex ca% 21. multipart / form-data - folosit pentru a trimite formulare care conțin fișiere, date non-ASCII și date binare, constă din mai multe părți, fiecare dintre acestea reprezentând conținutul unui element individual de formular. text / simplu - indică faptul că este transmis text simplu (nu html).
metodă	Specifică modul în care sunt transmise datele din formular. Metoda get transmite date către server prin bara de adrese a browserului. Când se generează o solicitare către server, toate variabilele și valorile lor formează o secvență precum www.anysite.ru/form.php?var1=1&var2=2. Numele și valorile variabilelor sunt atașate la adresa serverului după? și sunt separate prin semnul &. Toate caracterele speciale și literele, altele decât latine, sunt codificate în formatul % nn, spațiul este înlocuit cu +. Această metodă ar trebui utilizată dacă nu transferați cantități mari de informații. Dacă intenționați să trimiteți un fișier împreună cu formularul, această metodă nu va funcționa. Metoda postului este folosită pentru a trimite cantități mari de date, precum și informații confidențiale și parole. Datele trimise folosind această metodă nu sunt vizibile în antetul URL-ului deoarece sunt conținute în corpul mesajului.
Nume	seturi numele formularului pentru a fi folosit pentru a accesa elemente de formular prin scripturi, de exemplu name = „opros”.
nuvalidate	Dezactivează validarea pe butonul de trimitere a formularului. Atributul este utilizat fără a specifica o valoare
ţintă	Specifică fereastra către care vor fi direcționate informațiile: _blank - fereastră nouă _self - același cadru _parent - cadrul părinte (dacă există, dacă nu, atunci la cel curent) _top este fereastra de nivel superior în raport cu acest cadru. Dacă apelul nu este dintr-un cadru copil, atunci în același cadru.

2. Gruparea elementelor de formular

Element

...

este destinat grupării elementelor legate între ele, împărțind astfel forma în fragmente logice.

Fiecare grup de elemente poate fi numit folosind elementul

care urmează eticheta

... Numele grupului apare în partea stângă în chenarul de sus

... De exemplu, dacă elementul

informațiile de contact sunt stocate:

Informatii de contact

Nume *

E-mail

Orez. 2. Gruparea elementelor de formular folosind

Tabelul 2. Atributele etichetei

Atribut	Sens/Descriere
dezactivat	Dacă atributul este prezent, atunci un grup de elemente de formular înrudite care se află în interiorul containerului dezactivat pentru completare și editare. Folosit pentru a restricționa accesul la unele câmpuri de formular care conțin date introduse anterior. Atributul este utilizat fără a specifica o valoare - .
formă	in acelasi document. Indică una sau mai multe forme cărora le aparține acest grup de elemente. În prezent, atributul nu este acceptat de niciun browser.
Nume	Definește Nume pentru a fi utilizat pentru a face referire la elemente în JavaScript sau pentru a face referire la datele din formular după ce formularul a fost completat și trimis. Analog cu atributul id.

3. Creați câmpuri de formular

Element creează majoritatea câmpurilor de formular. Atributele elementului diferă în funcție de tipul de câmp pentru care elementul este utilizat.

Folosind stilurile CSS, puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și adăugați chenare, culoarea de fundal și imaginea de fundal. Lățimea câmpului este stabilită de proprietatea width.

Tabelul 3. Atributele etichetei

Atribut	Sens/Descriere
Accept	Specifică tipul de fișier care poate fi trimis către server. Indicat doar pentru ... Valori posibile: file_extension - permite încărcarea fișierelor cu extensia specificată, de exemplu, accept = ". gif", accept = ". pdf", accept = ". doc" audio / * - permite descărcarea fișierelor audio video / * - permite încărcarea fișierelor video imagine / * - permite încărcarea imaginilor media_type - indică tipul media al fișierelor încărcate.
alt	Definește text alternativ pentru imagini, indicat doar pentru .
completare automată	Responsabil pentru memorarea valorilor introduse în câmpul de text și înlocuirea lor automată la introducerea ulterioară: pornit - înseamnă că câmpul nu este protejat, iar valoarea acestuia poate fi stocată și preluată, off - dezactivează completarea automată pentru câmpurile formularului.
autofocus	Vă permite să vă asigurați că în formularul încărcat acest sau acel câmp de intrare are deja focus (a fost selectat), fiind gata să introduceți o valoare.
verificat	Atributul verifică dacă caseta de selectare este bifată în mod implicit la încărcarea paginii pentru câmpurile de tip = „checkbox” și tip = „radio”.
dezactivat
formă	Valoarea atributului trebuie să fie egală cu atributul id al elementului in acelasi document. Specifică unul sau mai multe formulare cărora le aparține acest câmp de formular.
formare	Setează adresa URL a fișierului care va procesa datele introduse în câmpurile la trimiterea formularului. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Acest atribut înlocuiește valoarea atributului de acțiune al formularului în sine.
formenctype	Determină modul în care datele câmpului formularului vor fi codificate atunci când sunt trimise la server. Supliniază valoarea atributului enctype al formularului. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Opțiunile sunt: application / -x-www-form-urlencoded este implicit. Toate caracterele sunt codificate înainte de trimitere (spațiile sunt înlocuite cu +, caracterele speciale sunt convertite în valori ASCII HEX) multipart / form-data - caracterele nu sunt codificate text / simplu - spațiile sunt înlocuite cu caracterul +, iar caracterele speciale nu sunt codificate.
formmetod	Atributul specifică metoda pe care browserul o va folosi pentru a trimite datele formularului către server. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Supliniază valoarea atributului metodei din formular. Opțiunile sunt: get este valoarea implicită. Datele din formular (perechea nume/valoare) sunt atașate la url și trimise la server: url? Nume = valoare și nume = valoare post - Datele formularului sunt trimise ca cerere http.
formnovalidate	Specifică faptul că datele câmpului formularului nu trebuie validate atunci când formularul este trimis. Supliniază valoarea atributului novalidate al formularului. Poate fi folosit fără a specifica o valoare de atribut.
formtarget	Stabilește unde să se afișeze răspunsul primit după trimiterea formularului. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Supliniază valoarea atributului țintă al formularului. _parent - Încarcă răspunsul la cadrul părinte _top - încarcă răspunsul pe ecran complet framename - Încarcă răspunsul într-un cadru cu numele specificat.
înălţime	Valoarea atributului conține numărul de pixeli fără a specifica o unitate. Setează înălțimea unui câmp de formular de tipul = „imagine”, de exemplu ... Este recomandat să setați atât înălțimea cât și lățimea câmpului în același timp.
listă	Este o referință la un articol
max	Vă permite să limitați intrarea de date numerice permise la valoarea maximă; valoarea atributului poate conține un număr întreg sau fracționar. Se recomandă utilizarea acestui atribut împreună cu atributul min. Funcționează cu următoarele tipuri de câmpuri: număr, interval, dată, dată și oră, dată și oră-local, lună, oră și săptămână.
lungime maxima	Atributul specifică numărul maxim de caractere care pot fi introduse în câmp. Valoarea implicită este de 524288 de caractere.
min	Vă permite să restricționați introducerea numerică validă la valoarea minimă.
multiplu	Permite utilizatorului să introducă mai multe valori ale atributelor, separate prin virgulă. Se aplică fișierelor și adreselor de e-mail. Specificat fără o valoare de atribut.
Nume	Specifică numele care va fi folosit pentru a accesa elementul de exemplu în foile de stil css. Analog cu atributul id.
model	Vă permite să definiți utilizarea expresie uzuala sintaxa datelor care trebuie permise într-un anumit câmp. De exemplu, model = "(3) - (3)" - parantezele pătrate stabilesc intervalul de caractere valide, în acest caz - orice litere mici, numărul dintre acolade indică faptul că sunt necesare trei litere mici, urmate de o liniuță, apoi trei cifre în intervalul de la 0 la 9.
substituent	Conține textul care este afișat în câmpul de introducere înainte de completare (cel mai adesea este un indiciu).
numai citire	Nu permite utilizatorului să modifice valorile elementelor de formular, în timp ce selectarea și copierea textului este disponibilă. Specificat fără o valoare de atribut.
necesar	Afișează un mesaj care afirmă că acest câmp este obligatoriu. Dacă utilizatorul încearcă să trimită formularul fără a introduce valoarea necesară în acest câmp, pe ecran va fi afișat un mesaj de avertizare. Specificat fără o valoare de atribut.
mărimea	Specifică lățimea aparentă a marginii, în caractere. Valoarea implicită este 20. Funcționează cu următoarele tipuri de câmpuri: text, căutare, tel, url, e-mail și parolă.
src	Specifică adresa URL a unei imagini de utilizat ca buton pentru trimiterea datelor din formular. Specificat doar pentru domeniu .
Etapa	Folosit pentru articolele care necesită introducere numerică, indică cantitatea de creștere sau scădere a valorilor în timpul ajustării intervalului (pas).
tip	buton - creează un buton.
	casetă de selectare - transformă câmpul de introducere într-o casetă de selectare care poate fi bifată sau debifată, de exemplu eu am o mașină
	culoare - generează selecționatori de culori în browserele compatibile, oferind utilizatorilor posibilitatea de a selecta valorile de culoare în format hexazecimal.
	data - vă permite să introduceți o dată în formatul zz.ll.aaaa. Zi de nastere:
	datetime-local - vă permite să introduceți data și ora, separate printr-o literă engleză majusculă T conform modelului dd.mm.aaaa hh: mm. Ziua și ora de naștere:
	e-mail - browserele care acceptă acest atribut se vor aștepta ca utilizatorul să introducă date care se potrivesc cu sintaxa adreselor de e-mail. E-mail:
	fișier - vă permite să încărcați fișiere de pe computerul utilizatorului. Selectați un fișier:
	ascuns - Ascunde un control care nu este vizibil pentru browser și împiedică utilizatorul să modifice valorile implicite.
	imagine - creează un buton, permițându-vă să inserați o imagine în locul textului de pe buton.
	luna - Permite utilizatorului să introducă anul și luna folosind modelul aaaa-mm.
	număr - destinat introducerii valorilor întregi. Atributele sale min, max și step stabilesc valorile superioare, inferioare și, respectiv, de spațiere. Aceste atribute sunt presupuse pentru toate articolele care au valori numerice. Valorile lor implicite depind de tipul elementului. Indicați cantitatea (de la 1 la 5):
	parola - creează câmpuri de text în formular, în timp ce caracterele introduse de utilizator sunt înlocuite cu asteriscuri, marcatori sau alte pictograme setate de browser. Introdu parola:
	radio - creează un buton radio - un control sub forma unui cerc mic care poate fi activat sau dezactivat. Vegetarian:
	interval - vă va permite să creați un element de interfață, cum ar fi un glisor, min / max - vă va permite să setați intervalul de selecție
	resetare - creează un buton care șterge câmpurile formularului de datele introduse de utilizator.
	căutare - denotă un câmp de căutare, în mod implicit câmpul de intrare este dreptunghiular. Căutare:
	trimite - creează un buton standard pe care se poate face clic. Butonul colectează informații din formular și le trimite spre procesare.
	text - creează casete de text într-un formular, afișând o casetă de text cu un rând pentru introducerea textului.
	oră - vă permite să introduceți ora în format de 24 de ore folosind șablonul hh: mm. În browserele compatibile, apare ca un control numeric de intrare cu o valoare pe care se poate face clic cu mouse-ul și acceptă numai valori de timp. Specificați ora:
	url - câmpul este destinat specificarii adreselor URL. Pagina principală:
	săptămână - Instrumentul indicator adecvat permite utilizatorului să selecteze o săptămână din an și apoi furnizează introducerea datelor în format nn-aaaa. În funcție de an, numărul de săptămâni poate fi 52 sau 53. Indicați săptămâna:
valoare	Specifică textul afișat pe un buton, într-o casetă sau textul asociat. Nu este specificat pentru câmpurile de tip fișier.
lăţime	Valoarea atributului conține numărul de pixeli. Vă permite să setați lățimea câmpurilor de formular.

4. Câmpuri de introducere a textului

Element ... folosit în loc de element atunci când trebuie să creați casete de text mari. Textul afișat ca valoare originală este plasat în interiorul etichetei. Dimensiunile câmpului sunt stabilite folosind atributele cols - dimensiunile orizontale, rândurile - dimensiunile verticale. Înălțimea câmpului poate fi setată cu proprietatea height. Toate dimensiunile sunt calculate pe baza mărimii unui caracter de font monospațial.

Tabelul 4. Atributele etichetei <tr><th>Atribut</th> <th>Sens/Descriere</th> </tr><tr><td>autofocus</td> <td>Setează automat focalizarea pe câmpul de text de început dorit.</td> </tr><tr><td>cols</td> <td>Setează lățimea în funcție de numărul de caractere. Dacă utilizatorul introduce mai mult text, apare o bară de defilare.</td> </tr><tr><td>dezactivat</td> <td>Dezactivează posibilitatea de a edita și copia conținutul câmpului.</td> </tr><tr><td>formă</td> <td>Valoarea atributului trebuie să fie egală cu valoarea atributului id al elementului <form>in acelasi document. Specifică unul sau mai multe formulare cărora le aparține această casetă de text.</td> </tr><tr><td>lungime maxima</td> <td>Valoarea atributului specifică numărul maxim de caractere de introdus în câmp.</td> </tr><tr><td>Nume</td> <td>Specifică numele casetei de text.</td> </tr><tr><td>substituent</td> <td>Definește un scurt text prompt care descrie valoarea de intrare așteptată.</td> </tr><tr><td>numai citire</td> <td>Dezactivează posibilitatea de a edita conținutul câmpului.</td> </tr><tr><td>necesar</td> <td>Afișează un mesaj care afirmă că acest câmp este obligatoriu.</td> </tr><tr><td>rânduri</td> <td>Specifică un număr care indică câte linii trebuie afișate în zona de text.</td> </tr><tr><td>înfășura</td> <td>Stabilește dacă textul trebuie să păstreze întreruperile de rând atunci când este trimis formularul. Valoarea hard păstrează transportul, dar valoarea soft nu. Dacă se utilizează valoarea hard, trebuie specificată valoarea atributului cols.</td> </tr></table><h3>5. Listă derulantă</h3> <p>Listele fac posibilă aranjarea unui număr mare de articole într-o manieră compactă. Listele derulante sunt create folosind elementul <select>...</select>... Acestea vă permit să selectați una sau mai multe valori din setul propus. În mod implicit, caseta cu listă afișează primul său element.</p> <p>Pentru a adăuga elemente în listă, utilizați elementele <option>...</option> care se află în interior <select> .</p> <p>Pentru a organiza liste, utilizați elementul <optgroup>...</optgroup> care creează titluri în liste.</p> <p>Pentru liste, este posibil să modificați dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și să adăugați chenare, culoarea de fundal și imaginea de fundal.</p> <table class="t3">Tabelul 5. Atributele etichetei <select> <tr><th>Atribut</th> <th>Sens/Descriere</th> </tr><tr><td>autofocus</td> <td>Setează focalizarea automată pe un element la încărcarea paginii.</td> </tr><tr><td>dezactivat</td> <td>Dezactivează meniul drop-down.</td> </tr><tr><td>formă</td> <td>Determină forma căreia îi aparține această listă. Identificatorul formularului este specificat ca valoare a atributului.</td> </tr><tr><td>multiplu</td> <td>Vă permite să selectați unul sau mai multe elemente, pentru aceasta, la selectare, trebuie să apăsați și să țineți apăsată tasta Ctrl.</td> </tr><tr><td>Nume</td> <td>Definește un nume pentru lista verticală. Valoarea atributului conține un nume care reflectă subiectul listei.</td> </tr><tr><td>necesar</td> <td>Afișează un mesaj că utilizatorul trebuie să selecteze o valoare din lista verticală înainte de a trimite formularul.</td> </tr><tr><td>mărimea</td> <td>Specifică numărul de elemente din listă vizibile pe ecran în același timp. Dacă numărul de articole din listă depășește numărul specificat, va apărea o bară de defilare. Valoarea atributului este specificată ca un întreg pozitiv.</td> </tr></table><h3>6. Etichete pentru câmpurile de formular</h3> <p>Etichetele elementelor de formular sunt create folosind elementul <label>...</label>... Există două moduri de a grupa o etichetă și o marjă. Dacă câmpul se află în interiorul elementului <label>, atunci nu trebuie specificat atributul for.</p><p> <!-- с указанием атрибута for --> <label for="comments">Când ai zburat ultima dată cu un avion?</label> <textarea id="comments">

Pisică

7. Butoane

Element ... creează butoane pe care se poate face clic. Spre deosebire de butoanele create ( , , , ), în interiorul elementului puteți pune conținut - text sau imagine.

Pentru afișarea corectă a elementului

diferite browsere trebuie să specifice atributul tip, de exemplu, .

Butoanele permit utilizatorilor să trimită date într-un formular, să ștergă conținutul unui formular sau să întreprindă alte acțiuni. Puteți crea chenare, puteți schimba fundalul și puteți alinia textul pe buton.

Tabelul 9. Atributele etichetei

Atribut	Sens/Descriere
autofocus	Setează focalizarea pe un buton la încărcarea paginii.
dezactivat	Dezactivează butonul, făcându-l inaccesibil.
formă	Indică una sau mai multe forme cărora le aparține acest buton. Valoarea atributului este identificatorul formularului corespunzător.
formare	Valoarea atributului conține adresa URL a handler-ului pentru datele formularului trimise atunci când se face clic pe butonul. Doar pentru un buton de tipul = „trimite”. Supliniază valoarea atributului de acțiune specificat pentru element .
formenctype	Specifică tipul de codificare a datelor din formular înainte de a fi trimise la server atunci când se face clic pe butoanele de tip = „trimite”. Supliniază valoarea atributului enctype specificat pentru element ... Valori posibile: application / x-www-form-urlencoded este implicit. Toate caracterele vor fi codificate înainte de trimitere. multipart / form-data - caracterele nu sunt codificate. Folosit atunci când fișierele sunt încărcate folosind un formular. text / simplu - caracterele nu sunt codificate și spațiile sunt înlocuite cu caracterul +.
formmetod	Atributul definește metoda pe care browserul o va folosi pentru a trimite formularul. Supliniază valoarea atributului metodei specificat pe element ... Este specificat doar pentru butoanele de tipul = „submit”. Valori posibile: get - datele din formular (pereche nume/valoare) sunt adăugate la url și trimise la server. Această metodă are restricții privind dimensiunea datelor trimise și nu este potrivită pentru trimiterea de parole și informații confidențiale. post - datele din formular sunt adăugate ca cerere http. Metoda este mai fiabilă și mai sigură decât get și nu are limită de dimensiune.
formnovalidate	Atributul specifică faptul că datele formularului nu trebuie validate la trimitere. Este specificat doar pentru butoanele de tipul = „submit”.
formtarget	Atributul specifică în ce fereastră se va afișa rezultatul după trimiterea formularului. Este specificat doar pentru butoanele de tipul = „submit”. Supliniază valoarea atributului țintă specificat pentru element . _blank - încarcă răspunsul într-o nouă fereastră/filă _self - încarcă răspunsul în aceeași fereastră (implicit) _parent - Încarcă răspunsul la cadrul părinte _top - încarcă răspunsul pe ecran complet framename - Încarcă răspunsul într-un cadru cu numele specificat.
Nume	Specifică numele butonului, valoarea atributului este text. Folosit pentru a conecta la datele din formular după ce formularul a fost trimis sau pentru a conecta la un buton (e) dat(e) în JavaScript.
tip	Definește tipul butonului. Valori posibile: buton - buton pe care se poate face clic resetare - buton de resetare, returnează valoarea inițială trimite - un buton pentru trimiterea datelor din formular.
valoare	Setează valoarea implicită trimisă atunci când se face clic pe butonul.

8. Casete de selectare și butoane radio în formulare

Casetele de selectare din formulare sunt setate folosind construcția iar comutatorul cu .

Spre deosebire de butoanele radio, mai multe casete de selectare pot fi setate într-un singur formular. Dacă atributul bifat este specificat pentru casetele de selectare, atunci când pagina este încărcată, casetele de selectare vor fi deja bifate în câmpurile de formular corespunzătoare.

Element se aplică la efectuarea selecțiilor folosind butoanele radio și casetele de selectare. Puteți selecta elementul dorit făcând simplu clic pe textul asociat acestuia. Pentru a face acest lucru, trebuie să puneți în interiorul elementului .

Etichetă FORMĂ creează un formular pe o pagină web. Formularul este destinat schimbului de date între utilizator și server. Domeniul de aplicare al formularelor nu se limitează la trimiterea de date către server; folosind script-uri client, puteți accesa orice element al formularului, îl puteți modifica și aplica la discreția dvs.

Un document poate conține orice număr de formulare, dar un singur formular poate fi trimis la server la un moment dat. Din acest motiv, datele din formular trebuie să fie independente unele de altele.

Când formularul este trimis la server, controlul datelor este transferat către programul CGI specificat de parametrul de acțiune al etichetei FORM. Browserul pregătește informațiile sub forma unei perechi „nume = valoare”, unde numele este determinat de parametrul nume al etichetei INPUT, iar valoarea este introdusă de utilizator sau setată în câmpul de formular implicit. Dacă metoda GET este folosită pentru a trimite date, atunci bara de adrese poate lua următoarea formă.

http://www..cgi? nick =% C2% E0% ED% FF +% D8% E0% EF% EE% F7% EA% E8% ED & pagina = 5

Parametrii sunt listați după semnul întrebării după adresa programului CGI și sunt separați printr-un caracter și (&). Caracterele non-latine sunt convertite în hexazecimal (în forma% HH, unde HH este codul hexazecimal pentru valoarea caracterului ASCII), spațiul este înlocuit cu un plus (+).

Sintaxă

...

Etichetă de final
Necesar.

Opțiuni
acțiunea este adresa programului sau documentului CGI care prelucrează datele din formular.
enctype - Tipul MIME al informațiilor din formular.
metoda - metoda protocolului HTTP.
nume - numele formularului.
țintă - numele ferestrei sau cadrului în care handlerul va încărca rezultatul returnat.

Exemplul 1. Utilizarea etichetei FORM

Cum crezi că înseamnă abrevierea „OS”?

Ofițeri

Sistem de operare

Muște mari în dungi

Descrierea parametrilor etichetei FORM

parametrul ACȚIUNE

Descriere
Specifică handlerul căruia sunt accesate datele din formular atunci când sunt trimise la server. Handler-ul poate fi un program CGI sau un document HTML care include scripturi pe partea serverului (de exemplu, Parser). După ce handlerul ia măsuri asupra datelor din formular, returnează un nou document HTML.

Dacă parametrul acțiune este absent, pagina curentă este reîncărcată, revenind toate elementele de formular la valorile implicite.

Sintaxă

...

Argumente
Valoarea este calea completă sau relativă către fișierul server (URL).

Valoare implicită
Nu.

Exemplul 2. Adăugarea unui procesor de formulare

...

Puteți specifica o adresă de e-mail ca handler, începând cu cuvântul cheie mailto. Când formularul este trimis, programul implicit de e-mail va fi lansat. Din motive de securitate, browser-ul a stabilit că este imposibil să trimită informațiile introduse în formular în mod invizibil prin poștă. Pentru interpretarea corectă a datelor, utilizați parametrul enctype = "text / plain" din eticheta FORM.

Exemplul 3. Utilizarea unei adrese de e-mail

...

parametrul ENCTYPE

Descriere
Setează tipul MIME pentru datele trimise cu formularul. În mod normal, nu trebuie să setați parametrul enctype, datele sunt bine înțelese din partea serverului. Cu toate acestea, dacă utilizați un câmp pentru a trimite un fișier (tip INPUT = fișier), trebuie să definiți parametrul enctype ca multipart / form-data.

Sintaxă

...

Argumente
Numele tipului MIME, în orice caz. Este permisă setarea mai multor valori simultan, separându-le cu virgule.

Valoare implicită
cerere / x-www-form-urlencoded

Exemplul 4. Modificarea tipului de date

...

parametru METODE

Descriere
Metoda informează serverul despre scopul solicitării. Există două metode principale: GET și POST. Există și alte metode, dar sunt încă puțin utilizate.

Sintaxă

...

Argumente
Valoarea pentru metodă nu face distincție între majuscule și minuscule și trebuie specificată fără ghilimele. Există două metode - GET și POST.

OBȚINE
Această metodă este una dintre cele mai comune și este concepută pentru a obține informațiile necesare și a transmite date în bara de adrese. În acest caz, perechile nume = valoare sunt atașate adresei după semnul întrebării și separate printr-un ampersand (simbol &). Comoditatea utilizării metodei GET constă în faptul că adresa cu toți parametrii poate fi utilizată în mod repetat, salvând-o, de exemplu, în „Favorite” din browser și, de asemenea, modificând valorile parametrilor direct în bara de adrese.

POST
Metoda POST trimite date către server într-o solicitare de browser. Acest lucru permite să fie trimise mai multe date decât este disponibil pentru metoda GET, deoarece are o limită de 4K. Cantități mari de date sunt utilizate în forumuri, servicii poștale, populații de baze de date etc.

Valoare implicită
OBȚINE

Exemplul 5. Metoda de depunere a formularului

...

Parametrul NAME

Descriere
Specifică un nume unic pentru formular. De obicei, numele formularului este folosit pentru a accesa elementele sale prin scripturi.

Sintaxă

...

Argumente
Numele este un set de caractere, inclusiv numere și litere. JavaScript este sensibil la majuscule și minuscule, așa că atunci când accesați un formular după nume prin intermediul scripturilor, utilizați aceeași ortografie ca și pentru parametrul nume.

Valoare implicită
Nu.

Exemplul 6. Utilizarea unui nume de formular

Имя:

Параметр TARGET

Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис

...

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

Blank - загружает страницу в новое окно браузера.
_self - загружает страницу в текущее окно.
_parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 7. Открытие новой страницы

...

Назначение форм

HTML-формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером, например, регистрацию пользователя на сервере или выбор нужного документа из представленного списка. Формы поддерживаются всеми популярными браузерами.

Синтаксис формы

В HTML-документе для задания формы используются тэги

…

, Документ может содержать несколько форм, но они не могут быть вложены одна в другую.

Тэг

имеет параметры action , method и enctype . Отдельные браузеры ( Netscape , Internet Explorer) поддерживают дополнительные параметры, например, class , name , style и др.

В общем виде форма задается следующим образом:

содержание_формы

Параметр action является единственным обязательным. Его значением является URL-адрес CGI -программы, которая будет обрабатывать информацию, извлеченную из данной формы.

Взаимодействие между браузером и web-сервером

Взаимодействие между клиентом-браузером и Web-сервером осуществляется по правилам, заданным протоколом HTTP, и состоит из запросов клиента и ответов сервера. Запрос разбивается на три части. В первой строке запроса содержится HTTP-команда, называемая методом, URL-адрес запрашиваемого файла и номер версии протокола HTTP. Вторая часть - заголовок запроса. Третья часть - тело запроса, собственно данные, посылаемые серверу.

MIME-типы

Одним из первых применений Интернета была электронная почта, ориентированная на пересылку текстовых сообщений. Часто возникает необходимость вместе с текстом переслать данные в нетекстовом формате, например, упакованный zip-файл, рисунок в формате GIF , JPEG и т. д. Для того, чтобы переслать средствами электронной почты такие файлы без искажения, они кодируются в соответствии с некоторым стандартом. Стандарт MIME ( Multipurpose Internet Mail Extensions, многоцелевые расширения электронной почты для Интернета) определяет набор MIME -типов, соответствующих различным типам данных, и правила их пересылки по электронной почте. Для обозначения MIME -типа используется запись вида тип/ подтип , где тип определяет общий тип данных, например, text , image , application (тип application обозначает специфический внутренний формат данных, используемый некоторой программой), а подтип - конкретный формат внутри типа данных, например, application/zip , image/gif , text/html .

MIME -типы нашли применение в Web, где они называются также медиа -типами, для идентификации формата документов, передаваемых по протоколу HTTP. В HTML-форме параметр enctype определяет медиа -тип, который используется для кодирования и пересылки специального типа данных - содержимого формы.

Значением параметра enctype является медиа -тип, определяющий формат кодирования данных при передаче их от браузера к серверу. Браузер кодирует данные, чтобы исключить их искажение в процессе передачи. Возможны два значения этого параметра: (по умолчанию) и multipart/form-data .

Второй метод нужен только в том случае, если к содержимому формы присоединяется локальный файл, выбранный при помощи элемента формы . В остальных случаях следует использовать метод кодирования по умолчанию.

URL-кодирование

Схема кодирования application/x-www-form-urlencoded одинакова для обоих методов пересылки (GET и POST ) и заключается в следующем. Для каждого элемента формы, имеющего имя, заданное параметром name , формируется пара "name=value" , где value - значение элемента, введенное пользователем или назначенное по умолчанию. Если значение отсутствует, соответствующая пара имеет вид "name=" . Для радиокнопок и переключателей используются значения только выбранных элементов. Если элемент выбран, а значение параметра value не определено, по умолчанию используется значение "on" .

Все пары объединяются в строку, в качестве разделителя служит символ "&" . Так как имена и значения представляют собой обычный текст, то они могут содержать символы, недопустимые в составе URL (метод GET пересылает данные как часть URL). Такие символы заменяются последовательностью, состоящей из символа % и их шестнадцатеричного ASCII- кода. Символ пробела может заменяться не только кодом %20 , но и знаком + (плюс). Признак конца строки, встречающийся в поле textarea , заменяется кодом %0D%0A . Такое кодирование называется URL-кодированием .

Методы передачи данных

Закодированная информация пересылается серверу одним из методов GET или POST . Основное отличие заключается в том, как метод передает информацию CGI -программе.

При использовании метода GET данные формы пересылаются в составе URL-запроса, к которому присоединяются после символа "?" в виде совокупности пар

переменная = значение,

разделенных символом "&" . В этом случае первая строка запроса может иметь следующий вид:

GET /cgi-bin/cgi-program.pl?name=Ivan&surname=Ivanov HTTP/1.1

Часть URL после символа "?" называется строкой запроса . Web-сервер, получив запрос, присвоит переменной среды QUERY_STRING значение строки запроса и вызовет CGI -программу, обозначенную в первой части URL до символа "?" .

При использовании метода POST данные формы пересылаются серверу в теле запроса, после чего передаются сервером в CGI -программу через стандартный ввод .

Методы GET и POST имеют свои достоинства и недостатки. Метод GET обеспечивает лучшую производительность при пересылке форм, состоящих из небольшого набора коротких полей. При пересылке большого объема данных следует использовать метод POST , так как браузер или сервер могут накладывать ограничения на размер данных, передаваемых в составе URL, и отбрасывать часть данных, выходящую за границу. Метод POST , к тому же, является более надежным при пересылке конфиденциальной информации .

Поля ввода формы

Форма отображается в окне браузера в виде набора стандартных элементов управления, используемых для заполнения полей формы значениями, которые затем передаются Web-серверу. Значение вводится в поле ввода пользователем или назначается по умолчанию. Для создания полей средствами языка HTML существуют специальные тэги: , , < textarea > , которые употребляются только внутри тэга

.

Тэг

Это наиболее употребительный тэг, с помощью которого можно генерировать внутри формы поля для ввода строки текста, пароля, имени файла, различные кнопки. Он имеет два обязательных параметра: type и name . Параметр type определяет тип поля: селекторная кнопка, кнопка передачи и др. Параметр name определяет имя, присваиваемое полю. Оно не отображается браузером, а используется в качестве идентификатора значения, передаваемого Web-серверу. Остальные параметры меняются в зависимости от типа поля. Ниже приведено описание типов полей, создаваемых при помощи тэга , и порождаемых ими элементов ввода.

type="text"

Создает элемент для ввода строки текста.

Дополнительные параметры:

• maxlength="n" - задает максимальное количество символов, разрешенных в текстовом поле. По умолчанию - не ограничено.
• size="n" - максимальное количество отображаемых символов.
• value = "начальное_значение" . Первоначальное значение текстового поля.

type="password"

Создает элемент ввода строки текста, отличающийся от предыдущего только тем, что все вводимые символы представляются в виде символа * . Поле password не обеспечивает безопасности введенного текста, так как на сервер он передается в незашифрованном виде.

type="files"

Создает поле для ввода имени локального файла, сопровождаемое кнопкой Browse . Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или выбрать его из диалогового окна. Для корректной передачи присоединенного файла следует установить значения параметров формы равными enctype="multipart/form-data" и method="post" . В противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое. Дополнительные параметры maxlength и size имеют тот же смысл, что и для элементов типа text и password .

type="checkbox"

Создает поле для установки флажка. Элементы checkbox можно объединить в группу, установив одинаковое значение параметра name .

Дополнительные параметры:

• value="строка" . Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value всех установленных флажков.
• checked . Если указан параметр checked , элемент является выбранным по умолчанию.

type="radio"

Создает элемент-переключатель, существующий только в составе группы подобных элементов, из которых может быть выбран только один. Все элементы группы должны иметь одинаковое значение параметра name .

Отображается в виде круглой кнопки. Дополнительные параметры:

• value="строка" . Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы .
• checked . Устанавливает элемент выбранным по умолчанию. Один и только один элемент в группе должен иметь этот параметр.

type="submit"

Создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде прямоугольной кнопки с надписью Submit .

Дополнительный параметр позволяет изменить надпись на кнопке. Параметр name для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передается на сервер.

Если параметры name и value присутствуют, например,

,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="ok" . Внутри формы могут существовать несколько кнопок передачи.

type="reset"

Создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде прямоугольной кнопки с надписью Reset . Надпись можно изменить при помощи дополнительного параметра

value="название_кнопки"

Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее отсутствует параметр name .

type="image"

Создает элемент в виде графического изображения, действующий аналогично кнопке Submit . Дополнительные параметры:

• src="url_изображения" . Задает URL-адрес файла с графическим изображением элемента.
• align="тип_выравнивания" . Задает тип выравнивания изображения относительно текущей строки текста.

Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде name.x=n&name.y=m включаются браузером в список параметров формы, посылаемых на сервер.