Un formular în HTML este o parte a unui document care permite utilizatorului să introducă informații de interes pentru noi, care pot fi apoi acceptate și procesate pe partea serverului. Cu alte cuvinte, formularele sunt folosite pentru a colecta informații introduse de utilizatori.

Etichetă asociată sintactic

definește un formular într-un document HTML. Element în mare, este pur și simplu un container, în interiorul căruia pot fi plasate diverse etichete, controale și tipuri de elemente de intrare, casete de selectare, butoane radio, butoane de trimitere și alte elemente HTML.

Sarcina principală a formularului este de a accepta informațiile primite de la utilizator și de a le transmite pentru procesare ulterioară pe partea serverului.

Elementul are următoarea sintaxă:

elemente de formă

Element este elementul principal al formeiși definește un câmp de utilizator pentru introducerea informațiilor. Câmpul de introducere acceptă alt fel, în funcție de valoarea atributului tip aplicat elementului.

Element

poate conține unul sau mai multe dintre următoarele elemente de formă:

Suport pentru browser

Etichetă			Operă		IExplorer	margine
	da	da	da	da	da	da

Atribute

Atribut	Sens	Descriere
Accept	tip fișier	Nu este acceptat în HTML5. Specifică o listă de tipuri de fișiere, separate prin virgulă, pe care serverul le acceptă (care poate fi reprezentată prin încărcări de fișiere).
accept-charset	set de caractere	Specifică codificarea utilizată în formularul trimis (prestabilit este șirul rezervat "necunoscut", care specifică că codificarea se potrivește cu codificarea documentului care conține elementul ).
acțiune	URL	Specifică adresa la care este trimis formularul (în mod implicit, acțiunea este setată la pagina curentă).
completare automată	pe oprit	Specifică dacă browserul poate completa automat elemente de formular (activat implicit). Acest atribut ajută la completarea câmpurilor de formular cu text care a fost introdus anterior în ele (cu excepția cazului în care este dezactivat de setările browserului).
enctype	application/x-www-form-urlencoded multipart/form-data text/ simplu	Specifică modul în care datele formularului sunt codificate atunci când sunt trimise. Valoare implicită application/x-www-form-urlencoded.
metodă	obține post	Atributul specifică ce metodă HTTP (get sau post ) este utilizată la trimiterea formularului. Metoda get este folosită implicit.
Nume	text	Specifică numele formularului care este utilizat pentru identificare (specifică numele formularului).
nuvalidate	nuvalidate	Specifică faptul că nu se efectuează validarea datelor introduse de utilizator în formular.
ţintă	_gol _de sine _mamă _top nume cadru	Cu atributul, îi spunem browserului unde să arate răspunsul primit după trimiterea formularului (filă, fereastra curentă sau cadru). Valoarea implicită este _self - afișează răspunsul în fereastra curentă.

Exemplu de utilizare

Nume:
Nume de familie: „Introduceți numele de familie”>
Om Femeie
Despre mine:
Sub 18
18 până la 35
Peste 35
Căsătorit
Acolo e o pisica

Și așa, în ordine, ce am făcut în acest exemplu:

• Postat Două câmpuri text pe o singură linie ( ) pentru ca utilizatorul să-și introducă numele și prenumele. Nume unice atribuite acestor câmpuri cu atributul nume ( pentru transmiterea și procesarea corectă a formularului, asigurați-vă că specificați pentru fiecare element acest atribut). În plus, atributul valoare a fost setat la valorile implicite pentru aceste câmpuri (la completarea câmpurilor, valoarea acestui atribut va corespunde introducerii utilizatorului).
• Postat Două butoane radio ( ) pentru a selecta una dintr-un număr limitat de opțiuni. Rețineți că pentru butoanele radio trebuie să aibă același nume pentru a putea selecta o singură opțiune dintre cele oferite.
Pentru primul butonul radio am specificat atributul

Formulare în HTML este cel mai complex, dar pe de altă parte, poate cel mai interesant subiect în HTML.

Formularele web permit vizitatorilor site-ului să introducă anumite informații în câmpuri speciale, iar dezvoltatorul le poate primi într-o formă convenabilă pentru el.

Un exemplu de formular este o carte de oaspeți, un chestionar, test online. Formularele se completează la înregistrarea pe site, la plasarea comenzilor într-un magazin online etc.

Folosind HTML, puteți crea structura unui formular: câmpuri de text, meniuri, liste, butoane, casete de selectare și butoane radio. Adică acele elemente cu ajutorul cărora anumite informații sunt introduse în formular.

