Exemplu de formular html. Formulare în HTML

Descriere

Etichetă

Permis în interiorul recipientului

Sintaxă

Atribute

Setează codificarea în care serverul poate primi și procesa date.

Necesar.

Orez. 1. Vedere a elementelor de formular într-o fereastră de browser

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

Pentru a determina cărui element de formular îi aparține eticheta curentă, trebuie să utilizați atributul for al etichetei . Valoarea atributului for trebuie să se potrivească cu valoarea atributului global al elementului de formular căruia i se va aplica eticheta. Atributul for nu poate fi folosit dacă elementul va fi în interiorul elementului .

Să ne uităm la un exemplu de utilizare:

În acest exemplu noi:

• Interior primul forme:
  • Postat două butoane radio ( ) pentru a selecta una dintr-un număr limitat de opțiuni. Rețineți că pentru butoanele radio din același formular trebuie specificat același nume, am indicat valori diferite. Pentru primul checked , care specifică faptul că elementul trebuie preselectat atunci când pagina se încarcă (în în acest caz, butonul radio cu valoarea da). În plus, am specificat atribute globale pentru butoanele radio, care definesc un identificator unic pentru element.
  • Am plasat două elemente , care definesc etichetele de text pentru câmpurile noastre de text. Rețineți că am folosit atributul for pentru a determina cărui element de formular îi aparține eticheta curentă. Valoarea atributului for corespunde valorii atributului global al butonului radio de care avem nevoie.
• Interior doilea forme:
  • Postat două butoane radio ( ) pentru a selecta una dintr-un număr limitat de opțiuni. Pentru doilea Pentru butoanele radio, am specificat un atribut bifat, care indică faptul că elementul trebuie preselectat la încărcarea paginii (în acest caz, un buton radio cu valoarea nr ). În plus, am specificat valori unice pentru butoanele radio din formular și aceleași nume.
  • Am plasat două elemente , ne-am plasat butoanele radio în interiorul lor. Spre deosebire de metoda anterioară, nu este nevoie să specificați atribute globale (identificatorul pentru element) pentru butoanele radio și să utilizați atributul for pentru etichetele de text pentru a face referire la acestea (a face o legare).

În browser, ambele opțiuni (metode) pentru utilizarea etichetelor de text arată identice:

Indicator pentru câmpurile de introducere

Să ne uităm la un exemplu de utilizare:

În acest exemplu, am specificat pentru element cu text de tip (un câmp de text cu o singură linie) și parola de tip (câmp de parolă), un indiciu de text pentru utilizator (atributul substituent) care descrie valoarea așteptată pentru intrare.

Rezultatul exemplului nostru:

Întrebări și sarcini pe această temă

Înainte de a trece la următorul subiect, finalizați sarcina de practică:

• Folosind cunoștințele acumulate, creați următorul formular de comandă:

O avertizare: în câmpurile în care se așteaptă selecția, ar trebui să fie posibilă selectarea făcând clic pe text și nu doar pe elementul în sine.

După ce finalizați exercițiul, inspectați codul paginii deschizând exemplul într-o fereastră separată pentru a vă asigura că ați făcut totul corect.

Etichete HTML care definesc formularele HTML pe site

Creăm site-uri web și pagini individuale pe Internet pentru a comunica cu vizitatorii.

Formulare HTML sunt folosite pentru a înregistra vizitatorii site-ului, pentru sondaje interactive și pentru vot, vă permit să trimiteți mesaje, să faceți achiziții și așa mai departe. HTML Formularul este creat cu un singur scop: colectarea și transmiterea ulterioară a informațiilor pentru prelucrare printr-un script software sau prin e-mail.

Exemplu de formular HTML | Conectați-vă la site

Etichete, atribute și valori

• - determinați forma.
• name="" - definește numele formularului.
• method="" - definește metoda de trimitere a datelor din formular. Valori: „get” (implicit) și „post” . Metoda „post” este adesea folosită, deoarece permite transferul unor cantități mari de date.
• action="" - definește adresa URL la care datele sunt trimise pentru prelucrare. În cazul nostru - enter_data.php ..
• - definiți elemente de formular precum butoane, comutatoare, câmpuri de text pentru introducerea datelor.
• type="text" - definește un câmp de text pentru introducerea datelor.
• type="parola" - definește un câmp pentru introducerea unei parole, cu textul afișat sub formă de asteriscuri sau cercuri.
• type="checkbox" - definește un buton radio.
• type="hidden" - definește un element de formular ascuns - folosit pentru a transmite Informații suplimentare la server.
• size="25" - lungimea câmpului de text în caractere.
• maxlength="30" - numărul maxim permis de caractere introduse.
• value="" - definește valoarea care va fi trimisă pentru procesare dacă se aplică butoanelor radio sau comutatoarelor. Valoarea acestui atribut ca parte a unui câmp de text sau a unui buton va fi afișată ca, de exemplu, Vasya sau Login în exemplul de mai sus.

