Un formular simplu de introducere a datelor html. Ce este o formă și cum funcționează. Atributele formularului - etichetă

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 și a capacităților corespunzătoare sistem 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).

Formulare HTML transmite informații către programele de gestionare sub formă de perechi [nume variabilă]=[valoare variabilă] . Trebuie specificate numele variabilelor 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 de 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.

Stabilește 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 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 destule să scriem cel mai simplu HTML forma (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 rețele locale
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 element ascuns date care nu sunt vizibile pentru utilizator la completarea formularului și sunt transferate procesorului fără modificări. Uneori este util să aveți un astfel de element pe un formular care este reproiectat din când în când, astfel încât gestionarea 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, returnează formularul HTML la starea initiala. Deoarece nu sunt transmise date managerului atunci când utilizați acest buton, este posibil ca un buton de resetare să nu aibă atributul numelui.

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 <a href="https://radiobud.ru/ro/life-hacks-for-pc/kakie-atributy-yavlyayutsya-obyazatelnymi-dlya-tega-input-adresa-elektronnoi-pochty.html">atributul necesar</a> NAME , 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ă elemente 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 transferat către handler (î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 la handler, ele pot fi convertite în obiectele caracter corespunzătoare.</p> <h3>Exemplu:</h3> <p>Pentru a demonstra utilizarea formularelor HTML pe care le-am scris <a href="https://radiobud.ru/ro/ios/kak-ispolzovat-programmu-itunes-nebolshoi-manual-po-itunes.html">program mic</a>î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 grozave, 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 vă pune la dispoziție un mecanism destul de puternic pentru trimiterea conținutului formularului prin <a href="https://radiobud.ru/ro/life-hacks-in-vk/bezopasnaya-elektronnaya-pochta-bez-slezhki-bezopasnaya-elektronnaya-pochta.html">e-mail</a>. 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>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>. Oferă un container pentru tot conținutul formularului, inclusiv elemente precum câmpurile de text și butoanele, precum și orice alte etichete <a href="https://radiobud.ru/ro/life-hacks-for-smartphones/osnovy-html-dlya-nachinayushchih-na-ponyatnom-yazyke-yazyk-html-dlya.html">limbaj HTML</a>. 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 <a href="https://radiobud.ru/ro/program/vvedenie-v-klient-servernye-tehnologii-veb-protokol-http-metody-i-struktura.html">Metoda HTTP</a>, pe care browserele trebuie să le folosească 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). <a href="https://radiobud.ru/ro/computers/harakteristiki-materinskoi-platy-asus-maximus-4-extreme-obzor-i-testirovanie.html">Aspect</a> element <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>Una dintre cele mai <a href="https://radiobud.ru/ro/life-hacks-for-ios/prostye-tipy.html">tipuri simple</a> Elementele de formular este un câmp de text conceput pentru a introduce text dintr-o singură linie. <a href="https://radiobud.ru/ro/game/transact-sql-tipy-dannyh-sql-tipy-dannyh.html">Acest tip</a> introducerea textului este setată implicit și, prin urmare, este câmpul cu o singură linie care va fi afișat dacă uitați să specificați atributul <b>tip</b>. Pentru a adăuga un câmp de introducere a textului cu o linie la 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 obișnuit <a href="https://radiobud.ru/ro/life-hacks-wi-fi/podvinut-polya-vo-vsem-dokumente-kak-nastroit-tekstovoe-pole-v-microsoft.html">câmp de text</a>. 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ă <a href="https://radiobud.ru/ro/life-hacks-for-pc/maksimalnoe-kolichestvo-zaprosov-v-yandekse-kak-polzovatsya.html">suma maxima</a> caractere care pot fi introduse <a href="https://radiobud.ru/ro/program/kak-obedinit-yacheiki-v-excel-bez-poteri-dannyh-obedinenie-strok-stolbcov.html">această linie</a>. 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 <a href="https://radiobud.ru/ro/instructions/shestnadcaterichnyi-kod-cveta-cvet-v-stilyah-mozhno-zadavat.html">sens diferit</a> atribut <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. <a href="https://radiobud.ru/ro/life-hacks-for-ios/funkcionalnaya-zavisimost-bazy-dannyh-zavisimosti-mezhdu.html">Acest atribut</a> 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>Butoanele de trimitere și 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ți” pe buton, dacă nu sunteți mulțumit de această inscripție, introduceți-o 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>Atributul de acțiune.</h2> <p>Principal pentru element <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 handler de pe server (uneori numită 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 transmite date confidențiale, cum ar fi parole, detalii de card 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, 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>URL-ul 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> <br><p>Formularele în HTML sunt cele mai complexe, dar pe de altă parte, poate cel mai interesant subiect în HTML.</p> <p>Formularele web permit vizitatorilor site-ului să introducă această sau acea informație în câmpuri speciale, iar dezvoltatorul le primește într-o formă convenabilă pentru el.</p> <p>Un exemplu de formular ar putea fi o carte de oaspeți, un chestionar sau un test online. Formularele se completează la înregistrarea pe site, la plasarea comenzilor într-un magazin online etc.</p> <p>Folosind HTML, puteți crea un cadru de formular: câmpuri de text, meniuri, liste, butoane, casete de selectare și butoane radio. Adică acele elemente cu ajutorul cărora anumite informații sunt introduse în formular.</p> <p>Apoi datele introduse în formular sunt trimise către server pentru procesare. Dar HTML este neputincios aici - un program sau script care este atașat la acesta lucrează deja la procesarea formularului. Astfel de programe sunt de obicei scrise în PHP sau JavaScript.</p> <h4>Atributele formularului - etichetă <form></h4> <p>Pot exista mai multe formulare pe o pagină web ( <i>atât cât are nevoie dezvoltatorul</i>). Fiecare dintre ele începe cu eticheta <form>și se termină cu o etichetă de închidere</form> .</p> <p><a href="https://radiobud.ru/ro/life-hacks-for-pc/pobochnyi-register-form-php-php-self-v-atribute-formy-action.html">atribut de acțiune</a> este obligatoriu pentru orice formular - se specifica adresa la dosarul care deserveste formularul ( <i>prelucrează datele introduse în acesta</i>).</p> <p>Atributul method specifică modul în care va fi trimis conținutul formularului. Există două metode - GET și POST. Acum nu are sens să ne aprofundăm în acești parametri, deoarece subiectul trimiterii de informații folosind metodele GET și POST se referă la limbaje de procesare a datelor ( <i>de exemplu PHP</i>). Este suficient să știți că este metoda de transfer de date POST care este folosită în majoritatea cazurilor în formulare.</p> <p>Atributul numelui etichetei <form>este opțională. Dar dacă există mai multe formulare în document, atunci fiecare dintre ele trebuie să fie identificată cumva de către handler. Prin urmare, prezența atributului nume în acest caz este necesară - specifică numele unic al formularului.</p> <p>De asemenea, puteți seta codificarea datelor de intrare - atributul accept-charset este responsabil pentru aceasta și, de asemenea, folosind atributul țintă, definiți fereastra în care va fi afișat rezultatul procesării formularului trimis ( <i>într-o fereastră nouă sau curentă</i>).</p> <p>Dar eticheta în sine <form>nu are sens, deoarece formularul transmite date care mai întâi trebuie introduse undeva!</p> <h4>Introducere a datelor. Câmpuri de formular - etichetă <input></h4> <p>Etichetă <input>Aceasta este cea mai frecventă etichetă găsită în formulare. Este conceput pentru a crea diverse elemente care servesc la introducerea datelor într-un formular: câmpuri de text, butoane, casete de selectare, butoane radio.</p> <p>tipul este atributul principal al etichetei <input>. Setează tipul câmpului ( <i>element</i>) formează:</p> <table width="100%" border="1"><tr><td width="300px"> <p>Valoare de atribut tip="..."</p> </td> <td width="245px"> <p>Rezultat</p> </td> <td> <p>Descriere</p> </td> </tr><tr><td> <p><input type="text" size="20" value="Numele dumneavoastră..." ></p> </td> <td align="center"><form> <input type="text" size="20" value="Numele dumneavoastră..."></form> </td> <td><p>Câmp de text cu o singură linie pentru introducerea textului. Atributul size specifică lățimea câmpului în caractere.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"><form> <input type="password" maxlength="10" size="20"></form> </td> <td><p>Câmp text pentru introducerea unei parole. <br>Atributul maxlength stabilește numărul maxim de caractere care pot fi introduse</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> <form> <input type="radio" name="radio" value="1" checked> 1 <input type="radio" name="radio" value="2"> 2 <input type="radio" name="radio" value="3"> 3 </form> </td> <td><p>Intrerupator. <br>Puteți selecta o singură opțiune dintre cele oferite. Atributul verificat specifică un câmp pre-verificat.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> <form> <input type="checkbox" checked>1 <input type="checkbox">2 <input type="checkbox">3 </form> </td> <td><p>Caseta de bifat. <br>Există mai multe opțiuni din care să alegeți.</span> Atribut <span>verificat definește un câmp pre-verificat.</p> </td> </tr><tr><td><p><input type="button" value="Buton" ></p> </td> <td align="center"><form> <input type="button" value="Buton"></form> </td> <td><p>Buton. <br>Atributul value setează eticheta butonului.</p> </td> </tr><tr><td><p><input type="reset" value="Resetați" ></p> </td> <td align="center"><form> <input type="reset" value="Resetați"></form> </td> <td><p>Butonul de resetare. <br>Returnează câmpurile formularului la forma lor originală. Resetați datele introduse.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"><form> <input type="submit"></form> </td> <td><p>Buton pentru trimiterea datelor introduse.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"><form> <input type="file"></form> </td> <td><p>Câmp pentru introducerea numelui fișierului trimis.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"><form> <input type="image" src="img/buttom.gif"></form> </td> <td><p>Buton-imagine. <br>De asemenea, este folosit pentru a trimite date către server. Atributul src specifică adresa fișierului imagine.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"><form> <input type="hidden" size="20"></form> </td> <td><p>Câmp ascuns - invizibil pentru utilizator.</p> </td> </tr></table><h3>Meniu derulant - Etichete <select>Și <option></h3> <p>Etichetă <select>la fel ca eticheta <input>servește la colectarea informațiilor - creează o listă din care pot fi selectate unul sau mai multe elemente. Fiecare element corespunde unei valori, care este trimisă serverului pentru procesare.</p> <p>Tipul listei create depinde de valoarea atributului dimensiune: cu dimensiune= "1" ( <i>valoare implicită</i>) lista va fi drop-down.</p> <p>O valoare diferită pentru atributul dimensiune va corespunde numărului de elemente din listă afișate. De exemplu, cu size="3" , trei elemente vor fi vizibile. Pentru a vizualiza alte elemente din listă ( <i>Dacă există</i>) ar trebui să utilizați bara de defilare verticală, care este adăugată automat.</p> <p>În mod implicit, poate fi selectat un singur element din listă. Adăugarea atributului multiplu la o etichetă <select>vă permite să selectați mai multe elemente din listă folosind mouse-ul și tastele Ctrl și Shift.</p> <p>Dacă atributul multiplu este prezent, toate sau o parte din elementele listei vor fi afișate ( <i>in functie de browser</i>), cu excepția cazului în care atributul dimensiune este setat la un anumit număr de elemente vizibile.</p> <p>Elementul necesar al listei derulante este eticheta <option>. Se află în interiorul etichetei <select>și creează fiecare element din listă.</p> <p>Folosind atributul nume al etichetei <select>listei primește un nume și folosind atributul value al etichetei <option>elementului de listă i se atribuie o valoare. Astfel, o pereche „nume=valoare” este trimisă către server - numele listei și valoarea elementului/elelor selectate.</p> <p>Atributul selectat al unei etichete <option>definește un element din listă selectat anterior, iar atributul dezactivat blochează elementul din listă - nu poate fi selectat.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>Direcția cardinală este una dintre cele patru direcții principale:</p> <br> <select name= "storona" > <br> <option value= "Nord" >Nord</option><br> <option value= "Sud" >Sud</option><br> <option value= "Vest" >Vest</option><br> <option value= "Est" >Est</option> <br> </select><br><p>7 minuni ale lumii!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >Piramida lui Keops</option><br> <option value= "2" selected> <span>Grădinile Suspendate ale Babilonului</span> </option><br> <option value= "3" disabled> <span>Statuia lui Zeus din Olimpia</span> </option><br> <option value= "4" > <span>Templul lui Artemis din Efes</span> </option><br> <option value= "5" > <span>mausoleul din Halicarnas</span> </option><br> <option value= "6" > <span>Colosul din Rhodos</span> </option><br> <option value= "7" > <span>farul alexandrin</span> </option><br> </select><br><p> <input type= "reset" value= "Resetați" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <form> <p>Direcția cardinală este una dintre cele patru direcții principale:</p><p>Nord sud-vest est</p><p>7 minuni ale lumii!</p><p>Piramida lui Keops Grădinile suspendate din Babilon Statuia lui Zeus la Olimpia Templul lui Artemis din Efes Mausoleul din Halicarnas Colosul din Rodos Farul din Alexandria</p><p><input type="reset" value="Resetați"></p> </form> <h3>Câmp text cu mai multe linii - etichetă <textarea></h3> <p>Etichetă <textarea>creează un câmp text cu mai multe linii. Este permis să se facă întreruperi de linie în el, care sunt păstrate la transmiterea datelor către handler.</p> <p>Atributul numelui etichetei <textarea>este obligatoriu - folosindu-l, câmpului de text i se dă un nume.</p> <p>Atributul dezactivat dezactivează câmpul - conținutul câmpului nu poate fi modificat și nu este accesibil. Atributul readonly indică faptul că câmpul este doar pentru citire - utilizatorul nu are capacitatea de a edita conținutul, dar este disponibil - poate fi selectat și, de exemplu, copiat.</p> <p>Puteți seta lățimea câmpului de text în caractere și înălțimea câmpului în linii folosind atributele cols și, respectiv, rânduri.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Dacă conținutul câmpului depășește dimensiunea acestuia, va apărea un glisor.</span>

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

Exemplu de utilizare a unui formular

Acum să vedem cum funcționează formularul.

Formular de comandă video educațional:

Formularele HTML sunt elemente complexe de interfață. Acestea includ diferite elemente funcționale: câmpuri de intrare Și , liste <select>, sfaturi etc. Tot codul formularului este conținut în element <form> .</p> <p>Majoritatea informațiilor din formularele web sunt transmise folosind elementul <input>. Pentru a introduce un rând de text, utilizați elementul <input type="text">, pentru mai multe linii - element <textarea>. Element <select>creează o listă derulantă.</p> <p>Element <label>creează etichete pentru câmpurile de formular. Există două moduri de a grupa etichetele și câmpurile. Dacă câmpul se află în interiorul unui element <label>, atunci nu trebuie specificat atributul for.</p><p> <label for="lastname">Nume</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Nume</label> <label>Nume <input type="text" name="lastname"></label> </p><p>Câmpurile formularului pot fi împărțite în blocuri logice folosind elementul <fieldset>. Fiecare secțiune poate fi denumită folosind elementul <legend> .</p><p> <fieldset> <legend>Informații de contact</legend> <label>Nume <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Orez. 1. Gruparea câmpurilor formularului</p><p>Pentru a face formularul mai ușor de înțeles pentru utilizatori, textul este adăugat în câmpurile formularului pentru a oferi un exemplu de date de intrare. Acest tip de text se numește text wildcard și este creat folosind atributul substituent.</p> <p>Câmpurile obligatorii trebuie de asemenea evidențiate. Înainte de HTML5, simbolul asterisc * era folosit lângă numele câmpului. Noua specificație introduce un atribut obligatoriu special, care vă permite să marcați un câmp obligatoriu la nivel de marcare. Acest atribut indică browserului (presupunând că acceptă HTML5) să nu trimită date după ce utilizatorul dă clic pe Trimite până când câmpurile specificate sunt completate.</p><p> <input type="text" required placeholder="Numele dumneavoastră"> </p><p>Pentru a schimba aspectul unui câmp de text atunci când primește focalizare, utilizați pseudoclasa de focalizare. De exemplu, puteți întuneca fundalul câmpului curent sau puteți adăuga un chenar colorat pentru a-l scoate în evidență de restul:</p><p>Intrare: focus ( fundal: #eaeaea; )</p><p>Un alt atribut HTML5 util este atributul autofocus. Vă permite să setați automat focalizarea pe câmpul inițial dorit pentru elemente <input>Și <textarea>(doar un element din fiecare formular).</p> <h2>Exemplu de creare a unui formular de înregistrare</h2> <p><b>Marcaj HTML</b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Înregistrare</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nume</label> <input type="text" name="name" required> </div> <div class="radio">Podea <label> <input type="radio" name="sex" value="masculin">masculin <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="Femeie">Femeie <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">O tara</label> <select name="country"> <option>Selectați țara de reședință</option> <option value="Rusia">Rusia</option> <option value="Ucraina">Ucraina</option> <option value="Bielorusia">Bielorusia</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Trimite</button> </form> </div> </p><p><b>Notă</b><br>action="form.php" - link către fișierul de gestionare a formularelor. Creați un fișier în codificare UTF-8, încărcați-l pe server și înlocuiți action="form.php" cu calea către fișierul de pe serverul dvs.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Orez. 2. Aspectul implicit al formularului <p>După cum puteți vedea din figură, fiecare element de formular are stiluri implicite de browser. Să ștergem stilurile și să stilăm elementele de formular.</p><p> Form-wrap ( lățime: 550px; fundal: #ffd500; chenar-rază: 20px; ) .form-wrap *(tranziție: .1s liniar) .profile ( lățime: 240px; float: stânga; text-align: center; umplutură) : 30px; ) form ( fundal: alb; float: stânga; lățime: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; culoare: #7b7b7b; ) .form-wrap:after, form div:after (conținut: ""; afișare: tabel; clar: ambele; ) form div ( margin-bottom: 15px; poziție: relativ; ) h1 ( font-size: 24px; font-weight: 400; poziție: relativ ; margin-top: 50px ) h1:after (conținut: "\f138"; font-size: 40px; font-family: FontAwesome; poziție: absolut; sus: 50px; stânga: 50%; transform: translateX(-50) %); /******************** stilul elementelor de formular ******************** ** / etichetă, span ( afișare: bloc; dimensiunea fontului: 14px; marginea inferioară: 8px; ) intrare, intrare ( lățime chenar: 0; contur: niciunul; margine: 0; lățime: 100%; umplutură: 10px 15px; fundal: #e6e6e6; ) input:focus, input:focus (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio etichetă ( poziție: relativă; padding-left: 50px; cursor: pointer; lățime: 50%; float: stânga; line-height: 40px; ) .radio input (poziție: absolut; opacitate: 0; ) .radio -control (poziție: absolut; sus: 0; stânga: 0; înălțime: 40px; lățime: 40px; fundal: #e6e6e6; chenar-rază: 50%; text-align: center; ) .male:before ( conținut: " \f222"; font-family: FontAwesome; font-weight: bold; ) .female:before (conținut: "\f221"; font-family: FontAwesome; font-weight: bold; ) .radio label:hover input ~ . control radio, .radiol input:focus ~ .radio-control (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:verificat ~ .radio-control (culoare: roșu; ) selectați ( lățime: 100%; cursor: indicator; umplutură: 10px 15px; contur: 0; chenar: 0; fundal: #e6e6e6; culoare: #7b7b7b; -webkit-appearance: none; /* debifați webkit -browsere */ -moz-appearance: none /*debifați în Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*debifați în IE*/ ) .select-arrow (poziție: absolute); sus: 38px; dreapta: 15px; latime: 0; inaltime: 0; pointer-evenimente: niciunul; /*activează afișarea listei când dai clic pe săgeată*/ border-style: solid; lățime chenar: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; buton ) ( umplutură: 10px 0; lățime chenar: 0; afișare: bloc; lățime: 120px; margine: 25px automat 0; fundal: #60e6c5; culoare: alb; dimensiune font: 14px; contur: niciunul; text-transform : majuscule ) /************************ adauga adaptabilitate la forma ******************** ** **/ @media (lățime maximă: 600 px) ( .form-wrap (marja: 20 px automat; lățime maximă: 550 px; lățime: 100 %;) .profil, form (float: niciunul; lățime: 100% ;) h1 (margin-top: automat; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;) )</p><p><b>Fișierul Form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: email-ul dvs.." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo „Vă mulțumesc! V-ați înregistrat cu succes.”; ) ?></p><p><b>Notă</b><br>În variabila $subiect, specificați textul care va fi afișat ca titlu al scrisorii; <br>Your_name - aici puteți specifica numele care va fi afișat în câmpul „de la cine este scrisoarea”; <br>înlocuiți your_site_url cu adresa site-ului cu formularul de înregistrare; <br>înlocuiți your_email cu adresa dvs. de e-mail; <br>$headers .= „Bcc: e-mail-ul tău”. „\r\n”; trimite BCC la adresa ta de e-mail.</p> <p>Având în vedere etichetele HTML de bază, nu putem să nu atingem un element atât de important precum formularele. Feedback-ul este adesea necesar pe paginile web. De exemplu, completarea unui formular pe site, înregistrare, autorizare, comentarii etc. În toate aceste cazuri, utilizatorul completează zone speciale (câmpuri de formular) pe pagină, după care datele sunt trimise către server. Formularele sunt folosite pentru a crea feedback. Un formular este un fragment dintr-un document HTML destinat introducerii utilizatorului.</p><p>Figura prezintă un formular de înregistrare a studenților pe site-ul web al unei instituții de învățământ.</p><p>Pentru a crea formularul se folosește un container <form></form> cu atributul action, care specifica pagina de pe server care va procesa datele trimise prin formular.</p><p>Structura în cea mai simplă formă:</p><p><formaction="адрес страницы обработчика формы"><br>elemente de forma... <br></form></p><p>Fiecare formular trebuie să aibă, de asemenea, un buton de trimitere pentru a trimite date după completarea formularului.</p><p>Structura butoanelor:</p><p><input type="submit" name="имя кнопки" value="Numele de afișare"></p><p>Deci, pentru a înregistra aproape toate elementele de formular, se folosește eticheta <input>cu atributul type. Pentru a crea un buton care resetează toate datele din formulare, se utilizează următoarea structură:</p><p><input type="reset" name="имя кнопки" value="Numele de afișare"></p><p>Pentru a crea un câmp de text, există un parametru de text. Se folosesc următorii parametri: nume – nume câmp; dimensiune – pentru câmpul în simboluri; maxlength – numărul maxim posibil de caractere din câmp; valoare – informații afișate implicit în formular</p><p>Exemplu de intrare de formular cu două câmpuri de text:</p><p><form action="obrabotka.php"><br>Introdu numele tau: <br><br><input type="text" name="name" size=”15” maxlength=”20” value="" ><br><br>Introduceți numele de familie: <br><br><input type="text" name="surname" size=”20” maxlength=”25” value="" ><br><br><input type="submit" name="otpravit" value="Trimite"><br><input type="reset" name="ochistit" value="clar"><br></form></p><p>Rezultatul formularului este prezentat în figură.</p><p><img src='https://i2.wp.com/webriz.ru/information/userfiles/1/saiti/1/forms/forma-html-primer.jpg.png' width="100%" loading=lazy loading=lazy></p><p>Dacă trebuie să introduceți o cantitate mare de informații într-un câmp de text, de exemplu, un comentariu, utilizați formularul pentru zona de text, care este creat folosind o etichetă <textarea>cu următoarele atribute: denumire – denumirea zonei; cols – numărul de coloane de zonă; rânduri – numărul de rânduri; wrap – metodă de înfășurare a liniilor (on – wrap lines, off – nu înfășurați linii).</p><p>La codul de mai sus, să adăugăm un câmp de zonă de text:</p><p>Un comentariu: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Rezultatul lucrului codului cu zona de text este prezentat în figură.

Următorul element al formularelor sunt listele, care vă permit să alegeți din setul de valori prezentat. Etichetele vă permit să creați un formular de listă

Pentru ca elementul să fie evidențiat la încărcarea paginii, este necesar în etichetă

O metodă similară de selecție este caseta de selectare și elementele de formular cu butonul radio. Diferența dintre aceste elemente este că o casetă de selectare vă permite să faceți selecții multiple, în timp ce un buton radio permite doar o singură selecție.

Structura unei casete de selectare și a unei intrări cu butonul radio:

text

Buton de radio:

text

În elementele specificate în structură, atributul bifat este utilizat în mod implicit pentru a evidenția o casetă de selectare și un buton radio. Un exemplu de utilizare a unei casete de selectare, a unui buton radio și a unui cod HTML este prezentat în figură.

Un alt element de formular este un buton, specificat folosind atributul type tag cu butonul valoare:

În codul specificat pentru crearea unui buton, există un parametru onclick, care specifică de obicei codul într-un limbaj de programare pentru a efectua o anumită acțiune atunci când se face clic pe acest buton:

Pentru a afișa un mesaj într-o fereastră specială, utilizați comanda JavaScript – aler. Rezultatul exemplului este prezentat în figură.

Pentru a insera o imagine într-un buton, utilizați codul prezentat în exemplul următor:

La înregistrarea și conectarea la site-uri web, se folosește un câmp cu un test ascuns, afișat ca stele. Acesta este elementul formularului de parolă:

Înregistrarea pe site este adesea împărțită în mai multe pagini și fiecare ulterioară trebuie să conțină informații din cea anterioară. Pentru a ascunde informațiile transmise se folosește elementul de formular ascuns:

Elementul de formular ascuns va fi invizibil în fereastra browserului.

Pentru a încărca fișiere pe server, formularele au un element fișier. Un exemplu de cod pentru încărcarea fișierelor pe server este prezentat mai jos:

Așadar, în acest subiect ne-am uitat la elemente de formular pentru crearea diferitelor pagini HTML, care, împreună cu handlere de script pe un computer sau server, vă permit să dezvoltați aplicații web cu drepturi depline.