Datele introduse în formular sunt apoi trimise către server pentru procesare. Dar HTML este neputincios aici - un program sau un script care este atașat la acesta lucrează deja la procesarea formularului. Astfel de programe sunt de obicei scrise limbajul php sau javascript.

Atributele formularului - etichetă

Pot exista mai multe formulare pe o pagină web ( atât cât are nevoie dezvoltatorul). Fiecare dintre ele începe cu eticheta și se termină cu o etichetă de închidere .

Atributul de acțiune este necesar pentru orice formular - specifică adresa fișierului care servește formularul ( prelucrează datele introduse în acesta).

Atributul method specifică modul în care este trimis conținutul formularului. Există două metode - GET și POST. Acum nu are sens să ne aprofundăm în acești parametri, deoarece subiectul trimiterii de informații folosind metodele GET și POST se referă la limbaje de procesare a datelor ( de exemplu, PHP). Este suficient să știți că este metoda de transfer de date POST care este folosită în majoritatea cazurilor în formulare.

atributul numelui etichetei

este opțională. Dar dacă există mai multe formulare în document, atunci fiecare dintre ele trebuie să fie identificată cumva de către handler. Prin urmare, prezența atributului nume în acest caz este necesară - stabilește în mod unic numele formularului.

De asemenea, puteți seta codificarea datelor de intrare - atributul accept-charset este responsabil pentru acest lucru și, de asemenea, folosind atributul țintă, definiți fereastra în care va fi afișat rezultatul procesării formularului trimis ( într-o fereastră nouă sau curentă).

Dar eticheta în sine nu are sens, deoarece formularul trimite date care trebuie mai întâi introduse undeva!

Introducere a datelor. Câmpuri de formular - etichetă

Etichetă aceasta este cea mai comună etichetă în formulare. Este conceput pentru a crea diverse elemente care servesc la introducerea datelor în formular: acestea sunt câmpuri de text, butoane, casete de selectare, butoane radio.

tipul este atributul principal al etichetei . Setează tipul câmpului ( element) formează:

Valoare de atribut tip="..."	Rezultat	Descriere
		Un câmp de text cu o singură linie pentru introducerea textului. Atributul size specifică lățimea câmpului în caractere.
		Câmp text pentru introducerea unei parole. Se stabilește atributul maxlength suma maxima caractere care pot fi introduse
		Intrerupator. Puteți alege o singură variantă dintre cele oferite. Atributul verificat definește un câmp pre-verificat.
		Caseta de bifat. Sunt disponibile mai multe opțiuni. Atribut verificat definește un câmp pre-verificat.
		Buton. Atributul value setează eticheta butonului.
		Butonul de resetare. Returnează câmpurile formularului la forma lor originală. Resetați datele introduse.
		Buton pentru trimiterea datelor introduse.
		Câmp pentru introducerea numelui fișierului de trimis.
		Buton imagine. De asemenea, servește la trimiterea datelor către server. Atributul src specifică adresa fișierului imagine.
		Câmp ascuns - invizibil pentru utilizator.

Listă derulantă - etichete Și

Etichetă

la fel ca eticheta servește la colectarea informațiilor - creează o listă din care pot fi selectate unul sau mai multe elemente. Fiecare element corespunde unei valori, care este trimisă serverului pentru procesare.

Aspectul listei create depinde de valoarea atributului dimensiune: cu dimensiune= "1" ( valoare implicită) lista va fi drop-down.

O valoare diferită a atributului dimensiune va corespunde numărului de elemente din listă afișate. De exemplu, cu size= "3" , trei elemente vor fi vizibile. Pentru a vedea restul articolelor din listă ( dacă există) ar trebui să utilizați bara de defilare verticală, care este adăugată automat.

În mod implicit, poate fi selectat un singur element din listă. Adăugarea atributului multiplu la o etichetă vă permite să selectați mai multe elemente din listă folosind mouse-ul și tastele Ctrl și Shift.

Dacă atributul multiplu este prezent, toate sau o parte din elementele listei vor fi afișate ( in functie de browser) cu excepția cazului în care atributul dimensiune este setat la un anumit număr de elemente vizibile.

Elementul necesar al listei derulante este eticheta

. Se află în interiorul etichetei și creează fiecare element din listă.

Folosind atributul nume al etichetei listei primește un nume și folosind atributul value al etichetei elementului de listă i se atribuie o valoare. Astfel, o pereche „nume=valoare” este trimisă către server - numele listei și valoarea elementului/elelor selectate.

Atributul etichetei selectat