Exemplu de formular HTML | Comentarii pe site

Etichete, atribute și valori

• action="http://site/comments.php" - definește adresa URL la care vor fi trimise datele din formular.
• id="" - definește numele și identificatorul elementului de formular.
• name="" - definește numele elementului de formular.
• - definiți un câmp de text ca parte a formularului.
• cols="" - determină numărul de coloane din câmpul text al formularului.
• rows="" - definește numărul de rânduri din câmpul de text al formularului.

Dacă între plasați textul, acesta va fi afișat în interiorul câmpului ca exemplu care poate fi îndepărtat cu ușurință.

Exemplu de formular HTML | Lista drop-down

Etichete, atribute și valori

• - definiți o listă cu poziții pentru selecție.
• size="" - determină numărul de poziții vizibile din listă. Dacă valoarea este 1, avem de-a face cu o listă derulantă.
• - determinați pozițiile (articolele) din listă.
• value="" - conține valoarea care va fi trimisă prin formular către adresa URL specificată pentru procesare.
• selected="selected" - evidențiază un element din listă ca exemplu.

Exemplu de formular HTML | Listă cu bară de defilare

Prin creșterea valorii atributului size="", obținem o listă cu o bară de defilare:

Pentru această opțiune, utilizați indicatorul multiple="multiple", care face posibilă selectarea mai multor poziții. Absența acestuia vă permite să selectați un singur articol.

Vezi suplimentar:

Formularele sunt concepute pentru a trimite date de la utilizator la serverul web. Formularele în HTML pot consta din câmpuri de text și zone de text, casete de selectare și butoane radio și liste derulante. Toate acestea sunt elemente de formă. Fiecare element servește pentru a transmite un anumit sens site-ului.
În esență, un formular HTML este o pagină web pe care vezi zone pentru introducerea informațiilor. După ce completați formularul și faceți clic pe Trimitere, informațiile din formular sunt împachetate și trimise către serverul web pentru procesare de către un script de pe partea serverului (fișier de gestionare). După procesare, o altă pagină web vă este returnată ca răspuns. Următoarea figură demonstrează clar cum funcționează formularul:

Nu este nimic dificil în a crea formulare HTML. Cel mai simplu mod de a vă face o idee despre formulare este să analizați puțin cod HTML și apoi să vedeți cum funcționează. Următorul exemplu arată sintaxa pentru crearea unui formular HTML simplu:

Exemplu: formular HTML simplu

• Încearcă singur »

Prima mea forma:
Nume:
Prenume:

Element

Formularele sunt inserate în paginile web folosind elementul . Acesta oferă un container pentru tot conținutul formularului, inclusiv elemente precum câmpurile de text și butoanele, precum și orice alte etichete HTML. Cu toate acestea, nu poate conține alt element .
Pentru a trimite formularul către server, folosiți butonul „Trimite”, același rezultat va fi obținut dacă apăsați tasta „Enter” în cadrul formularului. Dacă butonul „Trimite” nu este prezent în formular, tasta „Enter” poate fi folosită pentru a trimite.
Majoritatea atributelor elementului afectează prelucrarea formularului, nu designul acestuia. Cele mai comune dintre care sunt acţiuneŞi metodă. Atribut acţiune conține adresa URL la care vor fi trimise informațiile din formular pentru procesare de către server. Atribut metodă este metoda HTTP pe care browserele trebuie să o utilizeze pentru a trimite datele din formular.

Element

Aproape toate câmpurile de formular sunt create folosind elementul (din engleză input - input). Aspect element se modifică în funcție de valoarea atributului său tip:

Iată câteva valori ale atributelor tip:

Introducerea textului și a parolei

Unul dintre cele mai simple tipuri de elemente de formular este un câmp de text, conceput pentru a introduce text pe o singură linie. Acest tip introducerea textului este setată implicit și, prin urmare, este câmpul cu o singură linie care va fi afișat dacă uitați să specificați atributul tip. Pentru a adăuga un câmp de introducere a textului dintr-un rând într-un formular, ar trebui să fie în interiorul elementului înregistrează atributul tip cu valoare text:

Câmpul de introducere a parolei este un tip de câmp text obișnuit. Acceptă aceleași atribute ca și un câmp text cu o singură linie. Atribut nume setează numele câmpului de introducere a parolei care va fi trimis la server împreună cu parola introdusă de utilizator. Pentru a crea un câmp de parolă, trebuie să setați atributul parolei la tip(parolă (engleză) - parolă):

Un exemplu de creare a unui formular cu un câmp de parolă:

Exemplu: câmpul pentru parolă

• Încearcă singur »

