Crearea de formulare HTML. Formulare HTML

Bună ziua, dragi cititori ai blogului. Continuând studiul nostru, trecem la luarea în considerare a etichetelor de formular și de intrare cu atributele lor (), cu ajutorul cărora puteți crea o mare varietate de formulare pentru site.

Indiferent de subiectul și conținutul unei anumite resurse web, cel mai probabil va conține formulare într-o formă sau alta: câmpuri de text, meniuri derulante, diverse butoane sau comutatoare. Apropo, într-una dintre publicații am vorbit deja despre elemente care ajută la diversificarea formelor.

Care este scopul practic al întregii varietăți de forme posibile? În primul rând, acestea sunt necesare pentru a trimite datele introduse de utilizator către server în scopul prelucrării ulterioare folosind un script (handler) special creat.

Formulare HTML - cum sunt create folosind formularul și intrarea

După cum am spus la început, un fel de formular web, sau chiar mai multe deodată, trebuie să fie prezente pe orice site web mai mult sau mai puțin dezvoltat. Pentru a înțelege cât de importante sunt acestea în lumina conformității unei resurse web cu cerințele moderne, este suficient să vă oferim de la îndemână trei obiecte care folosesc formulare bazate pe formulare și etichete de intrare, care, doar prin numele lor, nu lasă nicio îndoială asupra lor. necesitatea unui proiect într-o direcție sau alta:

Dacă urmați, de exemplu, un link către un articol despre crearea feedback-ului (permițând tuturor utilizatorilor să trimită mesaje către administrația site-ului), atunci codul HTML cu un formular care are o deschidere (

) Partea:

Aici formularul joacă un rol vital, deoarece inițiază instalarea formularului web. Nu afișează în sine o zonă pe o pagină web, ci servește ca un container care conține alte etichete.

În cazul nostru (vezi captura de ecran de mai sus), acestea includ mai multe intrare(această etichetă HTML este unică, cu alte cuvinte, nu are o componentă de închidere), și de asemenea zona textului, cu seturi diferite de atribute. Fiecare dintre ele își definește propriul element inclus în formular.

16. Focalizare automată(fără parametri) - un atribut logic care pune accentul pe câmp imediat când se încarcă pagina web, drept urmare puteți introduce date fără a face clic pe el cu butonul mouse-ului. Nu poate fi aplicat numai pentru tipul de intrare = "ascuns".

17. Dezactivat(fără valori) - dezactivează pentru utilizator elementul de formular la care a fost adăugat. Cel mai adesea este folosit împreună cu scripturi, unde sunt specificate condițiile în care va fi activat un element inaccesibil.

18. Formă— asociază elementul cu forma când se află în afara containerului

. Pentru a lega, se adaugă un atribut global de id la eticheta de formular și un atribut de formular este adăugat la eticheta de intrare, ale cărui valori sunt aceleași (de exemplu, id="data" și form="data") .

19. Multiplu(fără parametri) - seturi opțiune cu alegere multiplă pentru utilizator și este utilizat numai împreună cu type="file" și type="email".

Dacă utilizați câmpul de încărcare a fișierelor, puteți selecta simultan mai multe fișiere de pe computer folosind tastele Ctrl sau Shift. Dacă este afișat un câmp pentru introducerea unei adrese de e-mail (type="email"), atunci e-mailurile trebuie introduse separate prin virgule.

20. Necesar(fără valori) – activează cerința ca utilizatorul să introducă date. Prin urmare, browserul blochează trimiterea formularului web dacă un câmp obligatoriu este lăsat gol și afișează un mesaj corespunzător despre necesitatea completării acestuia.

Acest atribut nu este utilizat pentru butoanele grafice și standard (type="button | imagine"), precum și pentru câmpurile de introducere ascunse (type="hidden").

Următoarele patru atribute (22-25) pentru eticheta de intrare au aproape aceeași funcționalitate ca și pentru , dar pentru a fi completă le voi menționa și pe scurt.

22. Lungime maxima— impune o limită a numărului maxim de caractere care pot fi introduse la completarea unui câmp de text. Dacă încercați să depășiți această limită, introducerea ulterioară va fi blocată. Acest atribut este aplicabil numai pentru elementele text cu tip="email | parola | căutare | tel | text | url".

23. Minlength— impune o limită a numărului minim de caractere necesare pentru a fi introduse în zona de text. Dacă se încearcă trimiterea de date care conțin mai puține caractere, va apărea un mesaj scurt care indică necesitatea de a completa conținutul formularului și vor fi furnizate informații despre numărul de caractere deja introduse. Condițiile de utilizare sunt exact aceleași ca și în cazul lungimii maxime.

24. Substituent— puteți plasa un indiciu (va servi ca parametru) direct în câmpul de text, care va dispărea în momentul în care utilizatorul începe să introducă caractere. Numai pentru câmpurile care sunt formate folosind parametri e-mail, parolă, căutare, text, tel, url atributul tip al etichetei de intrare.

25. Numai citire(fără parametri) - indică faptul că textul introdus anterior în câmp este disponibil doar pentru citire și copiere. Este de obicei folosit împreună cu scripturi, unde sunt specificate condiții care, atunci când sunt îndeplinite, pot activa acest element de formular.

Și, în sfârșit, încă câteva atribute care completează funcționalitatea diferitelor elemente de formular:

26. Model— ca valoare, reflectă o expresie regulată pe baza căreia sunt stabilite regulile de introducere a informațiilor. În acest caz, se recomandă adăugarea suplimentară a unui atribut de titlu global, ca parametru al căruia puteți adăuga text explicativ pentru a ajuta utilizatorii să completeze câmpurile. Modelul se aplică numai elementelor de e-mail, parolă, căutare, text, tel, url. Să înțelegem cu un exemplu. Iată codul pentru un formular de înregistrare simplificat (cu ):

Parola

Pentru câmpul de conectare (type="text"), este specificată o expresie regulată (5,) ca valoare a modelului, ceea ce implică utilizarea caracterelor latine și trebuie introduse cel puțin cinci caractere.

În ceea ce privește zona de text pentru parolă (type="parola"), valoarea este setată la (8,), care specifică introducerea caracterelor exclusiv latine în orice caz (lite mari și mici), precum și cifre, în timp ce numărul total al tuturor caracterelor nu trebuie să fie mai mic de opt.

Dacă sunt încălcate condițiile de introducere specificate, browserul nu vă va permite să trimiteți date și va afișa un avertisment corespunzător:

27. Sr— definește calea către imagine (URL, care este valoarea acesteia) pentru afișarea butonului grafic „imagine” (vezi tabelul cu parametrii tipului de intrare de mai sus).

Poate lua ca parametru orice număr întreg sau fracționar. Pas implicit="1". Pentru a seta intervalul final de intrare, puteți utiliza din nou atributele min și max menționate mai sus. Pentru claritate, vom include 2 elemente type="number" în formularul de testare. Pentru primul, setați step="2", iar pentru al doilea, step="0,1":

Introduceți o valoare de la -10 la 10:

Introduceți o valoare între 0 și 1:

29. Valoare— setează valoarea elementului de formular care va fi transmis handler-ului. O pereche nume-parametru este trimisă la server, unde numele este determinat de atributul nume al etichetei de intrare, iar parametrul este determinat de atributul value. Mai mult, pentru diverse elemente de formă valoarea va juca roluri diferite:

for type="button | reset | submit" - setează eticheta textului pe butoane;
for type="checkbox | radio | image" - identifică fiecare casetă de selectare, comutator sau buton grafic la trimiterea și procesarea datelor pe server;
pentru type="parolă | text" - imediat la încărcarea formularului, acesta afișează text preliminar în câmp, care poate fi schimbat sau șters complet de către utilizator;
pentru type="file" (încărcare fișier) nu se aplică deoarece nu afectează acest element.

Exemplu de utilizare pentru fiecare dintre opțiunile de mai sus:

Selectați CMS: W.P. Joomla

Aici valoare atribut valoare definește următoarele componente ale fiecărui element: afișează un fragment de text pentru câmpul type="text" ("Numele tău"), identifică fiecare dintre butoanele radio ("1" și "2") setate folosind type="radio", și, de asemenea, activează înscrierea pe butonul ("Trimite").

Un exemplu de creare a unui formular HTML frumos

În continuare, voi încerca să vă prezint un exemplu de formular web, al cărui cod include nu numai combinații de tipuri de introducere cu valori diferite care formează câmpuri și butoane de text standard, ci și, de exemplu, care vă permit să inițiați concentrarea asupra un element nu numai cu un clic direct al mouse-ului, ci și prin clic pe text.

Vă rugăm să rețineți că, pentru a obține un design unic, sunt plasate componente individuale de formă, fiecare cu seturi de:

Spate (lățime maximă: 350 px; margine: 50 px automat 0; padding: 20 px; fundal: # f3ebe1; font-family: „Oswald”, sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- jos:10px; width:100%) .in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; poziția fundalului: 10px 10px) .form-4 de intrare (display:block; înălțime:50px; font-size:24px; lățime:100%; cursor: pointer)

Ca rezultat, un astfel de formular web are următorul contur:

Informații mai complete despre crearea acestui formular specific pot fi găsite la această pagină(apropo, acolo nu puteți doar să testați funcționalitatea zonelor de text individuale introducând date în ele, ci și să experimentați cu formularul web prin editarea codului HTML și/sau a proprietăților CSS, schimbându-i complet sau parțial aspectul).

Scopul meu a fost să vă prezint algoritmul de utilizare a diferitelor valori ale atributului type și eticheta de formular pentru a crea diverse formulare HTML pe site. Sper că sarcina este finalizată. În orice caz, împărtășește-ți părerile despre acest subiect divers în comentarii.

Desigur, în publicațiile ulterioare voi continua să descriu principalele etichete ale marcajului hipertext, așa că nu uitați să vă abonați la actualizările blogului prin e-mail. De asemenea, pentru a consolida acest lucru, priviți o altă lecție a lui Evgeniy Popov despre crearea unui formular de contact.

formular HTML este un instrument cu ajutorul căruia un document HTML poate trimite unele informații într-un punct predeterminat din lumea exterioară, unde informațiile vor fi procesate într-un fel.

Este destul de greu să vorbim despre formulare într-un tutorial dedicat HTML-ului. Motivul este foarte simplu: crearea unui formular HTML este mult mai ușoară decât crearea „punctului din lumea exterioară” către care formularul HTML va trimite informații. În cele mai multe cazuri, un astfel de „punct” este un program scris în Perl sau C.

Programele care procesează datele trimise prin formulare sunt adesea numite scripturi CGI. Acronimul CGI înseamnă Common Gateways Interface. Scrierea de scripturi CGI necesită în majoritatea cazurilor o bună cunoaștere a limbajului de programare corespunzător și a capacităților sistemului de operare Unix.

În prezent, limbajul PHP/FI a devenit oarecum răspândit, ale cărui instrucțiuni pot fi încorporate direct în documente HTML (documentele sunt salvate ca fișiere cu extensia *.pht sau *.php).

Formularele HTML transmit informații către programele de gestionare sub formă de perechi [nume variabilă]=[valoare variabilă]. Numele variabilelor trebuie specificate cu litere latine. Valorile variabilelor sunt tratate ca șiruri de către handleri, chiar dacă conțin doar numere.

Cum funcționează formularul HTML

Formularul este deschis cu eticheta

. Un document HTML poate conține mai multe formulare, dar formularele nu trebuie să fie amplasate unul în celălalt. Textul HTML, inclusiv etichetele, poate fi plasat în formulare fără restricții.

Etichetă

poate conține trei atribute, dintre care unul este obligatoriu. Acestea sunt atributele:

Atribut obligatoriu. Determină locul în care se află handlerul de formulare.

Determină modul în care (cu alte cuvinte, folosind ce metodă de protocol de transfer hipertext) datele din formular vor fi transferate către handler. Valorile valide sunt METHOD=POST și METHOD=GET. Dacă valoarea atributului nu este setată, se presupune implicit METHOD=GET.

Determină modul în care datele din formularul HTML vor fi codificate pentru a fi transmise către handler. Dacă valoarea atributului nu este setată, valoarea implicită este ENCTYPE=application/x-www-form-urlencoded .

Cel mai simplu formular HTML

Pentru a începe procesul de transfer al datelor din formular către handler, este nevoie de un fel de control. Crearea unui astfel de corp de control este foarte simplă:

După ce a întâlnit o astfel de linie în interiorul formularului, browserul va desena pe ecran un buton cu inscripția Submit (a se citi „submit” cu accent pe a doua silabă, din engleza „submit”), atunci când se va face clic, toate datele disponibile în formularul va fi transferat la handler-ul definit în etichetă .

Eticheta de pe buton poate fi setată la orice doriți, introducând atributul VALUE="[Label]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

Acum știm suficient pentru a scrie un formular HTML simplu (exemplul 11). Nu va colecta date, ci pur și simplu ne va întoarce la textul acestui capitol.

Exemplul 11

Cea mai simpla forma

Inscripția plasată pe buton poate fi transmisă, dacă este necesar, operatorului prin introducerea atributului NUME=[nume] în definiția butonului (a se citi „nume”, din engleză „nume”), de exemplu:

Când faceți clic pe un astfel de buton, handlerul, împreună cu toate celelalte date, va primi o variabilă buton cu valoarea Să mergem! .

Un formular poate avea mai multe butoane de trimitere cu nume și/sau valori diferite. Managerul poate acționa astfel diferit în funcție de butonul de trimitere pe care a făcut clic utilizatorul.

Cum colectează date un formular HTML

Există și alte tipuri de elemente . Fiecare element trebuie să includă atributul NAME=[nume], care specifică numele elementului (și, în consecință, numele variabilei care va fi transmisă handlerului). Trebuie specificat numele numai cu litere latine. Majoritatea articolelor trebuie să includă atributul VALUE="[valoare]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} Și , cu toate acestea, acest atribut este opțional deoarece valoarea variabilei corespunzătoare poate fi introdusă de către utilizator folosind tastatura.

Tipuri de elemente de bază :

TYPE=text

Definește o fereastră pentru introducerea unei linii de text. Poate conține atribute suplimentare SIZE=[număr] (lățimea ferestrei de introducere în caractere) și MAXLENGTH=[număr] (lungimea maximă permisă a șirului de introducere în caractere).

Exemplu:

Definește o fereastră lată de 20 de caractere pentru introducerea textului. În mod implicit, fereastra conține textul Ivan, pe care utilizatorul îl poate edita. Textul editat (sau needitat) este transmis operatorului în variabila utilizator.

TYPE=parolă

Definește o fereastră pentru introducerea unei parole. Absolut asemănător cu tipul de text, doar că în loc de simboluri ale textului introdus apare asteriscuri (*) pe ecran. Exemplu:

Definește o fereastră lată de 20 de caractere pentru introducerea unei parole. Lungimea maximă permisă a parolei este de 10 caractere. Parola introdusă este transmisă handlerului în variabila pw.

TYPE=radio

Definește un buton radio. Poate conține un atribut bifat suplimentar (indică faptul că butonul este bifat). Într-un grup de butoane radio cu aceleași nume, poate exista un singur buton radio etichetat.

Exemplu:

9600 bps
14400 bps
28800 bps

Definește un grup de trei butoane radio etichetate 9600 bps, 14400 bps și 28800 bps. Primul dintre butoane este inițial etichetat. Dacă utilizatorul nu bifează alt buton, variabila modem cu valoarea 9600 va fi transmisă handlerului. Dacă utilizatorul verifică un alt buton, o variabilă de modem cu o valoare de 14400 sau 28800 va fi transmisă handlerului.

TYPE=caseta de selectare

Definește un pătrat în care se poate face un marcaj. Poate conține un atribut bifat suplimentar (indică faptul că pătratul este bifat). Spre deosebire de butoanele radio, un grup de pătrate cu același nume poate avea mai multe pătrate etichetate.

Exemplu:

Calculatoare personale
Stații de lucru
Servere de rețea locală
Servere de Internet

Definește un grup de patru pătrate. Al doilea și al patrulea pătrat sunt inițial marcate. Dacă utilizatorul nu face modificări, două variabile vor fi transmise handlerului: comp=WS și comp=IS .

TYPE=ascuns

Definește un element de date ascuns care nu este vizibil pentru utilizator la completarea formularului și este transmis operatorului neschimbat. Este uneori util să existe un astfel de element pe un formular care este reproiectat din când în când, astfel încât handlerul să știe cu ce versiune a formularului are de-a face. Puteți găsi cu ușurință și alte utilizări posibile.

Exemplu:

Definește o variabilă de versiune ascunsă care este transmisă handler-ului cu valoarea 1.1.

TYPE=resetare

Definește un buton care, atunci când este făcut clic, readuce formularul HTML la starea inițială. Deoarece nu sunt transmise date managerului atunci când se utilizează acest buton, este posibil ca un buton de resetare să nu aibă un atribut de nume.

Exemplu:

Definește un buton Clear Form Fields care, atunci când este făcut clic, readuce formularul HTML la starea inițială.

Pe langa elemente , Formularele HTML pot conține meniuri .</p> <p>Meniul <SELECT>din n elemente arată cam așa:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[valoarea 1]">[textul 1] <OPTION VALUE="[valoarea 2]">[textul 2] ... <OPTION VALUE="[n valoare]">[text n]</SELECT> </p><p>După cum puteți vedea, meniul începe cu eticheta <SELECT>și se termină cu eticheta</SELECT>. Etichetă <SELECT>conține un atribut NAME obligatoriu care specifică numele variabilei pe care o generează meniul.</p> <p>Etichetă <SELECT>poate conține, de asemenea, un atribut MULTIPLU, a cărui prezență indică faptul că mai multe elemente pot fi selectate din meniu. Majoritatea browserelor afișează un meniu <SELECT MULTIPLE>sub forma unei ferestre în care se află elementele de meniu (înălțimea ferestrei în linii poate fi setată cu atributul SIZE=[number]). Meniul <SELECT>în cele mai multe cazuri, este afișat ca un meniu derulant.</p> <p>Etichetă <OPTION>definește un element de meniu. Atributul VALUE necesar setează valoarea care va fi transmisă handlerului dacă este selectat acest element de meniu. Etichetă <OPTION>poate include un atribut bifat care indică faptul că elementul este verificat implicit.</p> <h3>Să ne uităm la un mic exemplu:</h3> <SELECT NAME="selection"> <OPTION VALUE="Opțiunea 1" checked>Opțiunea 1 <OPTION VALUE="varianta 2">Opțiunea 2 <OPTION VALUE="opțiunea 3">Opțiunea 3</SELECT> <p>Acest fragment definește un meniu de trei elemente: Opțiunea 1, Opțiunea 2 și Opțiunea 3. În mod implicit, elementul Opțiunea 1 este selectat. Handler-ului i se va transmite o variabilă de selecție a cărei valoare poate fi opțiunea1 (implicit), opțiunea2 sau opțiunea3.</p> <p>După tot ce am învățat deja, elementul <TEXTAREA>poate părea destul de simplu. De exemplu:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>Și iată adresa ta...

Toate atributele sunt obligatorii. Atributul NAME definește numele sub care conținutul ferestrei va fi transmis handler-ului (în exemplu - adresa). Atributul ROWS stabilește înălțimea ferestrei în rânduri (5 în exemplu). Atributul COLS stabilește lățimea ferestrei în caractere (50 în exemplu).

Text plasat între etichete Și, reprezintă conținutul implicit al ferestrei. Utilizatorul îl poate edita sau pur și simplu îl poate șterge.

Este important să știți că literele rusești sunt în fereastră atunci când sunt transmise unui handler, acestea pot fi convertite în obiectele caracter corespunzătoare.</p> <h3>Exemplu:</h3> <p>Pentru a demonstra utilizarea formularelor HTML, am scris un mic program în PHP, care se află la:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>Datele sursă vor fi transferate în acest program prin formularul descris în exemplul 12:</p><p> <HTML> <HEAD> <TITLE>Exemplul 12</TITLE> </HEAD> <H1>Formă puțin mai complexă</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Povestește-ne puțin despre tine...</H2> <P>Nu este necesar să furnizați informații autentice. În scopuri demonstrative, cele fictive sunt, de asemenea, destul de potrivite.</P> <P>Nume: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Nume de familie: <INPUT TYPE=text SIZE=40 NAME=ln><BR>Podea: <INPUT TYPE=radio NAME=gender VALUE="masculin" checked>masculin <INPUT TYPE=radio NAME=gender VALUE="Femeie">Femeie <BR>Vârstă: <INPUT TYPE=text SIZE=5 NAME=age>ani <BR> <INPUT TYPE=submit VALUE="Run handler"></P> </FORM> </BODY> </HTML> </p><p>Completați formularul HTML, faceți clic pe butonul și vedeți ce se întâmplă...</p> <p><b>Mic truc <br>sau cum se trimite formularul prin poștă</b></p><p>Toate acestea sunt în regulă, vor spune scepticii, dar de ce naiba au nevoie oamenii de formulare HTML care nu au cu ce să le proceseze? Acest lucru este parțial adevărat, dar doar parțial.</p> <p>HTML oferă un mecanism destul de puternic pentru trimiterea conținutului formularelor prin e-mail. Iată cum arată în practică.</p> <p>Să presupunem că am schimbat puțin Exemplul 12. În loc de șir</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>am intrat pe linie</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Vă rugăm să rețineți că am schimbat algoritmul de codificare la text/plain , adică am dezactivat codificarea cu totul.</p> <p>Să presupunem acum că utilizatorul a indicat prenumele Ivan, numele de familie Petrov, sexul masculin și vârsta de 22 de ani. Acum întrebarea este: ce se întâmplă dacă utilizatorul face clic pe butonul Run Handler?</p> <p>Răspunsul este simplu. Următorul mesaj va fi trimis automat la user@mail.box prin e-mail:</p><p>Fn=Ivan ln=Petrov sex=masculi varsta=22</p><p>Din păcate, nu toți utilizatorii vor putea folosi acest formular HTML. Cert este că toată munca de compunere a unui mesaj și de lansare a unui program de e-mail pentru a-l trimite este de fapt preluată de browserul utilizatorului. Aceasta înseamnă că configurația de acces la Internet a utilizatorului trebuie să asigure funcționarea simultană a Protocolului de transfer hipertext și a Protocolului de livrare a corespondenței de ieșire. Acest lucru nu este întotdeauna posibil. Cu toate acestea, chiar dacă acest lucru este imposibil, nu se va întâmpla nimic fatal. Browserul va afișa pur și simplu un mesaj de eroare.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Etichetă <b> <form> </b> <i>(din engleza <b>formă</b>- formular)</i> instalează un formular pe o pagină web.</p> <p>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.</p> <p>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.</p> <p>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 nu este prezent în formular, tasta Enter simulează utilizarea acestuia.</p> <p>Când formularul este trimis la server, controlul datelor este transferat programului specificat de atributul de acțiune al elementului <form>. Anterior, browserul pregătește informații sub forma unei perechi „nume=valoare”, unde numele este determinat de atributul nume al elementului <input>, iar valoarea este introdusă de utilizator sau setată la câmpul implicit al formularului. Dacă metoda GET este utilizată pentru a trimite date, bara de adrese poate avea următoarea formă.</p><p>Http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p><p>Parametrii sunt listați după semnul de întrebare specificat după adresa programului serverului și sunt separați de un caracter și (&). Literele rusești sunt convertite în reprezentare hexazecimală (în forma %HH, unde HH este codul hexazecimal pentru valoarea caracterului ASCII), spațiul este înlocuit cu un plus (+).</p> <p>Permis în interiorul recipientului <form>plasați alte elemente, în timp ce formularul în sine nu este afișat în niciun fel pe pagina web, doar elementele din interiorul acestuia sunt vizibile.</p> <h2>Sintaxă</h2> <form> ... </form> <p>Eticheta de închidere este necesară.</p> <h2>WAI ARIA</h2> <p>Valoarea implicită a rolului: <b>formă</b></p> <p>Valori valide pentru rol:</p> <ul><li><b>nici unul</b></li> <li><b>prezentare</b></li> <li><b>căutare</b></li> </ul><h2>Atribute</h2> <ul><li>accept-charset - Setează codificarea în care serverul poate accepta și procesa date.</li> <li>acțiune - Adresa programului sau documentului care prelucrează datele din formular.</li> <li>autocomplete - Permite completarea automată a câmpurilor formularului.</li> <li>enctype - Modul în care sunt codificate datele din formular.</li> <li>metoda - metoda protocolului HTTP.</li> <li>nume - Numele formularului.</li> <li>novalidate - Anulează validarea încorporată a datelor din formular pentru corectitudinea introducerii.</li> <li>target - Numele ferestrei sau cadrului în care handlerul va încărca rezultatul returnat.</li> </ul><h3>accept-charset</h3> <p>Setează codificarea în care serverul poate accepta și procesa datele din formular.</p> <p><b>Sintaxă</b></p><p> <form accept-charset="<кодировка>">...</form> </p><p><b>Valori</b></p> <p>Nume de codificare, de exemplu Windows-1251, UTF-8 etc.</p> <p><b>Valoare implicită</b></p> <p>Setul de codificare pentru pagină.</p> <h3>acțiune</h3> <p>Specifică handlerul că datele formularului sunt accesate atunci când sunt trimise la server. Handler-ul poate fi un program server sau un document HTML care include scripturi server (de exemplu, Parser). După ce handlerul efectuează acțiuni asupra datelor din formular, returnează un nou document HTML.</p> <p>Dacă atributul acțiune lipsește, pagina curentă este reîncărcată, returnând toate elementele de formular la valorile implicite.</p> <p><b>Sintaxă</b></p><p> <form action="<адрес>">...</form> </p><p><b>Valori</b></p> <p>Valoarea este calea completă sau relativă către fișierul server.</p> <p><b>Valoare implicită</b></p> <h3>completare automată</h3> <p>Controlează completarea automată a câmpurilor de formular. Valoarea poate fi suprascrisă de atributul de completare automată pe anumite elemente de formular.</p> <p>Completarea automată este efectuată de browser, care își amintește valorile scrise prima dată când o 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ă.</p> <p>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.</p> <p><b>Sintaxă</b></p><p> <form autocomplete="on | off">...</form> </p><p><b>Valori</b></p> <ul><li>activat - Activează completarea automată a formularelor.</li> <li>off - Dezactivează completarea automată. Această valoare este de obicei folosită pentru a împiedica browserul să salveze date importante (parole, numere de card bancar), precum și date rar introduse sau unice (captcha).</li> </ul><p><b>Valoare implicită</b></p> <h3>enctype</h3> <p>Determină modul în care datele din formular sunt codificate atunci când sunt trimise la server. De obicei, nu este nevoie să setați atributul 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 .</p> <p><b>Sintaxă</b></p><p> <form enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"> ... </form> </p><p><b>Valori</b></p> <ul><li>application/x-www-form-urlencoded - Spațiile sunt înlocuite cu +, caracterele precum literele rusești sunt codificate cu valorile lor hexazecimale (de exemplu, %D0%90%D0%BD%D1%8F în loc de Anya).</li> <li>multipart/form-data - Datele nu sunt codificate. Această valoare este utilizată la trimiterea fișierelor.</li> <li>text/plain - Spațiile sunt înlocuite cu un semn +, literele și alte caractere nu sunt codificate.</li> </ul><p><b>Valoare implicită</b></p> <p>application/x-www-form-urlencoded</p> <h3>metodă</h3> <p>Atributul method îi spune serverului despre metoda de solicitare.</p> <p><b>Sintaxă</b></p><p> <form method="get | post">...</form> </p><p><b>Valori</b></p> <p>Valoarea atributului metodei nu face distincție între majuscule și minuscule. Există două metode - obțineți și postați.</p> <ul><li>get - 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. 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.</li> <li>post - Metoda post trimite date către server într-o solicitare de browser. Acest lucru vă permite să trimiteți mai multe date decât este disponibil pentru metoda get, deoarece postarea nu are o limită de 4KB. Cantități mari de date sunt folosite în forumuri, servicii de corespondență, completarea bazelor de date, trimiterea de fișiere etc.</li> </ul><p><b>Valoare implicită</b></p> <h3>Nume</h3> <p>Definește un nume unic pentru formular. De obicei, numele formularului este folosit pentru a accesa elementele sale prin scripturi.</p> <p><b>Sintaxă</b></p><p> <form name="<имя>">...</form> </p><p><b>Valori</b></p> <p>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.</p> <p><b>Valoare implicită</b></p> <h3>nuvalidate</h3> <p>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 <input type="email"> , <input type="url">, precum și dacă există un model sau un atribut necesar.</p> <p><b>Sintaxă</b></p><p> <form novalidate>...</form> </p><p><b>Valori</b></p> <p><b>Valoare implicită</b></p> <p>În mod implicit, acest atribut este dezactivat.</p> <h3>ţintă</h3> <p>După ce handlerul de formular primește datele, returnează rezultatul ca document HTML. Puteți defini cadrul în care se va încărca pagina web rezultată. Pentru a face acest lucru, utilizați atributul target, numele cadrului este specificat ca valoare. Dacă ținta nu este setată, rezultatul returnat este afișat în fila curentă.</p> <p><b>Sintaxă</b></p><p> <form target="<значение>">...</form> </p><p><b>Valori</b></p> <p>Valoarea este numele cadrului specificat de atributul nume al elementului <iframe>. Dacă este setat un nume inexistent, se va deschide o filă nouă. Următoarele nume pot fi specificate ca nume rezervate.</p> <ul><li>_blank - Încarcă pagina într-o filă nouă de browser.</li> <li>_self - Încarcă pagina în fila curentă.</li> <li>_parent - Încarcă pagina în cadrul părinte; dacă nu există cadre, atunci această valoare funcționează ca _self .</li> <li>_top - Anulează toate cadrele și încarcă pagina în fereastra browserului; dacă nu există cadre, atunci această valoare funcționează ca _self .</li> </ul><p><b>Valoare implicită</b></p> <h2>Specificații</h2> <h2>Exemple</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>FORMĂ</title> </head> <body> <form action="handler.php"> <p><b>Cum crezi că înseamnă abrevierea „OS”?</b></p> <p><input type="radio" name="answer" value="a1">Ofițeri <Br> <input type="radio" name="answer" value="a2">sistem de operare <Br> <input type="radio" name="answer" value="a3">Muscă cu dungi grozave</p> <p><input type="submit"></p> </form> <script type="text/javascript">  </script><br> <br> </body> </html> <p>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. <br>Î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:</p> <p>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:</p> <h3>Exemplu: formular HTML simplu</h3> <ul><li>Incearca-l tu insuti "</li> </ul><p>Prima mea forma: <br>Nume: <input type="text" name="firstname" value=""><br>Nume de familie: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Formă simplă</title> </head><br><body> <form action="action_form.php" method="POST"> <p>Prima mea forma: <br>Nume: <input type="text" name="firstname" value=""><br>Nume de familie: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Element <b><form> </b> </h2> <p>Formularele sunt inserate în paginile web folosind elementul <b><form> </b>. 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 un alt element <b><form> </b> .<br>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. <br>Majoritatea atributelor elementului <b><form> </b> afectează prelucrarea formularului, nu designul acestuia. Cele mai comune dintre care sunt <b>acțiune</b>Și <b>metodă</b>. Atribut <b>acțiune</b> conține adresa URL la care vor fi trimise informațiile din formular pentru procesare de către server. Atribut <b>metodă</b> este metoda HTTP pe care browserele trebuie să o utilizeze pentru a trimite datele din formular.</p> <h2>Element <b><input> </b> </h2> <p>Aproape toate câmpurile de formular sunt create folosind elementul <b><input> </b>(din engleză input - input). Aspectul elementului <b><input> </b> se modifică în funcție de valoarea atributului său <b>tip</b>:</p><p> <input type="значение"> </p><p>Iată câteva valori ale atributelor <b>tip</b>:</p> <h2>Introducerea textului și a parolei</h2> <p>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 de introducere a textului este setat în mod implicit și, prin urmare, este câmpul cu o singură linie care va fi afișat dacă uitați să specificați atributul <b>tip</b>. 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 <b><input> </b>înregistrează atributul <b>tip</b> cu valoare text:</p><p> <input type="text"> </p><p>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 <b>Nume</b> 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 <b>tip</b>(parolă (engleză) - parolă):</p><p> <input type="password"> </p><p>Un exemplu de creare a unui formular cu un câmp de parolă:</p> <h3>Exemplu: câmpul pentru parolă</h3> <ul><li>Incearca-l tu insuti "</li> </ul><p>Autentificarea dvs.: <input type="text" name="login" size="15" maxlength="30" value="Numele dumneavoastră"></p> <p>Parola: <input type="password" name="password" size="15" maxlength="30" value="Parola"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Autentificarea dvs.: <input type="text" name="login" size="15" maxlength="30" value="Numele dumneavoastră"> </p> <p>Parola: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <p>Puteți utiliza atributul împreună cu acest atribut <b>lungime maximă</b>, 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 <b>mărimea</b>. În mod implicit, majoritatea browserelor limitează lățimea unui câmp de text la 20 de caractere. Pentru a controla lățimea elementelor de formular noi, în loc de un atribut <b>mărimea</b>, vă recomandăm să utilizați foi de stil în cascadă (CSS). <br>Atribut <b>valoare</b> 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.</p> <h2>Comutatoare (radio)</h2> <p>Element <b><input> </b> tip <b>radio</b> 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:</p><p> <input type="radio" name="имя _переменной" value="sens"> </p><p>Atribut <b>Nume</b> 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 <b>Nume</b>și valoare de atribut diferită <b>valoare</b>. Atribut <b>valoare</b> 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. <br>Prezența atributului <b>verificat</b>(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:</p> <h3></h3> <ul><li>Incearca-l tu insuti "</li> </ul><p>Câți ani ai?</p> <ol><li><input type="radio" name="age" value="18" checked>sub 18</li> <li><input type="radio" name="age" value="18-24">de la 18 la 24</li> <li><input type="radio" name="age" value="25-34">de la 25 la 35</li> <li><input type="radio" name="age" value="35-50">mai mult de 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Câți ani ai?</p> <ol> <li><input type="radio" name="age" value="18" checked>sub 18</li> <li><input type="radio" name="age" value="18-24">de la 18 la 24</li> <li><input type="radio" name="age" value="25-34">de la 25 la 35</li> <li><input type="radio" name="age" value="35-50">mai mult de 35</li> </ol> <input type="submit"< </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Casete de selectare</h2> <p>Element <b><input> </b> tip <b>Caseta de bifat</b> creează casete de selectare care sunt similare cu butoanele radio prin faptul că oferă utilizatorului posibilitatea de a alege dintre opțiunile pe care le furnizați. Principala diferență față de butoanele radio este că vizitatorul poate selecta mai multe opțiuni simultan, iar steagurile în sine sunt indicate prin pătrate mai degrabă decât cercuri. Ca și în cazul butoanelor radio, un grup de casete de selectare este creat prin alocarea fiecărui element cu aceeași valoare de atribut <b>Nume</b>, totuși, fiecare casetă de selectare are propriul său sens. Sintaxa de bază a unei casete de selectare este:</p><p> <input type="checkbox" name="имя _переменной" value="sens"> </p><p>Atribut <b>verificat</b>, ca și în cazul butoanelor radio, specifică că caseta de selectare trebuie bifată în mod implicit când pagina se încarcă. Acest atribut poate fi setat simultan pentru mai multe casete de selectare de grup. <br>Următorul exemplu de utilizare a casetelor de selectare are mai multe opțiuni implicite de răspuns:</p> <h3>Exemplu: Utilizarea butoanelor radio</h3> <ul><li>Incearca-l tu insuti "</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="blues" checked>Blues</li> <li><input type="checkbox" name="musik" value="stâncă">stâncă</li> <li><input type="checkbox" name="musik" value="Shanson">Chanson</li> <li><input type="checkbox" name="musik" value="țară">Țară</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Ce genuri de muzică vă place?</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="blues" checked>Blues</li> <li><input type="checkbox" name="musik" value="stâncă">stâncă</li> <li><input type="checkbox" name="musik" value="Shanson">Chanson</li> <li><input type="checkbox" name="musik" value="țară">Țară</li> </ol> <input type="submit"< </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Butoane de confirmare (trimitere) și ștergere (resetare).</h2> <p>Element <b><input> </b> tip <b>Trimite</b> creează un buton, când este apăsat, browserul îl trimite către script-ul serverului pentru a procesa datele introduse de utilizator în formular. Dacă creăm un buton care șterge formularul, atunci atribuim atributul <b>tip</b> valoarea „reset”. element <b><input> </b> tip <b>Trimite</b> poate fi atribuit un atribut opțional <b>Nume</b>. Atribut <b>valoare</b> folosit în acest element pentru a specifica textul care indică eticheta de pe buton. În mod implicit, browserele au scris „Trimite” pe buton, dacă nu sunteți mulțumit de acest text, introduceți-l singur; Deoarece stilurile butoanelor de confirmare pot diferi în diferite browsere, este mai bine să personalizați singur stilul butonului folosind instrumente CSS sau să utilizați butoane grafice. <br>Crearea butoanelor de confirmare și ștergere:</p> <h3>Exemplu: se utilizează trimiterea și resetarea</h3> <ul><li>Incearca-l tu insuti "</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Abonati-va"><input name="reset" type="reset" value="clar"><p>Făcând clic pe butonul Resetare, se resetează toate datele introduse de utilizator.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Abonati-va"> <input name="reset" type="reset" value="clar"> </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>atribut de acțiune.</h2> <p>Element principal <b><form> </b> este un atribut <b>acțiune</b>, care specifică handlerul de date pentru formular. Un handler de date este un fișier care descrie ce trebuie făcut cu datele din formular. Rezultatul acestei procesări este o nouă pagină HTML care este returnată în browser. Cu alte cuvinte, în atribut <b>acțiune</b> specifică calea URL către un fișier de gestionare de pe server (numit uneori o pagină de script) pentru procesarea formularului. Sintaxa este următoarea:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Fișierul de procesare se află pe server <i>mytestserver.com</i>în dosar <i>folderul de nume</i>și numele script-ului serverului care va procesa datele - <i>obrabotchik.php</i>. 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. <br>Este recomandabil să setați întotdeauna valoarea atributului <b>acțiune</b>. 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="".</p> <h2>atributul metodei</h2> <p>Atribut <b>metodă</b> 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: <b>OBȚINE</b>Și <b>POST</b>. Metoda poate fi setată la oricare alegeți, iar dacă nu o specificați, va fi folosită cea implicită <b>OBȚINE</b>. Să luăm în considerare utilizarea fiecăruia dintre ele.</p> <h2>metoda POST</h2> <p>Metodă <b>POST</b> 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 <b>POST</b> 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 <b>POST</b> utilizate pentru a transfera date confidențiale, cum ar fi parolele, detaliile cardului bancar și alte informații personale ale utilizatorilor. Metodă <b>POST</b> potrivită și pentru trimiterea unor volume mari de informații, deoarece spre deosebire de metodă <b>OBȚINE</b>, nu are restricții privind numărul de caractere transmise.</p> <h2>metoda GET</h2> <p>După cum știți deja, sarcina principală a unui browser este să primească pagini web de la server. Deci atunci când folosești metoda <b>OBȚINE</b>, browserul dvs. preia pur și simplu pagina web așa cum o face întotdeauna. Metodă <b>OBȚINE</b> 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 <b>OBȚINE</b>, 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:</p><p> <form action="" method="GET"> </p><p>acestea. a inlocui <b>POST</b> pe <b>OBȚINE</b>.<br>Salvați fișierul sub numele <i>nume_fișier.html</i>și reîmprospătați pagina browserului (F5), apoi completați formularul, de exemplu <i>Vasya Pupkin</i>și faceți clic pe butonul „Trimite”. În bara de adrese a browserului dvs. veți vedea ceva de genul acesta:</p><p>File_name.html?firstname=Vasya&lastname=Pukin</p><p>Acum puteți vedea numele fiecărui element de formular, precum și valoarea acestuia, chiar aici în URL. <br>Adresa URL este separată de restul datelor din formular printr-un semn de întrebare, iar numele și valorile variabilelor sunt separate printr-un ampersand <b>(&) </b>.<br>Această metodă ar trebui utilizată dacă nu transferați cantități mari de informații. <br>Această metodă nu va funcționa dacă datele din formularul dvs. sunt sensibile, cum ar fi stocarea unui număr de card bancar sau a unei parole. <br>În plus, metoda <b>OBȚINE</b> este nepotrivit dacă doriți să trimiteți fișiere către server împreună cu formularul.</p> <h2>Gruparea elementelor de formular</h2> <p>Elementele de formular care sunt legate în sens pot fi grupate între etichete <b><fieldset> </b>Și <b></fieldset> </b>. Browserul va fi afișat <b><fieldset> </b> sub forma unui cadru în jurul unui grup de elemente de formă. Aspectul cadrului poate fi modificat folosind Cascading Style Sheets (CSS). <br>Pentru a adăuga un titlu pentru fiecare grup, veți avea nevoie de un element <b><legend> </b>, care specifică textul titlului grupului care va fi încorporat în cadru.</p> <p>O zi bună, iubitori de dezvoltare web și cei care doresc să-și creeze propriul site. Înainte de asta, toate publicațiile mele erau dedicate elementelor de bază ale limbajului, modalităților 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 web destul de bun. Cu toate acestea, va fi incomplet fără subiectul de astăzi: „Crearea de formulare în html”.</p> <p>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 afla de ce trebuie să folosești formulare, ce etichete sunt folosite pentru a crea și vei putea, de asemenea, să încerci exemple concrete în practică. Să începem!</p> <h2>Ce este o formă și cum funcționează?</h2> <blockquote> <p><b>Formă</b>– acesta este unul dintre cele mai importante obiecte, care este destinat schimbului de date de informații între server și utilizator.</p> </blockquote> <p>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.</p> <blockquote> <p>Formularul este specificat folosind un element special de limbaj html <b><form> </b>.</p> </blockquote> <p>Rețineți că documentul de cod poate conține mai multe declarații de etichetă <b><form> </b>, cu toate acestea, o singură cerere poate fi trimisă către server pentru a procesa datele. De aceea, informațiile care sunt introduse de utilizator în câmpurile prevăzute pentru aceasta și care se referă la diferite formulare nu ar trebui să fie dependente. De asemenea, nu este permisă cuibărarea formelor una în cealaltă.</p> <p>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:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemplu</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemplu</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript">  </script><br> <br> </body> </html></p> <p>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.</p> <h2>Trimiterea datelor pe partea serverului</h2> <p>Pentru a trimite informațiile tastate (sau selectate) într-o casetă de dialog, trebuie să utilizați mecanismul standard - <b>Buton de trimitere</b>.</p> <blockquote> <p>Codul pentru o astfel de metodă arată astfel: <b><input type="submit"> </b></p> </blockquote> <p>Când rulați linia prezentată, va apărea un buton cu inscripția: „Trimite”.</p> <p>O altă modalitate de a trimite date către server este să apăsați tasta Enter din caseta de dialog.</p> <p>După confirmarea trimiterii informațiilor specificate, aceasta nu ajunge imediat pe server. În primul rând, este procesat de browser, rezultând forma „nume=valoare”.</p> <p>Parametrul atribut este responsabil pentru nume <b>tip</b> etichetă <b><input> </b>, iar valoarea sunt datele introduse de utilizator. Apoi, șirul convertit este transmis handler-ului, care este cel mai adesea specificat în atribut <b>acțiune</b> element <b><form> </b>.</p> <p>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.</p><p>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 folosind alte limbi. Astfel, limbile server-side sunt considerate a fi: Python, php, limbaje asemănătoare C (C#, C etc.), Java și altele.</p> <p>Acum aș vrea să mă opresc și să vorbesc mai mult despre element <b><input> </b>. Pentru a explica în termeni simpli, atunci <b><input> </b> necesare pentru a crea câmpuri de text, butoane radio, diverse butoane, câmpuri ascunse, casete de selectare și alte obiecte.</p> <p>Eticheta nu trebuie să fie asociată <b><form> </b>, 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.</p> <p>Principalele atribute ale acestui element de limbaj de marcare hipertext sunt:</p> <ul><li><b>Text</b>– creează un câmp de text;</li> <li><b>Trimite</b>– creează un buton pentru trimiterea datelor către server;</li> <li><b>Imagine</b>– este responsabil pentru butonul cu poza;</li> <li><b>Resetați</b>– setează un buton pentru a șterge formularul;</li> <li><b>Parola</b>– setează un câmp de text special pentru parole;</li> <li><b>Caseta de bifat</b>– responsabil pentru câmpurile cu casete de selectare;</li> <li><b>Radio</b>– responsabil de câmpuri cu selectarea unui element;</li> <li><b>Buton</b>– creează un buton;</li> <li><b>Ascuns</b>– folosit pentru câmpuri ascunse;</li> <li><b>Fişier</b>– setează câmpul responsabil pentru trimiterea fișierelor.</li> </ul><h2>Metode de transmitere a informațiilor</h2> <p>Există 2 moduri de a transfera datele utilizatorului pe partea serverului: <b>obține</b>Și <b>Post</b>. 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.</p> <table><tbody><tr><td width="260"> </td> <td width="260">Post</td> <td width="260">obține</td> </tr><tr><td width="260">Dimensiunea documentelor transmise</td> <td width="260">Limitat la partea serverului.</td> <td width="260">Maxim – 4 KB.</td> </tr><tr><td width="260">Cum sunt afișate informațiile trimise</td> <td width="260">Disponibil numai atunci când este vizualizat prin extensii de browser sau alte produse software speciale.</td> <td width="260">Imediat disponibil pentru toată lumea.</td> </tr><tr><td width="260">Utilizarea marcajelor</td> <td width="260">Nu există nicio modalitate de a adăuga la marcaje, deoarece solicitările nu sunt repetate (toate paginile leagă la o singură adresă).</td> <td width="260">Orice pagină cu o solicitare poate fi salvată ca marcaje și returnată la ea mai târziu.</td> </tr><tr><td width="260">Memorarea în cache</td> <td width="260">Pe baza paragrafului anterior, toate cererile sunt pe o singură pagină.</td> <td width="260">Fiecare pagină poate fi memorată în cache separat.</td> </tr><tr><td width="260">Scop</td> <td width="260">Folosit pentru a trimite fișiere mari (cărți, imagini, videoclipuri etc.), mesaje, comentarii.</td> <td width="260">Excelent pentru a căuta valorile solicitate pe o resursă web sau pentru a trimite mesaje text scurte.</td> </tr></tbody></table><p>Pentru a indica care dintre cele două metode de transfer de date să funcționeze pentru browser, în element <b><form> </b> utilizați parametrul furnizat <b>metodă</b>(De exemplu, <b>method="post"</b>).</p> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/prostaia-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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 <b>Post</b>.</p> <p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>metoda POST</title> </head> <body> <p>Introduceți informațiile dvs. personale!</p> <form action="handler.php" method="post"> <p><input name="name" value = "Nume"> <input name="fam" value = "Nume de familie"> <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> <input type="password" name="pass" value = "Parola"> </p> <p><input type="submit"></p> </form> <script type="text/javascript">  </script><br> <br> </body> </html></p> <p>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.</p> <h2>Crearea unui panou de înregistrare</h2> <p>Au fost acoperite etichetele și atributele de bază. De aceea, este timpul să creați un formular de înregistrare cu drepturi depline utilizând marcajul în stil CSS și validând datele introduse. Desigur, nu vom putea vedea cum serverul funcționează cu ei, dar vom oferi designul și detaliile importante.</p> <table><tr><td class="line_numbers"> 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 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Înregistrare</title> <style> </style> </head> <body> <form> <fieldset> <legend>inregistrare pe site</legend> <h4> </h4> <p>Nume: <input name="name" autofocus required ></p> <p>Nume de familie: <input name="fam" required></p> <p>E-mail: <input type="email" required></p> <p>Parola: <input type="password" name="pass" required></p> <p>Repetați parola: <input type="password" name="pass" required></p> <p><input type="submit" value="Inregistreaza-te"></p> </fieldset> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Înregistrare</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h4 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>inregistrare pe site</legend> <h4>Pentru o lucrare corectă ulterioară în serviciul nostru, vă rugăm să introduceți datele corecte!</h4> <p>Nume: <input name="name" autofocus required ></p> <p>Nume de familie: <input name="fam" required></p> <p>E-mail: <input type="email" required></p> <p>Parola: <input type="password" name="pass" required></p> <p>Repetați parola: <input type="password" name="pass" required></p> <p><input type="submit" value="Inregistreaza-te"></p> </fieldset> </form> <script type="text/javascript">  </script><br> <br> </body> </html></p> <p>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. 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 <b>autofocus</b>.</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Vă recomandăm alte articole</div> <div class="items"> <div class="item"> <a href="https://radiobud.ru/ro/life-hacks-for-smartphones/remont-sotovyh-telefonov-meizu-remont-telefonov-meizu-v-den-obrashcheniya.html" class="item__link"> <img src="/uploads/ff36ff6325b720c0676eef5527071257.jpg" width="220" height="170" alt="Reparație telefon Meizu în aceeași zi Cele mai frecvente apeluri către centrul nostru de reparații Meizu" class="item__image" / loading=lazy loading=lazy> <div class="item__title">Reparație telefon Meizu în aceeași zi Cele mai frecvente apeluri către centrul nostru de reparații Meizu</div> </a> </div> <div class="item"> <a href="https://radiobud.ru/ro/program/privet-napishi-mne-svoi-nomer-telefona-odnoklassniki-privet.html" class="item__link"> <img src="/uploads/723e3423def13e650b9d7a2870c034af.jpg" width="220" height="170" alt="Bună, trimite-mi un mesaj cu numărul tău de telefon" class="item__image" / loading=lazy loading=lazy> <div class="item__title">Bună, trimite-mi un mesaj cu numărul tău de telefon</div> </a> </div> <div class="item"> <a href="https://radiobud.ru/ro/instructions/chto-takoe-blog-wordpress-i-zachem-on-nuzhen-preimushchestva-i-nedostatki.html" class="item__link"> <img src="/uploads/21fe0d9120d20ea38e3ddf991ecb0527.jpg" width="220" height="170" alt="Avantajele și dezavantajele WordPress Ce este WordPress și cum să-l folosești" class="item__image" / loading=lazy loading=lazy> <div class="item__title">Avantajele și dezavantajele WordPress Ce este WordPress și cum să-l folosești</div> </a> </div> </div> </div> </div> </main> <aside class="sidebar"> <div class="section"> <div class="section__headline">Cel mai popular</div> <div class="sidebar-items"> <a class="sidebar-item" href="https://radiobud.ru/ro/iron/strukturirovannaya-kabelnaya-sistema-9395-strukturirovannaya-kabelnaya.html"> <img src="/uploads/5679ea6502f442f1d16b2ff786c23800.jpg" width="75" height="75" alt="Sistem de cablare structurată (SCS)" class="sidebar-item__image" / loading=lazy loading=lazy> <div class="sidebar-item__title">Sistem de cablare structurată (SCS)</div> </a> <a class="sidebar-item" href="https://radiobud.ru/ro/ios/twitch-servis-dlya-video-translyacii-strimov-tvich-twitch-chto-eto-i-kak.html"> <img src="/uploads/1f958fdf321dbf166a6a3c7b86b18479.jpg" width="75" height="75" alt="Twitch: ce este și cum funcționează?" class="sidebar-item__image" / loading=lazy loading=lazy> <div class="sidebar-item__title">Twitch: ce este și cum funcționează?</div> </a> <a class="sidebar-item" href="https://radiobud.ru/ro/reviews/kak-prazdnovat-letnee-solncestoyanie-kak-prazdnovat-letnee-solncestoyanie.html"> <img src="/uploads/18a97b1c3a444ef58070da59202dc921.jpg" width="75" height="75" alt="Cum să sărbătorim solstițiul de vară Emmanuelle Daguerre: un solstițiu de vindecare" class="sidebar-item__image" / loading=lazy loading=lazy> <div class="sidebar-item__title">Cum să sărbătorim solstițiul de vară Emmanuelle Daguerre: un solstițiu de vindecare</div> </a> <a class="sidebar-item" href="https://radiobud.ru/ro/internet/programmirovanie-mikrokontrollerov-dlya-nachinayushchih-legko-i.html"> <img src="/uploads/ace204ea07f98eba1735a36a4ab8ecb6.jpg" width="75" height="75" alt="Programare microcontrolere AVR pentru începători Programare controlere AVR pentru începători" class="sidebar-item__image" / loading=lazy loading=lazy> <div class="sidebar-item__title">Programare microcontrolere AVR pentru începători Programare controlere AVR pentru începători</div> </a> <a class="sidebar-item" href="https://radiobud.ru/ro/life-hacks-for-ios/pochemu-planshet-ne-vyklyuchaetsya-chto-delat-zavis-planshet---chto-delat-vozmozhnye.html"> <img src="/uploads/2df7bea5ce83ad887e3040165488a737.jpg" width="75" height="75" alt="Tableta congelată - ce să faci?" class="sidebar-item__image" / loading=lazy loading=lazy> <div class="sidebar-item__title">Tableta congelată - ce să faci?</div> </a> <a class="sidebar-item" href="https://radiobud.ru/ro/program/videonablyudenie-cherez-usb-kameru-besprovodnaya-usb-kamera-kupit.html"> <img src="/uploads/c5ad1ebb2eec805aceb765a476962621.jpg" width="75" height="75" alt="Cameră wireless USB cumpărați o mini cameră wireless pentru computer Cameră digitală cu ieșire USB" class="sidebar-item__image" / loading=lazy loading=lazy> <div class="sidebar-item__title">Cameră wireless USB cumpărați o mini cameră wireless pentru computer Cameră digitală cu ieșire USB</div> </a> </div> </div> <script> // <![CDATA[ $(document).ready(function() { var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left: left + 'px', position: 'fixed', top: "50px", width: width + "px" }); } else { $('#float-sidebar').css({ position: 'static', }); } }); }); // ]]> </script> <div id="float-sidebar"> <div id="laqybe1" style="height:500px;width:270px;" align="center"></div> </div> </aside> </div> <footer class="footer"> <div class="footer-left"> <div class="footer__logo"> <div class="footer__logo-sitename">radiobud.ru</div> </div> <div class="footer__copyright"> <p>© 2024 - radiobud.ru <br /></p> <p>Recenzii, hack-uri de viață, jocuri, programe</p> </div> <nav class="footer__nav-1"> <ul> <li class="menu-item type-post_type object-page "><a href="https://radiobud.ru/ro/sitemap.xml">Harta site-ului</a></li> </ul> </nav> </div> <nav class="footer__nav-2"><ul> <li class="menu-item type-taxonomy object-category "><a href="https://radiobud.ru/ro/feedback.html">Contacte</a></li> <li class="menu-item type-taxonomy object-category "><a href="">Publicitate</a></li> <li class="menu-item type-taxonomy object-category "><a href="">Despre site</a></li> </ul></nav> <div class="footer__counters"> </div> <div class="footer__note"></div> </footer> </div> </div> <script type='text/javascript' src='https://radiobud.ru/wp-content/themes/radiobud.ru/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1","visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://radiobud.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://radiobud.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> <script type="text/javascript">  </script><br> <br> </body> </html>