definește un element din listă preselectat, iar atributul dezactivat blochează elementul din listă - nu poate fi selectat.

Direcția cardinală este una dintre cele patru direcții principale:

Nord
Sud
Vest
Est

7 minuni ale lumii!

Piramida lui Keops
Grădinile Suspendate ale Babilonului
Statuia lui Zeus din Olimpia
Templul lui Artemis din Efes
mausoleul din Halicarnas
Colosul din Rhodos
farul alexandrin

Câmp text cu mai multe linii - etichetă </h3> <p>Etichetă <textarea>creează un câmp text cu mai multe linii. Este permis să se facă întreruperi de linie în el, care sunt salvate la transmiterea datelor către handler.</p> <p>atributul numelui etichetei <textarea>este obligatoriu - cu ajutorul câmpului său de text i se atribuie un nume.</p> <p>Atributul dezactivat dezactivează câmpul - conținutul câmpului nu poate fi modificat și nu este disponibil. Atributul readonly indică faptul că câmpul este doar pentru citire - utilizatorul nu are capacitatea de a edita conținutul, dar este disponibil - poate fi selectat și, de exemplu, copiat.</p> <p>Puteți seta lățimea câmpului de text în caractere și înălțimea câmpului în rânduri folosind atributele cols și, respectiv, rânduri.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Dacă conținutul câmpului depășește dimensiunea acestuia, va apărea un glisor.</span>

Dacă conținutul câmpului depășește dimensiunea acestuia, va apărea un glisor.

Exemplu de utilizare a formularelor

Acum să vedem cum funcționează formularul.

Formular de comandă video cu instrucțiuni:

Numele dumneavoastră: *

Comanda dumneavoastră:

Tutorial video HTML
Tutorial video CSS
Tutorial video PHP

Selectați media:

CD

DVD

USB Flash

Email-ul tau: *

Adresa ta: *

Descriere

Etichetă

configurează un formular pe o pagină web. Formularul este destinat schimbului de date între utilizator și server. Sfera de aplicare a 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.

Pentru a trimite formularul la server se folosește butonul Trimite, același lucru se poate realiza apăsând tasta Enter din cadrul formularului. Dacă butonul Trimitere nu este prezent în formular, tasta Enter simulează utilizarea acestuia.

Când formularul este trimis la server, controlul datelor este transferat programului specificat de atributul de acțiune al etichetei . În prealabil, browserul pregătește informații sub forma unei perechi „nume=valoare”, unde numele este determinat de atributul nume al etichetei , iar valoarea este introdusă de utilizator sau setată în câmpul implicit al formularului. 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&page=5

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

Permis în interiorul recipientului puneți alte etichete, în timp ce formularul în sine nu este afișat în niciun fel pe pagina web, sunt vizibile doar elementele sale și rezultatele etichetelor imbricate.

Sintaxă

...

Atribute

Setează codificarea în care serverul poate primi și procesa date. Adresa programului sau documentului care prelucrează datele din formular. Activează completarea automată a câmpurilor de formular. Cum sunt codificate datele din formular. Metoda protocolului HTTP. Numele formularului. Anulează validarea încorporată a datelor din formular pentru intrare validă. Numele ferestrei sau cadrul unde handlerul va încărca rezultatul returnat.

Etichetă de închidere

Necesar.

HTML5 IE Cr Op Sa Fx

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

Ofițeri
sistem de operare
Muște mari în dungi

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Vizualizarea elementelor de formular în fereastra browserului

O zi bună iubitorilor de dezvoltare web și celor care vor să-și facă propriul site. Înainte de asta, toate publicațiile mele erau dedicate principalelor elemente ale limbajului, modului de a crea diverse obiecte de conținut, formatării, structurării acestora etc. După ce stăpâniți subiectele anterioare, puteți crea deja un site destul de bun. Cu toate acestea, ar fi incomplet fără subiectul de astăzi: „Crearea de formulare în html”.

Această secțiune a limbii este foarte importantă. Prin urmare, acordați o atenție deosebită studierii acestuia, altfel resursa web pe care ați creat-o nu va fi lansată în producție. Astfel, după ce ai citit articolul, vei ști de ce trebuie să folosești formulare, cu ce etichete sunt create și vei putea, de asemenea, să încerci exemple concrete în practică. Să începem!

Ce este forma și cum funcționează

Formă- acesta este unul dintre cele mai importante obiecte, care este conceput pentru a face schimb de date de informații între server și utilizator.

