Formulare HTML. Formulare HTML
Încearcă să trimită un formular pe server.
Preț
Dacă decideți să utilizați elemente pentru a crea butoane în formularul dvs., țineți cont de acest lucru: dacă există doar unul în interior, acel buton va fi tratat ca un buton de „trimitere”. Prin urmare, ar trebui să vă faceți un obicei din a indica în mod explicit ce buton este butonul de trimitere.
Buton de trimitere simpluSă începem prin a crea un formular cu un simplu buton de trimitere:
Să trimitem ceva text
Face asta:
Încercați să introduceți text în câmpul de text și apoi trimiteți formularul.
Odată ce perechea nume/valoare este trimisă, datele sunt trimise la server. În acest caz, linia va fi „text= text de utilizator" unde "usertext" este textul introdus de utilizator, codificat pentru salvare caractere speciale. Unde și cum sunt transferate datele depinde de configurație; Consultați Trimiterea datelor din formular pentru mai multe detalii.
Adăugați o comandă rapidă de la tastatură de trimitereComenzile rapide ale tastelor, numite și taste de acces și echivalente de tastatură, permit utilizatorului să declanșeze un buton folosind o tastă sau o combinație de taste de pe tastatură. Pentru a adăuga o combinație de taste la un buton de trimitere - la fel ca în orice lucru pentru care are sens, utilizați atributul cheie de acces global.
În acest exemplu, s este specificat ca cheie de acces (trebuie să apăsați s plus tastele modificatoare speciale pentru combinația browser/OS. Pentru a evita conflictele cu combinațiile de taste ale agentului utilizator, sunt folosite taste modificatoare diferite pentru tastele de acces decât pentru celelalte comenzi rapide de pe computerul principal. Informații suplimentare vezi sectiunea de acces.
Iată exemplul anterior cu cheia de acces a fost adăugată:
Să trimitem ceva text
De exemplu, în Firefox pentru Mac, apăsând Control - Opțiune - S apare butonul de trimitere, în timp ce Chrome pe Windows folosește Alt + S.
Problema cu exemplul de mai sus este că utilizatorul nu va ști care este cheia de acces! Acest lucru este valabil mai ales deoarece modificatorii sunt de obicei non-standard pentru a evita conflictele. Atunci când creați un site, asigurați-vă că includeți aceste informații într-un mod care să nu interfereze cu designul site-ului (de exemplu, oferind un link ușor accesibil care indică informații despre cheile de acces la site). Adăugarea unui tooltip la buton (folosind atributul title) poate fi de asemenea utilă, deși nu este solutie completaîn scopuri de accesibilitate.
Dezactivați sau activați butonul de trimiterePentru a dezactiva un buton de trimitere, setați-i pur și simplu atributul global dezactivat, de exemplu:
Puteți activa și dezactiva butoanele în timpul execuției, pur și simplu setând disabled la adevărat sau fals; în JavaScript, aceasta arată ca btn.disabled = true sau btn.disabled = false.
ExaminareButoanele de trimitere nu participă la verificarea constrângerilor; nu au o valoare reală de constrângere.
ExempleNoi am inclus exemple simple superior. Nu sunt multe de spus despre butoanele de trimitere. Motivul pentru acest tip de control este uneori numit „buton simplu”.
Zilele trecute a trebuit să implementez trimiterea datelor formularului către server (form submit), dar cu procesarea preliminară a evenimentului onsubmit al formularului. Totul ar fi bine dacă acest lucru s-ar putea face prin simplul clic pe butonul de trimitere, dar sarcina a fost puțin complicată de faptul că formularul trebuia trimis automat, și nu la cererea utilizatorului. În cazul meu - pe un cronometru.
Desigur, la trimiterea datelor către server, a fost necesar să se utilizeze Metoda JavaScript om form.submit() . Imaginează-ți surpriza mea când am descoperit că metoda de trimitere a datelor folosind butonul de trimitere și Funcționează JavaScript Metoda submit() a formularului este radical diferită.
Pentru a demonstra clar comportamentul acestor metode, voi oferi sursele și exemplele de lucru ale acestora.
Un exemplu de trimitere a datelor către server (postare) folosind un buton obișnuit și preprocesare la trimitere ar arăta astfel:
Trimite
cu acest cod HTML, comportamentul formularului va fi următorul: dacă faceți clic pe butonul „Trimite”, mai întâi va apărea o fereastră care vă avertizează despre trimiterea datelor către server, iar după ce faceți clic pe butonul „OK”, datele va fi trimis la server.
Ce se întâmplă dacă înlocuiți butonul de trimitere cu metoda JavaScript form.submit()?
Trimite
dar în acest caz, se va întâmpla același comportament ciudat al formularului - evenimentul onsubmit nu va funcționa, dar datele vor fi trimise la server.
După multe experimente, s-a stabilit că browserele nu respectă specificația HTML. Evenimentele sunt procesate numai prin acțiuni ale utilizatorului, nu prin acțiuni ale programului.
Ce spun specificațiile W3C și marii producători de browsere despre asta?
Microsoft are o descriere mai succintă, „Metoda de trimitere nu invocă handlerul de evenimente onsubmit”. (Metoda de trimitere nu declanșează evenimentul onsubmit).
Cum să ieși din această situație?
O soluție ar putea fi crearea unui buton de trimitere invizibil și apelarea metodei sale click(). Dar aceasta nu este o soluție foarte bună. Prin urmare, puteți conecta biblioteca jQuery și puteți scrie câteva rânduri de cod JavaScript pentru a genera în mod programatic evenimente.
$.fn.fireEvent = function(eventType) ( return this.each(function() ( if (document.createEvent) ( var event = document.createEvent("HTMLEvents"); event.initEvent(eventType, true, true); return !this.dispatchEvent(event); else (var event = document.createEventObject(); return this.fireEvent("on" + eventType, event) ));
Utilizare aceasta metoda foarte simplu. Folosind selectorul jQuery, găsim obiectul de care avem nevoie și apelăm metoda fireEvent(), trecându-i ca parametru numele evenimentului dorit, fără prefixul on.
$("myform").fireEvent("trimite");
Pe Internet, am găsit o altă soluție - folosind metoda trigger(), în loc de metoda fireEvent(), dar nici nu funcționează așa cum ar trebui, așa că nu o voi da aici.
Dacă aveți nevoie de exemple de cod sursă, nu ezitați să mergeți la directorul sursă și să căutați codul de care aveți nevoie.
Odată cu apariția HTML5, formularele au devenit mai versatile. element de intrare poate conține acum adrese de email, datele și multe altele, pot fi marcate ca fiind necesare fără a recurge la javascript - și acestea sunt doar câteva dintre cele mai valoroase caracteristici. De asemenea, acum puteți utiliza mai multe butoane de trimitere pentru un formular și acum este posibil să mutați butonul de trimitere în afara formularului.
Trimiteri multiple într-un singur formularPână de curând, puteai să inserezi un singur buton de trimitere într-un formular, altfel formularul ar fi procesat doar ultimul buton. Adăugând method="post" și url la elementul de formular "form" am obținut un formular de lucru.
Acum situația s-a schimbat - noi proprietăți „formmethod” și „formation” au fost adăugate la HTML. Ele vă permit să adăugați metoda postși adresa URL direct în butonul „Trimite”, deci nu trebuie să adăugați nimic în formular. Având acești parametri atașați butonul „Trimite”, mai degrabă decât formularului, adaugă mai multă flexibilitate formularului. Acum puteți face cât mai multe butoane sunt necesare pentru formular.
Acum fiecare buton „trimite” aparține unei adrese URL diferite și toate acestea elimină nevoia de a scrie cod javascript. Toate acestea funcționează excelent și acum, când dați clic pe un buton, formularul va primi forma și metoda, care vor suprascrie parametri standard metoda si actiune. Dacă formularul conține butonul obișnuit„trimite” fără parametri noi, va returna valorile de formular setate la elementul de formular.
Metoda de formare și proprietățile de formare sunt acceptate de toți browsere populare
Elemente de formular (input, select, textarea) în afara formularuluiEste un fapt general acceptat că toate elementele unei forme care îi aparțin trebuie să fie în interiorul elementului. Acest lucru reduce flexibilitatea în proiectarea formelor în sine. Datorită noului atribut „form”, acum orice element poate fi mutat în afara formularului și orice element de formular poate fi plasat în orice parte a paginii. Pentru a face acest lucru, trebuie doar să adăugați un ID în formular și apoi să adăugați valoarea acestui ID la toate elementele ca atribut.
Astăzi, atributul formular este acceptat de toate browserele populare, cu excepția Internet Explorer(până la versiunea 10).
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 la 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- Incearca-l tu insuti "
Prima mea forma:
Nume:
Nume de familie:
Formă simplă
Prima mea forma:
Nume:
Nume de familie:
Element
Formularele sunt inserate în paginile web folosind . Oferă un container pentru tot conținutul formularului, inclusiv elemente precum câmpurile de text și butoanele, precum și orice alte etichete limbaj HTML. Cu toate acestea, nu poate conține un alt element.
Pentru a trimite formularul către server, folosiți butonul „Trimite”, același rezultat se va obține 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.
Cele mai multe atribute ale elementelor afectează mai degrabă procesarea formei decât designul acesteia. Cele mai comune dintre acestea sunt acțiunea și metoda. atribut de acțiune conține adresa URL la care vor fi trimise informațiile din formular pentru procesare de către server. Atributul metodei este Metoda HTTP, pe care browserele trebuie să le folosească pentru a trimite datele din formular.
Aproape toate câmpurile de formular sunt create folosind un element (din engleză input - input). Aspect elementul se modifică în funcție de valoarea atributului său de tip:
Iată câteva valori pentru atributul tip:
Introducerea textului și a paroleiUna dintre cele mai tipuri simple Elementele de formular este un câmp de text conceput pentru a introduce text dintr-o singură linie. Acest tip introducerea textului este setată implicit, ceea ce înseamnă că câmpul cu o linie va fi afișat dacă uitați să specificați atributul tip. Pentru a adăuga un câmp de introducere a textului pe o linie la un formular, adăugați un atribut tip cu valoarea textului în interiorul elementului:
Câmpul de introducere a parolei este un tip obișnuit câmp de text. Acceptă aceleași atribute ca și un câmp text cu o singură linie. Atributul 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 valoarea parolei la atributul tip (parolă):
Un exemplu de creare a unui formular cu un câmp de parolă:
Exemplu: câmpul pentru parolă- Incearca-l tu insuti "
Autentificarea dvs.:
Parola:
Autentificarea dvs.:
Parola:
Împreună cu acest atribut, puteți utiliza atributul maxlenght, a cărui valoare determină suma maxima caractere care pot fi introduse această linie. 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 noilor elemente de formular, se recomandă să utilizați Cascading Style Sheets (CSS) în locul atributului size.
Atributul value 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.
Elementul radio creează butoane radio care utilizează un principiu logic OR, permițându-vă să selectați doar una dintre mai multe valori: dacă selectați o poziție, toate celelalte devin inactive. Sintaxa de bază a unui element de comutare este:
Atributul nume pentru butoanele radio este necesar și joacă un rol important în combinarea mai multor elemente de buton radio într-un grup. Pentru a combina butoanele radio într-un grup, trebuie să setați aceeași valoare atributul numeluiȘi sens diferit atribut de valoare. Atributul value setează valoarea butonului radio selectat care va 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 unui atribut bifat (din engleză - instalat) pe un element 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:
- Incearca-l tu insuti "
Câți ani ai?
Câți ani ai?
