Formular html neprofitabil. Formulare în HTML
O zi bună, fanilor dezvoltării web și celor care doresc să-și creeze propriul site. Înainte de asta, toate publicațiile mele erau dedicate elementelor de bază ale limbajului, metodelor de creare diverse obiecte continutul, formatarea, structurarea acestora etc. După ce stăpâniți subiectele anterioare, puteți crea deja un site web destul de bun. Cu toate acestea, va fi incomplet fără subiectul de astăzi: „Crearea de formulare în html”.
Această secțiune a limbii este foarte importantă. Așa că fă-ți timp să-l studiezi. atenție deosebită, în caz contrar, resursa web pe care ați creat-o nu va fi lansată în producție. Astfel, după ce ați citit articolul, veți afla pentru ce trebuie să folosiți formularele, ce etichete sunt folosite pentru a crea și veți putea, de asemenea, să încercați exemple concreteîn practică. Să începem!
Ce este o formă și cum funcționează?
Formă– acesta este unul dintre cele mai importante obiecte, care este destinat schimbului 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, solicitați înregistrarea pe o resursă web și lucrați cu conturile sau furnizați clienților feedback cu managerii de companie, atunci nu te poți lipsi de formulare.
Formularul este specificat folosind un element special al limbajului html .
Rețineți că documentul de cod poate conține mai multe declarații de etichetă , cu toate acestea, o singură cerere poate fi trimisă către server pentru a procesa datele. De aceea se referă la informațiile pe care utilizatorul le introduce în câmpurile prevăzute pentru aceasta diferite forme, nu ar trebui să fie dependentă. De asemenea, nu este permisă cuibărirea formelor una în cealaltă.
Pentru cei care sunt nerăbdători și dornici să arunce o privire rapidă asupra reprezentării 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 |
|
Poate că nu este foarte clar acum ce și cum interacționează în acest mic program, dar vă garantez că după ce citiți întregul articol veți putea crea aplicații mult mai complexe.
Trimiterea datelor pe partea serverului
Pentru a trimite informațiile tastate (sau selectate) într-o casetă de dialog, trebuie să utilizați mecanismul standard - butonul Trimiteți.
Codul pentru o astfel de metodă arată astfel:
Când rulați linia prezentată, va apărea 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 expedierii informatii specificate, nu ajunge imediat pe server. În primul rând, este procesat de browser, rezultând 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 specificat î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ă cu folosind php sau js, apoi procesarea are loc pe pagina curentă și linkurile nu sunt necesare.
Pentru o mai bună înțelegere a întregului tablou al funcționării site-ului, aș dori să adaug că pe server, datele sunt prelucrate folosind alte limbi. Aşa, limbi pe partea serverului luate în considerare: 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 . Dacă explicați într-un limbaj simplu, Asta 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 marcare hipertext sunt:
- Text– creează un câmp de text;
- Trimiteți– creează un buton pentru trimiterea datelor către server;
- Imagine– este responsabil pentru butonul cu poza;
- Resetați– setează un buton pentru a șterge formularul;
- Parolă– setează un câmp text special pentru parole;
- Caseta de selectare– responsabil pentru câmpurile cu casete de selectare;
- Radio– responsabil de câmpuri cu selectarea unui element;
- Buton– creează un buton;
- Ascuns– folosit pentru câmpuri ascunse;
- Fişier– setează câmpul responsabil pentru trimiterea fișierelor.
Metode de transmitere a informațiilor
Există 2 moduri de a transfera datele utilizatorului pe partea serverului: ObţineŞi Post. Aceste metode efectuează aceeași acțiune, dar diferă semnificativ unele de altele. Prin urmare, înainte de a menționa vreuna dintre ele, să ne familiarizăm cu caracteristicile lor.
| Post | Obţine | |
| Dimensiunea documentelor transmise | Limitat la partea serverului. | Maxim – 4 KB. |
| Cum sunt afișate 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ă nicio modalitate de a adăuga la marcaje, deoarece solicitările nu sunt repetate (toate paginile leagă la o singură adresă). | Orice pagină cu o solicitare poate fi salvată ca marcaje și returnată la ea mai târziu. |
| Memorarea în cache | Bazat pe paragraful anterior toate cererile pe o singură pagină. | Fiecare pagină poate fi memorată în cache separat. |
| Scop | Folosit pentru redirecționare 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 indica care dintre cele două metode de transfer de date ar trebui să folosească browserul, în element utilizați parametrul furnizat metodă(De exemplu, method="post").
Să ne uităm la al doilea exemplu. Să creăm un formular în care trebuie să introduceți datele personale (numele și prenumele, data nașterii) și să creați o parolă. Apoi trimitem toate acestea către server folosind metoda Post.
Introduceți informațiile dvs. personale!
De exemplu, pentru a introduce o dată, există comutatoare pentru numărul fiecărui parametru (zi, lună și an), precum și un panou derulant cu calendarul în sine, pentru confort.
Crearea unui panou de înregistrare
Au fost acoperite etichetele și atributele de bază. De aceea este timpul să creați un formular de înregistrare cu drepturi depline, folosind stil marcaj cssși verificarea datelor introduse. Desigur, nu vom putea vedea cum serverul funcționează cu ei, dar vom oferi 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 |
|
Vă sfătuiesc să economisiți acest cod programe într-un document cu extensia .html și codificare utf-8 și deschideți-l pe acesta din urmă într-o fereastră de browser. Veți vedea un panou de înregistrare în toată splendoarea lui cu câmpuri pentru introducerea numelui, prenumelui, e-mailului și a parolei repetate. Observați că atunci când lansați pagina, cursorul este imediat poziționat în primul câmp de text. Această tehnică se realizează prin atribut autofocus.
Începeți să completați câmpurile, lăsând unul neschimbat și faceți clic pe butonul „Înregistrare”. După cum ați observat deja, formularul nu va fi trimis, deoarece fiecare element < intrare> atribut specificat necesar. Setează câmpurile marcate ca obligatorii.
încă unul punct interesant este o indicație de tip tip="e-mail", care a apărut în . Când utilizați acest tip de câmp, informațiile introduse sunt verificate automat pentru corectitudine. În caz de erori, formularul nu este trimis la server.
Așa că publicația a ajuns la final. În ea am încercat să colectez cantitate maxima cunoștințe importante și relevante cu privire la formulare. Sper ca ti-a fost de folos! V-aș fi foarte recunoscător dacă v-ați alătura rândurilor abonaților mei și le-ați spune prietenilor despre blog.
Pa! Pa!
Cu stima, Roman Chueshov
Citire: de 333 de ori
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
Să ne uităm la un exemplu de utilizare:
Da
În acest exemplu noi:
- Interior primul forme:
- Postat două butoane radio ( ) pentru a selecta una dintre număr limitat 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 identificator unic pentru element.
- Am plasat două elemente
- 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
Î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 î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 să începi să studiezi subiectul următor ia sarcina 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.
Etichetă (din engleza formă- formular) instalează 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 scripturi client, puteți accesa orice element al formularului, îl puteți modifica și îl puteț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, utilizați butonul Trimitere, același lucru se poate realiza prin apăsarea tastei Enter din formular. Dacă butonul Trimitere lipsește din formular, Tasta Introducere imită utilizarea acestuia.
Când formularul este trimis la server, controlul datelor este transferat programului specificat de atribut element de acțiune
Eticheta de închidere este necesară.
WAI ARIA
Valoarea implicită a rolului: formă
Valori valide pentru rol:
- nici unul
- prezentare
- căutare
Atribute
- accept-charset - Setează codificarea în care serverul poate accepta și procesa date.
- acțiune - Adresa programului sau documentului care prelucrează datele din formular.
- autocomplete - Permite completarea automată a câmpurilor formularului.
- enctype - Modul în care sunt codificate datele din formular.
- metoda - metoda protocolului HTTP.
- nume - Numele formularului.
- novalidate - Anulează validarea încorporată a datelor din formular pentru corectitudinea introducerii.
- target - Numele ferestrei sau cadrului în care handlerul va încărca rezultatul returnat.
accept-charset
Setează codarea în care serverul poate accepta și procesa datele din formular.
Sintaxă
Valori
Nume de codificare, de exemplu Windows-1251, UTF-8 etc.
Valoare implicită
Setul de codificare pentru pagină.
acţiune
Specifică handlerul că datele formularului sunt accesate atunci când sunt trimise la server. Poate acționa ca un handler program server sau un document HTML care include scripturi pe partea serverului (de exemplu, Parser). După ce handlerul efectuează acțiuni asupra datelor din formular, returnează un nou document HTML.
Dacă atribut de acțiune absent, pagina curentă reîncarcă, returnând toate elementele de formular la valorile implicite.
Sintaxă
Valori
Valoarea este considerată plină sau cale relativă la fișierul server.
Valoare implicită
completare automată
Controlează completarea automată a câmpurilor de formular. Valoarea poate fi suprascrisă de atributul de completare automată pe anumite elemente de formular.
Completarea automată este efectuată de browser, care își amintește valorile scrise prima dată când îl introduceți și apoi le înlocuiește când o introduceți din nou în câmpurile formularului. În acest caz, completarea automată poate fi dezactivată în setările browserului și nu poate fi modificată în acest caz folosind atributul de completare automată.
Când introduceți primele litere ale textului, este afișată o listă de valori salvate anterior, din care puteți selecta ceea ce aveți nevoie.
Sintaxă
Valori
- activat - Activează completarea automată a formularelor.
- off - Dezactivează completarea automată. Această valoare este de obicei folosită pentru a împiedica browserul să salveze date importante (parole, numere carduri bancare), precum și date rar introduse sau unice (captcha).
Valoare implicită
enctype
Determină modul în care datele din formular sunt codificate atunci când sunt trimise la server. De obicei, nu este nevoie să setați valoarea atributului enctype; datele sunt înțelese destul de corect din partea serverului. Cu toate acestea, dacă utilizați un câmp de trimitere a fișierului (input type="file"), ar trebui să definiți atributul enctype ca multipart/form-data .
Sintaxă
Valori
- application/x-www-form-urlencoded - În loc de spații, puneți + , simbolurile precum literele rusești sunt codificate de ei valori hexazecimale(de exemplu, %D0%90%D0%BD%D1%8F în loc de Anya).
- multipart/form-data - Datele nu sunt codificate. Această valoare este utilizată la trimiterea fișierelor.
- text/plain - Spațiile sunt înlocuite cu un semn +, literele și alte caractere nu sunt codificate.
Valoare implicită
application/x-www-form-urlencoded
metodă
Atributul method îi spune serverului despre metoda de solicitare.
Sintaxă
Valori
Valoarea atributului metodei nu face distincție între majuscule și minuscule. Există două metode - obțineți și postați.
- get - Această metodă este una dintre cele mai comune și este concepută pentru a obține informațiile necesare și a transfera date către bara de adrese. Perechile nume=valoare sunt apoi atașate adresei după semnul întrebării și separate printr-un ampersand (simbol). Comoditatea utilizării metodei get este că adresa cu toți parametrii poate fi folosită în mod repetat, salvând-o, de exemplu, în marcajele browserului și puteți modifica, de asemenea, valorile parametrilor direct în bara de adrese.
- post - Metoda post trimite date către server într-o solicitare de browser. Acest lucru vă permite să trimiteți Mai mult date decât sunt disponibile pentru metoda get, deoarece postarea nu are o limită de 4 KB. Cantități mari de date sunt folosite în forumuri, servicii de corespondență, completarea bazelor de date, trimiterea de fișiere etc.
Valoare implicită
nume
Definește nume unic forme. De obicei, numele formularului este folosit pentru a accesa elementele sale prin scripturi.
Sintaxă
Valori
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 atributul nume.
Valoare implicită
nuvalidate
Anulează verificarea încorporată a datelor introduse de utilizator în formular pentru corectitudine. Această verificare este efectuată automat de către browser atunci când formularul este trimis la server și are loc pentru câmpuri , , precum și dacă există un model sau un atribut necesar.
Sintaxă
Valori
Valoare implicită
În mod implicit, acest atribut este dezactivat.
ţintă
După ce handlerul de formulare primește datele, returnează rezultatul ca document HTML. Puteți defini cadrul în care se va încărca pagina web rezultată. În acest scop este folosit atribut target, valoarea sa este numele cadrului. Dacă ținta nu este setată, rezultatul returnat este afișat în fila curentă.
Sintaxă
Valori
Valoarea este numele cadrului specificat de atributul nume al elementului