Mai simplu spus, dacă doriți să creați un magazin online cu posibilitatea de a comanda produse pe site, să solicitați înregistrarea pe o resursă web și să lucrați cu conturile sau să oferiți clienților feedback de la managerii companiei, atunci nu vă puteți lipsi de formulare.

Formularul este setat folosind un element special al limbajului html

.

Rețineți că un document cu cod poate conține mai multe declarații de etichetă , cu toate acestea, o singură cerere poate fi trimisă către server pentru prelucrarea datelor. De aceea, informațiile pe care utilizatorul le introduce în câmpurile rezervate pentru aceasta și se referă la diferite formulare nu ar trebui să fie dependente. De asemenea, nu este permisă cuibărirea formelor una în alta.

Pentru cei care sunt nerăbdători și dornici să arunce o privire rapidă la vizualizarea codului, am atașat un exemplu simplu de utilizare a unui panou cu un câmp de text pentru o parolă cu un buton:

1 2 3 4 5 6 7 8 9 10 11 12

S-ar putea să nu fie foarte clar acum ce și cum interacționează în acest mic program, dar vă garantez că, după ce ați citit întregul articol, veți putea crea aplicații de multe ori mai dificile.

Trimiterea datelor pe partea serverului

Pentru a trimite informațiile tastate (sau selectate) în caseta de dialog, trebuie să utilizați mecanismul standard - Buton de trimitere.

Codul pentru această metodă arată astfel:

Când rulați linia prezentată, va fi afișat un buton cu inscripția: „Trimite”.

O altă modalitate de a trimite date către server este să apăsați tasta Enter din caseta de dialog.

După confirmarea trimiterii informațiilor specificate, acestea nu sunt trimise imediat la server. În primul rând, este procesat de browser, ducând la forma „nume = valoare”.

Parametrul atribut este responsabil pentru nume tip etichetă , iar pentru valoare - datele introduse de utilizator. Apoi, șirul convertit este transmis handler-ului, care este cel mai adesea setat în atribut acțiune element

.

Parametrul de acțiune în sine nu este necesar și, în unele cazuri, nu este deloc necesar. De exemplu, dacă o pagină de site este scrisă folosind php sau js, atunci procesarea are loc pe pagina curentă și nu sunt necesare link-uri.

Pentru o mai bună înțelegere a întregului tablou al funcționării site-ului, aș dori să adaug că pe server, lucrul cu date este deja efectuat în alte limbi. Astfel, limbajele serverului sunt: ​​Python, php, limbaje asemănătoare C (C#, C etc.), Java și altele.

Acum aș vrea să mă opresc și să vorbesc mai mult despre element . În termeni simpli, atunci necesare pentru a crea câmpuri de text, butoane radio, diverse butoane, câmpuri ascunse, casete de selectare și alte obiecte.

Eticheta nu trebuie să fie asociată , cu toate acestea, dacă trebuie să procesați înregistrările utilizatorilor sau să le introduceți, de exemplu, într-o bază de date, atunci nu vă puteți lipsi de un container.

Principalele atribute ale acestui element de limbaj de marcare hipertext sunt:

• Text- creează un câmp de text;
• Trimite– creează un buton pentru trimiterea datelor către server;
• Imagine- responsabil pentru butonul cu poza;
• resetare– setează butonul pentru ștergerea formularului;
• Parola– setează un câmp de text special pentru parole;
• Caseta de bifat– responsabil de câmpurile cu steaguri;
• Radio– este responsabil pentru câmpurile cu alegerea unui element;
• buton- creează un buton;
• Ascuns– folosit pentru câmpuri ascunse;
• Fişier– setează câmpul responsabil pentru trimiterea fișierelor.

Metode de transfer de informații

Există 2 moduri de a transmite datele utilizatorului către server: obțineȘi post. Aceste metode efectuează aceeași acțiune, dar diferă semnificativ unele de altele. Prin urmare, înainte de a sublinia oricare dintre ele, să ne familiarizăm cu caracteristicile lor.

	post	obține
Dimensiunea documentelor transmise	Limitat la partea serverului.	Maxim - 4 KB.
Cum să afișați informațiile trimise	Disponibil numai atunci când este vizualizat prin extensii de browser sau alte produse software speciale.	Imediat disponibil pentru toată lumea.
Utilizarea marcajelor	Nu există opțiune de marcare, deoarece solicitările nu sunt repetate (toate paginile leagă la aceeași adresă).	Orice pagină cu o solicitare poate fi marcată și accesați-o după un timp.
stocarea în cache	Pe baza paragrafului anterior, toate cererile sunt pe o singură pagină.	Fiecare pagină poate fi memorată în cache separat.
scop	Folosit pentru a trimite fișiere mari (cărți, imagini, videoclipuri etc.), mesaje, comentarii.	Excelent pentru a căuta valorile solicitate pe o resursă web sau pentru a trimite mesaje text scurte.

Pentru a specifica care dintre cele două metode de transfer de date să funcționeze cu browserul, în element utilizați parametrul furnizat metodă(De exemplu, method="post").

Să luăm în considerare al doilea exemplu. Să creăm un formular în care trebuie să introduceți datele personale (numele și prenumele, data nașterii) și să veniți cu o parolă. După ce toate acestea sunt trimise la server folosind metoda post.

Introduceți datele dvs. personale!

De exemplu, pentru a introduce o dată, există comutatoare pentru numărul fiecăruia dintre parametri (zi, lună și an), precum și un panou derulant cu calendarul în sine, pentru confort.

Crearea unui panou de înregistrare

Etichetele și atributele principale au fost acoperite. Acesta este motivul pentru care este timpul să creați un formular de înregistrare cu drepturi depline, folosind marcarea în stil CSS și validarea datelor de intrare. Desigur, nu vom putea vedea cum serverul funcționează cu ei, dar vom asigura designul și detaliile importante.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

inregistrare pe site Nume: Nume de familie: E-mail: Parola: Repetați parola:

inregistrare pe site

Pentru o lucrare corectă ulterioară în serviciul nostru, vă rugăm să introduceți datele adevărate!

Nume:

Nume de familie:

E-mail:

Parola:

Repetați parola:

Vă sfătuiesc să salvați acest cod de program într-un document cu extensia .html și codificare utf-8 și să îl deschideți pe acesta din urmă într-o fereastră de browser. Înainte să apară în toată gloria lui panoul pentru înregistrare cu câmpuri pentru introducerea numelui, prenumelui, e-mailului și parolei cu repetare. Observați că atunci când pagina începe, cursorul este imediat poziționat în prima casetă de text. Această tehnică se realizează prin atribut autofocus.

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

Formularele web constau dintr-un set de câmpuri de text, butoane, liste și alte controale care sunt activate printr-un clic de mouse. Formularele transmit din punct de vedere tehnic datele de la utilizator la serverul de la distanță.

Limbajele de programare web sunt folosite pentru a primi și procesa date de formular, cum ar fi PHP, Perl.

Înainte de apariția HTML5, formularele web erau o colecție de mai multe elemente , terminand cu un buton . A fost nevoie de mult efort pentru a modela formularele în diferite browsere. În plus, formularele necesitau utilizarea JavaScript pentru a valida datele introduse și, de asemenea, nu aveau anumite tipuri de câmpuri de intrare pentru specificarea informațiilor de zi cu zi, cum ar fi datele, adresele de e-mail și adresele URL.

Formulare HTML5 a rezolvat majoritatea acestor probleme comune datorită prezenței de noi atribute, oferind capacitatea de a schimba aspectul elementelor de formă prin CSS3.

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

Crearea unui formular HTML5

1. Articol

Baza oricărei forme este elementul .... Nu oferă intrare deoarece este un container, ținând împreună toate controalele formularului − câmpuri. Atributele acestui element conțin informații care sunt comune tuturor câmpurilor de formular, astfel încât câmpurile care sunt combinate logic trebuie incluse într-un singur formular.

Tabelul 1. Atributele etichetei

Atribut	Sens/descriere
accept-charset	Valoarea atributului este un spațiu separat lista de codificări de caractere, care va fi folosit pentru a trimite formularul, de exemplu, .
acțiune	Atribut obligatoriu, care specifică adresa URL a handler-ului de formular de pe serverul căruia sunt trimise 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 prelua valorile implicite. Dacă toată munca va fi efectuată pe partea clientului prin scripturi JavaScript, atunci atributul de acțiune poate fi setat la # . De asemenea, vă puteți asigura că formularul completat de vizitator ajunge la e-mailul dvs. Pentru a face acest lucru, trebuie să faceți următoarea intrare:
completare automată
enctype	Folosit pentru a indica MIMA-tipul de date trimise cu formularul, de exemplu, enctype="multipart/form-data" . Specificat numai dacă method="post" . application/x-www-form-urlencoded este tipul de conținut implicit, ceea ce indică 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 formă hexazecimală 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 de formular separat. text/plain - indică faptul că textul simplu (non-html) este transmis.
metodă	Specifică modul în care sunt trimise datele din formular. Metoda get trimite date către server prin bara de adrese a browserului. Când se formează 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 adăugate la adresa serverului după semn? și sunt separate prin & . Toate caracterele speciale și literele non-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ă se presupune că un fișier va fi trimis împreună cu formularul, această metodă nu va funcționa. Metoda de postare este folosită pentru a trimite cantități mari de date, precum și informații confidențiale și parole. Datele trimise prin această metodă nu sunt vizibile în antetul URL-ului deoarece sunt conținute în corpul mesajului.
Nume	Seturi numele formularului, care va fi folosit pentru a accesa elemente de formular prin intermediul scripturilor, de exemplu, name="opros" .
nuvalidate	Dezactivează validarea în butonul de trimitere a formularului. Atributul este folosit fără valoare
ţintă	Specifică fereastra către care vor fi trimise informațiile: _blank - fereastră nouă _self este același cadru _parent - cadru părinte (dacă există, dacă nu, atunci la cel curent) _top este fereastra de nivel superior în raport cu cadrul dat. Dacă apelul nu este dintr-un cadru copil, atunci în același cadru.

2. Gruparea elementelor de formular

Element

...

este conceput pentru a grupa elemente legate între ele, împărțind astfel forma în fragmente logice.

Fiecărui grup de elemente i se poate da un nume folosind elementul

, care vine imediat după etichetă

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

. De exemplu, dacă elementul

informațiile de contact sunt stocate:

Informații de contact

Nume *

E-mail

Orez. 2. Gruparea elementelor de formular cu

Tabelul 2. Atributele etichetei

Atribut	Sens/descriere
dezactivat	Dacă atributul este prezent, atunci grupul de elemente de formular asociate conținute în container , dezactivat pentru completare și editare. Folosit pentru a restricționa accesul la anumite câmpuri de formular care conțin date introduse anterior. Atributul este utilizat fără a specifica o valoare − .
formă	în același 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, care va fi folosit pentru a se referi la elemente din JavaScript sau pentru a se referi la datele din formular după ce formularul a fost completat și trimis. Este analog cu atributul id.

3. Creați câmpuri de formular

Element creează majoritatea câmpurilor de formular. Atributele unui element diferă în funcție de tipul de câmp pe care elementul este folosit pentru a-l crea.

Cu stilurile CSS, puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și puteți adăuga chenare, culoare de fundal și o imagine 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. Specificat 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 descă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 reținerea valorilor introduse în câmpul de text și înlocuirea lor automată pentru introducerea ulterioară: pornit - înseamnă că câmpul nu este protejat, iar valoarea acestuia poate fi salvată și preluată, off - dezactivează completarea automată pentru câmpurile formularului.
autofocus	Vă permite să vă asigurați că în formularul în curs de încărcare, unul sau altul câmp de intrare are deja focalizarea (a fost selectat), fiind gata pentru introducerea unei valori.
verificat	Atributul verifică dacă caseta de selectare este bifată în mod implicit la încărcarea paginii pentru câmpurile de tip type="checkbox" și type="radio" .
dezactivat
formă	Valoarea atributului trebuie să fie egală cu atributul id al elementului în același document. Specifică unul sau mai multe formulare cărora le aparține acest câmp de formular.
formare	Specifică adresa URL a fișierului care va prelucra datele introduse în câmpurile la trimiterea formularului. Setați numai pentru câmpurile de tip type="submit" și type="image" . Atributul suprascrie 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 către server. Supliniază valoarea atributului enctype al formularului. Setați numai pentru câmpurile de tip type="submit" și type="image" . Opțiuni: application/-x-www-form-urlencoded este valoarea implicită. Toate caracterele sunt codificate înainte de trimitere (spațiile sunt înlocuite cu un caracter +, caracterele speciale sunt convertite în valori ASCII HEX) multipart/form-data - caracterele nu sunt codificate text/plain - spațiile sunt înlocuite cu un caracter +, iar caracterele speciale nu sunt codificate.
formmetod	Atributul specifică metoda pe care browserul o va folosi pentru a trimite datele formularului către server. Setați numai pentru câmpurile de tip type="submit" și type="image" . Supliniază valoarea atributului metodei formularului. Opțiuni: get este valoarea implicită. Datele din formular (perechea nume/valoare) sunt adăugate la adresa URL și trimise la server: URL?name=value&name=value datele post - formular sunt trimise ca o 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	Specifică unde să se afișeze răspunsul primit după trimiterea formularului. Setați numai pentru câmpurile de tip type="submit" și type="image" . Supliniază valoarea atributului țintă al formularului. _parent - Încarcă răspunsul în 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, cum ar fi type="image" , de ex. . Este recomandat să setați atât înălțimea cât și lățimea câmpului în același timp.
listă	Este o referire la un element
max	Vă permite să limitați intrarea permisă de date numerice la valoarea maximă, valoarea atributului poate conține un număr întreg sau fracționar. Se recomandă ca acest atribut să fie utilizat împreună cu atributul min. Funcționează cu următoarele tipuri de câmpuri: număr , interval , dată , datetime , datetime-local , luna , ora și săptămână .
lungime maxima	Atributul specifică numărul maxim de caractere introduse în câmp. Valoarea implicită este de 524288 de caractere.
min	Vă permite să limitați intrarea numerică permisă la o valoare 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. Este analog cu atributul id.
model	Vă permite să definiți utilizarea expresie uzuala sintaxa datelor care ar trebui permise într-un anumit câmp. De exemplu, pattern="(3)-(3)" - parantezele pătrate stabilesc intervalul de caractere permise, în acest caz orice litere mici, numărul dintre paranteze indică faptul că sunt necesare trei litere mici, urmate de o liniuță, urmate cu trei cifre în intervalul de la 0 la 9.
substituent	Conține textul care este afișat în câmpul de introducere până când este completat (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ă câmpul 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 vizibilă a câmpului în caractere. Valoarea implicită este 20. Funcționează cu următoarele tipuri de câmpuri: text , search , tel , url , email , and password .
src	Specifică adresa URL a unei imagini de utilizat ca buton de trimitere pentru datele din formular. Specificat doar pentru domeniu .
Etapa	Folosit pentru elementele care acceptă introducerea 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ă un câmp de introducere într-o casetă de selectare care poate fi bifată sau șters, de ex. eu am o mașină
	culoare - generează selecționatori de culori în browserele acceptate, permițând utilizatorilor să selecteze 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 o dată și o oră separate printr-o litera engleză majusculă T folosind modelul dd.mm.yyyy 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. Alege fișierul:
	ascuns - Ascunde controlul care nu este afișat de browser și împiedică utilizatorul să modifice valorile implicite.
	imagine - creează un buton, permițându-vă să inserați o imagine în loc de text pe buton.
	luna - Permite utilizatorului să introducă numărul anului și al lunii folosind modelul aaaa-mm.
	număr - destinat introducerii valorilor întregi. Atributele sale min , max și step setează valorile superioare, inferioare și, respectiv, treapta dintre valori. Aceste atribute sunt presupuse pentru toate elementele care au indicatori numerici. Valorile lor implicite depind de tipul elementului. Specificaț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 de formular din introducerea utilizatorului.
	căutare - denotă un câmp de căutare, în mod implicit câmpul de intrare are o formă dreptunghiulară. Căutare:
	trimite - creează un buton standard care este activat printr-un clic de mouse. Butonul colectează informații din formular și le trimite spre procesare.
	text - creează câmpuri de text într-un formular prin afișarea unui câmp de text cu o singură linie pentru introducerea textului.
	timp - vă permite să introduceți ora într-un format de 24 de ore folosind modelul hh:mm. În browserele compatibile, apare ca un control numeric de intrare cu o valoare reglabilă de mouse și acceptă numai valori de timp. Specificați ora:
	url - câmpul este destinat specificarii adreselor URL. Pagina principală:
	săptămână - Instrumentul de index corespunzător permite utilizatorului să selecteze o săptămână din an, după care va oferi introducerea datelor în format nn-aaaa. În funcție de an, numărul de săptămâni poate fi 52 sau 53. Specificați săptămâna:
valoare	Specifică textul afișat pe un buton, casetă sau text 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 câmpuri de text mari. Textul afișat ca valoare originală este plasat în interiorul etichetei. Dimensiunile câmpului sunt stabilite folosind atributele cols - dimensiuni orizontale, rânduri - dimensiuni verticale. Înălțimea câmpului poate fi setată cu proprietatea înălțime. Toate dimensiunile sunt calculate pe baza mărimii unui caracter dintr-un font monospațiu.

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 inițial 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>în același document. Specifică unul sau mai multe formulare cărora le aparține acest câmp 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 câmpului de text.</td> </tr><tr><td>substituent</td> <td>Specifică un scurt indiciu text care descrie valoarea de intrare așteptată.</td> </tr><tr><td>numai citire</td> <td>Dezactivează posibilitatea de a edita conținutul unui câmp.</td> </tr><tr><td>necesar</td> <td>Afișează un mesaj care afirmă că câmpul 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>Specifică 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 folosește hard, atunci trebuie specificată valoarea atributului cols.</td> </tr></table><h3>5. Listă derulantă</h3> <p>Listele fac posibilă aranjarea compactă a unui număr mare de articole. 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, o casetă listă afișează primul său element.</p> <p>Elementele sunt folosite pentru a adăuga articole în listă. <option>...</option>, care se află în interior <select> .</p> <p>Elementul este folosit pentru a organiza liste. <optgroup>...</optgroup>, care creează titluri în liste.</p> <p>Pentru liste, puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și să adăugați chenare, culori de fundal și imagini 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 atunci când pagina se încarcă.</td> </tr><tr><td>dezactivat</td> <td>Dezactivează lista derulantă.</td> </tr><tr><td>formă</td> <td>Specifică forma căreia îi aparține această listă. ID-ul formularului este specificat ca valoare a atributului.</td> </tr><tr><td>multiplu</td> <td>Vă permite să selectați unul sau mai multe elemente apăsând și apăsată tasta Ctrl în timp ce selectați.</td> </tr><tr><td>Nume</td> <td>Specifică 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 dintr-o listă derulantă înainte de a trimite formularul.</td> </tr><tr><td>mărimea</td> <td>Setează numărul de elemente din listă vizibile pe ecran în același timp. Dacă numărul de elemente din listă depășește numărul setat, va apărea o bară de defilare. Valoarea atributului este dată ca un întreg pozitiv.</td> </tr></table><h3>6. Legende pentru câmpurile de formular</h3> <p>Etichetele pentru elementele de formular sunt create folosind elementul <label>...</label>. Există două moduri de a grupa etichetele și câmpurile. Dacă câmpul se află în interiorul unui element <label>, atunci nu trebuie specificat atributul for.</p><p> <!-- с указанием атрибута for --> <label for="comments">Când ai zburat ultima dată într-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

browsere diferite trebuie să specificați 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 buton atunci când pagina se încarcă.
dezactivat	Dezactivează butonul, făcându-l de neclimat.
formă	Indică unul sau mai multe formulare cărora le aparține acest buton. Valoarea atributului este identificatorul formularului corespunzător.
formare	Valoarea atributului conține adresa URL a handler-ului de date din formular trimis atunci când se face clic pe butonul. Doar pentru un buton precum type="submit" . Supliniază valoarea atributului de acțiune specificat pentru element .
formenctype	Setează tipul de codificare al datelor din formular înainte de a le trimite la server când faceți clic pe butoane precum type="submit" . Supliniază valoarea atributului enctype specificat pentru element . Valori posibile: application/x-www-form-urlencoded este valoarea implicită. Toate caracterele vor fi codificate înainte de trimitere. multipart/form-data - caracterele nu sunt codificate. Este folosit când fișierele sunt încărcate folosind un formular. text/plain - caracterele nu sunt codificate, iar spațiile sunt înlocuite cu un caracter +.
formmetod	Atributul specifică metoda pe care browserul o va folosi pentru a trimite formularul. Supliniază valoarea atributului metodei specificat pentru element . Specificat numai pentru butoane precum type="submit" . Valori posibile: get - datele din formular (perechea nume/valoare) sunt adăugate la url și trimise la server. Aceasta metoda are limite 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. Specificat numai pentru butoane precum type="submit" .
formtarget	Atributul specifică în ce fereastră se va afișa rezultatul după trimiterea formularului. Specificat numai pentru butoane precum type="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 în cadrul părinte _top - încarcă răspunsul pe ecran complet framename - Încarcă răspunsul într-un cadru cu numele specificat.
Nume	Setează numele butonului, valoarea atributului este text. Folosit pentru a face referire la datele din formular după ce acesta a fost trimis sau pentru a face referire la butoanele date în JavaScript.
tip	Specifică tipul butonului. Valori posibile: buton - buton pe care se poate face clic resetare - buton de resetare, returnează valoarea inițială trimite este 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 constructul , iar comutatorul - folosind .

Casetele de selectare, spre deosebire de butoanele radio, pot avea mai multe casete de selectare într-un singur formular. Dacă atributul bifat este specificat pentru casetele de selectare, atunci când pagina se încarcă, câmpurile de formular corespunzătoare vor avea deja casetele de selectare bifate.

Element utilizat la implementarea selecției folosind butoanele radio și casetele de selectare. Puteți selecta elementul dorit pur și simplu făcând clic pe textul asociat acestuia. Pentru aceasta trebuie să plasați în interiorul elementului .