Autentificarea dvs.:

Parolă:

Autentificarea dvs.:

Parolă:

Puteți utiliza atributul împreună cu acest atribut lungime maximă, a cărui valoare determină numărul maxim de caractere care pot fi introduse într-un șir dat. De asemenea, puteți seta lungimea câmpului de introducere folosind atributul dimensiune. În mod implicit, majoritatea browserelor limitează lățimea unui câmp de text la 20 de caractere. Pentru a controla lățimea elementelor de formulare noi, în loc de un atribut dimensiune, vă recomandăm să utilizați foi de stil în cascadă (CSS).
Atribut valoare specifică valoarea care este afișată implicit în câmpul de text atunci când formularul este încărcat. Introducând o valoare implicită în câmp, puteți explica utilizatorului exact ce date și în ce format doriți să introducă utilizatorul aici. Acesta este ca o mostră, pentru că este mult mai convenabil pentru utilizator să completeze formularul, văzând un exemplu în fața lui.

Comutatoare (radio)

Element tip radio creează comutatoare care utilizează principiul logic „SAU”, permițându-vă să selectați doar una dintre mai multe valori: dacă selectați o poziție, atunci toate celelalte devin inactive. Sintaxa de bază a unui element de comutare este:

Atribut nume pentru comutatoare este necesar și joacă un rol important în combinarea mai multor elemente de comutator într-un grup. Pentru a combina butoanele radio într-un grup, trebuie să setați aceeași valoare a atributului numeși valoare de atribut diferită valoare. Atribut valoare setează valoarea butonului radio selectat pentru a fi trimis către server. Valoarea fiecărui element de buton radio trebuie să fie unică în cadrul grupului, astfel încât serverul să știe ce opțiune de răspuns a ales utilizatorul.
Prezența atributului verificat(din engleză - instalat) la elementul comutator indică care dintre opțiunile propuse ar trebui să fie selectată implicit la încărcarea paginii, dacă este necesar. Acest atribut poate fi setat doar pentru un element de buton radio din grup:

• Încearcă singur »

Câți ani ai?

1. sub 18 ani
2. de la 18 la 24
3. de la 25 la 35
4. mai mult de 35

Atributul de acțiune.

Principal pentru element

Fișierul de procesare se află pe server mytestserver.comîntr-un folder folderul de numeși numele scriptului de server care va procesa datele - obrabotchik.php. Toate datele pe care le-ați introdus în formularul de pe pagina web îi vor fi transferate. Extensia .php indică faptul că formularul specificat este procesat de un script scris în PHP. Managerul în sine poate fi scris într-o altă limbă, de exemplu ar putea fi limbajul de scripting Python, Ruby etc.
Este recomandabil să setați întotdeauna valoarea atributului acţiune. Dacă formularul ar trebui să transmită valori către aceeași pagină în care se află, furnizați un șir gol ca valoare a atributului acțiune: action="".

atributul metodei

Atribut metodă specifică modul în care informațiile ar trebui să fie transferate către server. Metoda de trimitere a formularului pe care o alegeți depinde de datele pe care doriți să le trimiteți împreună cu formularul. Volumul acestor date joacă un rol major aici. Cele mai populare sunt două metode de transfer a datelor sursă ale formularului dvs. din browser pe server: OBŢINEŞi POST. Metoda poate fi setată la oricare alegeți, iar dacă nu o specificați, va fi folosită cea implicită OBŢINE. Să luăm în considerare utilizarea fiecăruia dintre ele.

metoda POST

Metodă POST pachetele formează date și le trimite către server fără ca utilizatorul să observe, deoarece datele sunt conținute în corpul mesajului. Browser web, atunci când utilizați metoda POST trimite o cerere către server constând din anteturi speciale urmate de date de formular. Deoarece conținutul acestei solicitări este disponibil numai pentru server, metoda POST utilizate pentru a transfera date confidențiale, cum ar fi parolele, detaliile cardului bancar și alte informații personale ale utilizatorilor. Metodă POST potrivită și pentru trimiterea unor volume mari de informații, deoarece spre deosebire de metodă OBŢINE, nu are restricții privind numărul de caractere transmise.

metoda GET

După cum știți deja, sarcina principală a unui browser este să primească pagini web de la server. Deci, când folosești metoda OBŢINE, browserul dvs. preia pur și simplu pagina web așa cum o face întotdeauna. Metodă OBŢINE de asemenea, include datele formularului, dar le adaugă la sfârșitul adresei URL înainte de a trimite cererea către server. Pentru a înțelege cum funcționează metoda OBŢINE, să-l vedem în acțiune. Deschideți primul exemplu din această lecție (Exemplu: Formular HTML simplu) în Notepad (de exemplu Notepad++) și faceți o mică modificare a codului HTML: