Formulare HTML s sunt elemente complexe de interfață. Acestea includ diverse elemente functionale: câmpuri de introducere Ș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><a href="https://danykom.ru/ro/otsutstvie-utp-ili-ego-polnaya-bessmyslennost-blok-s/">Informații de contact</a></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 primiți focalizarea, utilizați pseudoclasa de focalizare. De exemplu, puteți întuneca fundalul câmpului curent sau puteți adăuga <a href="https://danykom.ru/ro/kak-sdelat-cvetnoi-kruzhok-krugluyu-ramku-vokrug-avatara-v/">rama colorata</a> pentru a-l face să iasă î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://i0.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://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Orez. 2. <a href="https://danykom.ru/ro/vneshnii-vid-i-vskrytie-upakovka-i-komplektaciya/">Aspect</a> forme implicite <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-sus: 50px; ) h1:după (conținut: „\f138”; dimensiunea fontului: 40px; familia de fonturi: FontAwesome; poziție: absolut; sus: 50px; stânga: 50%; transformare: translateX(-50) %); ) /************************ stilul elementelor de formular ******************** * **/ etichetă, span ( afișare: bloc; dimensiunea fontului: 14px; marginea inferioară: 8px; ) introducere, introducere ( lățime chenar: 0; contur: niciunul; marjă: 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: niciunul; /*debifați <a href="https://danykom.ru/ro/prosmotr-ne-sohranennyh-parolei-v-mozilla-firefox-paroli-v-brauzere-mozilla/">Mozilla Firefox</a>*/ ) select::-ms-expand ( display: none; /*debifează caseta în IE*/ ) .select-arrow (poziție: absolut; sus: 38px; dreapta: 15px; lățime: 0; înălțime: 0); pointer -events: none; /*activează afișarea listei când faceți clic pe săgeată*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; ) buton (padding : 10px 0; chenar -lățime: 0; afișare: bloc; lățime: 120px; marjă: 25px automat 0; fundal: #60e6c5; culoare: alb; dimensiune font: 14px; contur: niciunul; text-transform: majuscule; ) /**** ******************** adaugă adaptabilitate la formular ************************ / @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 <a href="https://danykom.ru/ro/rei-tomlinson-izobretatel-elektronnoi-pochty-skonchalsya/">E-mail</a>;<br>$headers .= „Bcc: e-mail-ul tău”. „\r\n”; trimite <a href="https://danykom.ru/ro/kak-polnostyu-udalit-vindovs-8-s-noutbuka-pereustanovka-sistemy-s/">bcc</a> la adresa ta de e-mail.</p> <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. Sfera de aplicare a formularelor nu se limitează la trimiterea de date către server; folosind script-uri client, puteți accesa orice element al formularului, îl puteți modifica ș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 pe server, utilizați <a href="https://danykom.ru/ro/mnozhestvennye-submit-dlya-formy-neskolko-knopok-otpravki-v-html-forme/">Buton de trimitere</a>, 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 către programul specificat de atributul de acțiune al elementului <form>. Browserul pregătește mai întâi informațiile 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 enumerați după <a href="https://danykom.ru/ro/znachok-wifi-s-voprositelnym-znakom-android-propal-wi-fi-na-noutbuke-v/">semnul întrebării</a>, specificate după adresa programului server și sunt separate printr-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ă codarea î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. Poate acționa ca un handler <a href="https://danykom.ru/ro/skachat-programma-konfigurator-servernoi-stoiki-konfiguratory-chto-takoe-konfigurator-serverov-i-za/">program server</a> sau un document HTML care include scripturi pe partea serverului (de exemplu, Parser). După ce handlerul efectuează acțiuni asupra datelor din formular, returnează un nou document HTML.</p> <p>Dacă atributul acțiune lipsește, <a href="https://danykom.ru/ro/udalyaem-stranicu-vord-v-konce-dokumenta-preobrazovanie-razryva-razdela-v/">pagina curenta</a> reîncarcă, 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 considerată plină sau <a href="https://danykom.ru/ro/kak-smenit-znachok-papki-na-svoi-ustanovka-ikon-s-pomoshchyu-iconpackager/">cale relativă</a> la 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 îl introduceți și apoi le înlocuiește când o introduceți din nou în câmpurile formularului. În acest caz, completarea automată poate fi dezactivată în setările browserului și nu poate fi modificată în acest caz folosind atributul de completare automată.</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 <a href="https://danykom.ru/ro/registraciya-apple-id-bez-kreditnoi-karty-kak-sozdat-apple-id-bez/">carduri bancare</a>), 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 - În loc de spații, puneți + , simbolurile precum literele rusești sunt codificate de ei <a href="https://danykom.ru/ro/fioletovyi-html-cvet-v-stilyah-mozhno-zadavat-raznymi-sposobami-po/">valori hexazecimale</a>(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 transfera date către <a href="https://danykom.ru/ro/v-nastroikah-chrome-net-nastroek-flash-komandy-adresnoi-stroki-brauzera-chrome/">bara de adresa</a>. 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 - <a href="https://danykom.ru/ro/zaprosy-get-post-i-put-protokola-http-ispolzovanie-metodov-get-i-post/">Metoda postului</a> trimite date către server într-o solicitare de browser. Acest lucru vă permite să trimiteți <a href="https://danykom.ru/ro/vse-chto-nuzhno-znat-o-macbook-pro-touch-bar---novoe-nashe-vse-displei-obladaet-bolshim/">cantitate mare</a> date decât sunt disponibile pentru metoda get, deoarece postarea nu are o limită de 4 KB. <a href="https://danykom.ru/ro/php-eksport-v-excel-bolshie-obemy-php-vygruzka-dannyh-v-excel-iz-bazy-mysql-eksport/">Volume mari</a> datele sunt folosite pe forumuri, <a href="https://danykom.ru/ro/chto-znachit-peredano-pochtovoi-sluzhbe-problemy-otslezhivaniya-posylok-pochty-rossii/">servicii poștale</a>, completarea bazei de date, la trimiterea fișierelor etc.</li> </ul><p><b>Valoare implicită</b></p> <h3>Nume</h3> <p>Definește <a href="https://danykom.ru/ro/kak-podobrat-domennoe-imya-dolzhno-byt-unikalnym-pravilo-2/">nume unic</a> forme. 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 formulare 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 țintă; 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 în <a href="https://danykom.ru/ro/otkryt-v-novoi-vkladke-sochetanie-klavish-hrom-kak-pereklyuchatsya/">filă nouă</a> 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"><a href="https://danykom.ru/ro/chto-takoe-operacionnaya-sistema-vidy-operacionnyh-sistem-kakaya-operacionnaya/">sistem de operare</a><Br> <input type="radio" name="answer" value="a3">Muscă cu dungi grozave</p> <p><input type="submit"></p> </form> </body> </html> <br><p>Formularele în HTML sunt cele mai complexe, dar, pe de altă parte, poate cele mai multe <a href="https://danykom.ru/ro/kak-sozdat-temu-v-hrome-interesnye-fakty-i-poleznye-sovety-testirovanie/">subiect interesant</a>în HTML.</p> <p>Formularele web permit vizitatorilor site-ului să introducă anumite informații în câmpuri speciale, iar dezvoltatorul le primește într-o formă convenabilă pentru el.</p> <p>Un exemplu de formă ar fi <a href="https://danykom.ru/ro/besposhchadnyi-guest-book-html-pishem-skript-gostevoi-knigi-ris-1odin-iz-variantov/">Cartea de oaspeti</a>, chestionar, <a href="https://danykom.ru/ro/test-operativnoi-pamyati-onlain-test-operativnoi-pamyati/">test online</a>. Formularele se completează la înregistrarea pe site, la plasarea comenzilor într-un magazin online etc.</p> <p>Folosind HTML, puteți crea un schelet de formular: <a href="https://danykom.ru/ro/rabochie-faily-prevratilis-v-xtbl-usmiryaem-virus-shifrovalshchik/">câmpuri de text</a>, 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 <a href="https://danykom.ru/ro/yazyk-programmirovaniya-php-oblast-primeneniya-php/">limbajul php</a> 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>Atributul acțiune este obligatoriu pentru orice formular - specifică adresa fișierului care servește 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 adâncim î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ă știi care este exact metoda de transfer <a href="https://danykom.ru/ro/html-form-post-primery-ii-vvod-dannyh-cherez-cikl-raznica-mezhdu-pereklyuchatelyami-i-flazhkami/">date POST</a>în cele mai multe cazuri este folosit în forme.</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 <a href="https://danykom.ru/ro/yazyk-html-perehod-a-href-about-giperssylka-chto-eto-takoe-kak-sdelat-ssylku-i/">atribut target</a>, definiți o fereastră î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>Se stabilește atributul maxlength <a href="https://danykom.ru/ro/maksimalnoe-kolichestvo-lyudei-v-besede-kontakte-beseda-vkontakte-sozdanie/">suma maxima</a> 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>Vedere <a href="https://danykom.ru/ro/kak-v-vorde-sozdat-numerovannyi-spisok-kak-sdelat-markirovannyi-spisok/">lista fiind creată</a> depinde de valoarea atributului size: with size= "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 folosit <a href="https://danykom.ru/ro/fioletovye-pyatna-na-displee-telefona-chto-delat-esli-na-ekrane-telefona/">dungă verticală</a> derulare, 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 <a href="https://danykom.ru/ro/test-bystrodeistviya-kompyutera-onlain-sochetanie-klavish-alt--/">Tastele Ctrl</a>ș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>), dacă atributul dimensiune nu este setat <a href="https://danykom.ru/ro/pyat-sposobov-kak-v-eksele-poschitat-kolichestvo-zapolnennyh-yacheek-funkciya-sch-tesli-podschet-koli/">o anumită cantitate de</a> puncte 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 i se dă un nume și folosind <a href="https://danykom.ru/ro/html-otpravka-dannyh-na-pochtu-obrabotka-post-zaprosov-ispolzovanie/">atribut de valoare</a> etichetă <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://i2.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 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:

În timp ce navighează prin site-uri web, utilizatorul face clic pe link-uri pentru a naviga pe paginile web.

Dar este clar că, uneori, utilizatorul trebuie să-și ofere propriile sale câmpuri de intrare. Aceste tipuri de interacțiuni includ:

• înregistrare și autentificare pe site-uri web;
• introducerea de informații personale (nume, adresă, informații despre cardul de credit etc.);
• filtrarea conținutului (folosind liste derulante, casete de selectare etc.);
• efectuarea unei căutări;
• descărcarea fișierelor.

Pentru a satisface aceste nevoi, HTML oferă interactiv controale forme:

• câmpuri de text (pentru una sau mai multe rânduri);
• întrerupătoare;
• casete de selectare;
• liste derulante;
• widget-uri pentru descărcare;
• butoane de trimitere.

Aceste controale implică diferite Etichete HTML, dar majoritatea folosesc eticheta . Deoarece este un element cu auto-închidere, tipul câmpului este determinat de atributul său tip:

Element

este element bloc, care definește interactiv parte a unei pagini web. Ca rezultat, toate controalele (cum ar fi , sau <button>) trebuie să fie <i>interior</i> element <form> .</p><p>Două <a href="https://danykom.ru/ro/vklyuchenie-css-v-html-kod-oformlenie-html-tegov-atributom-style-vstroennye/">atribut HTML</a> <b>necesar</b>:</p><ul><li>acțiunea conține o adresă care determină <i>Unde</i> vor fi trimise informații din formular;</li><li>metoda poate fi fie GET, fie POST și determină dacă <i>Cum</i> Informațiile din formular vor fi trimise.</li> </ul><p>De obicei, informațiile din formular sunt trimise către <b>Server</b>. <i>Cum</i> aceste date vor fi apoi prelucrate în afara domeniului de aplicare al acestui manual.</p><p>Gândiți-vă la un formular ca la o colecție de controale care lucrează împreună pentru a le îndeplini <b>unu</b> Operațiune. Dacă ați scris un formular de conectare la site, este posibil să aveți <b>Trei</b> câmpuri:</p><ul><li>câmpul de e-mail <input type="email"> </li><li>câmpul de parolă <input type="password"> </li><li>buton de trimitere <input type="submit"> </li> </ul><p>Aceste trei <a href="https://danykom.ru/ro/parametry-css-width-i-height-dlya-zadaniya-razmerov-elementov-html-stranicy/">element HTML</a> vor fi cuprinse într-un singur formular <span><form action="/login" method="POST"> </span>.</p><p>În mod similar, puteți adăuga un formular de înregistrare pe aceeași pagină HTML, într-un element separat <form> .</p><h2>Câmpuri de text</h2><p>Aproape toate formele necesită <b>text</b> introduse de la utilizatori pentru a le introduce numele, adresa de e-mail, parola, adresa etc. Câmpurile de text ale formularului sunt diferite.</p><p>Deși aceste câmpuri sunt foarte asemănătoare și permit utilizatorilor să introducă orice fel de text (chiar și incorect), tipul lor oferă un anumit <b>semantică</b> pentru intrare, determinând ce informații câmpul <b>trebuie sa</b> conține.</p><p>Browserele pot schimba ulterior ușor interfața controlului pentru a se îmbunătăți <i>interactivitate</i> sau sugerați ce conținut este așteptat.</p><p>De exemplu, câmpul pentru parolă arată puncte în loc de simboluri. Iar câmpul numeric vă permite să creșteți/scădeți valoarea utilizând tastele sus și jos.</p><h2>substituent</h2><p>Se pot afișa câmpuri de text <b>sugestiv</b> text care va dispărea de îndată ce este introdus un text.</p><p> <input type="text" placeholder="Introdu numele tau"> </p><p>Dacă începeți să tastați ceva, veți vedea textul „Introduceți numele dvs.” dispărând.</p><h2><label></h2><p>Deoarece elementele de formă în sine nu sunt foarte descriptive, ele sunt de obicei precedate de text. <b>eticheta</b>.</p><p> <label>E-mail</label> <input type="email"> </p><p>În timp ce substituentul oferă deja un indiciu despre conținutul așteptat, etichetele au avantajul de a rămâne vizibile în orice moment și pot fi folosite alături de alte tipuri de elemente de formular, cum ar fi casetele de selectare sau butoanele radio.</p><p>Deși puteți folosi paragrafe scurte pentru a descrie elemente de formular, folosind <label>este mai corectă din punct de vedere semantic deoarece ele există doar sub forme. <label>poate fi asociat și cu un element de formular specific folosind atributul for corespunzător valorii id a câmpului.</p><p> <label for="first_name">Nume</label> <input id="first_name" type="text"> </p><p>Când faceți clic pe etichetă, focalizarea se duce la câmpul de text și plasează cursorul în interiorul acestuia. Până acum, acest pachet pare inutil, dar va fi util cu casete de selectare și comutatoare.</p><h2>Casete de selectare</h2><p><b>Casete de selectare</b>- Acestea sunt elemente de formă care au doar două stări: pornit sau oprit. Practic, permit utilizatorului să spună „Da” sau „Nu” la ceva.</p><p> <input type="checkbox">Ține-mă minte</p><p>Deoarece poate fi dificil să faceți clic pe o casetă de selectare mică, se recomandă să plasați caseta de selectare și descrierea acesteia în interior <label> .</p><p> <label> <input type="checkbox">Sunt de acord cu conditiile</label> </p><p>Puteți face clic pe textul „Sunt de acord cu termenii” pentru a comuta caseta de selectare.</p><p>În mod implicit, caseta de selectare este dezactivată. Îl puteți marca ca fiind activat pur și simplu folosind atributul bifat.</p><p> <label> <input type="checkbox" checked>Folosiți adresa mea de facturare</label> </p><h2>Comutatoare</h2><p>Puteți furniza utilizatorului <b>lista de optiuni</b> selectabil folosind comutatoare.</p><p>Pentru ca acest element de formular să funcționeze, codul dvs. HTML trebuie <b>grup</b> lista de butoane radio împreună. Acest lucru se realizează prin utilizarea aceleiași valori pentru atributul nume:</p><p> <label>Statusul familiei</label> <label> <input type="radio" name="status">Singur</label> <label> <input type="radio" name="status">Căsătorit</label> <label> <input type="radio" name="status">Divorţat</label> <label> <input type="radio" name="status">Văduv</label> </p><p>Deoarece toate comutatoarele folosesc <a href="https://danykom.ru/ro/kak-v-eksele-naiti-odinakovye-kak-naiti-odinakovye-znacheniya/">aceeași valoare</a> atribut nume (în <a href="https://danykom.ru/ro/vosstanovleniya-r-studio-obzor-r-studio---programmy-dlya-vosstanovleniya/">în acest caz,</a> starea valorii ), selectarea uneia dintre opțiuni va anula toate celelalte. Comutatoarele sunt <b>se exclud reciproc</b>.</p><h3>Diferența dintre butoanele radio și casetele de selectare</h3><p>Deși caseta de selectare există <b>de unul singur</b>, comutatoarele pot apărea numai în formular <b>listă</b>(ceea ce înseamnă cel puțin două opțiuni).</p><p>În plus, faceți clic pe caseta de selectare <b>arbitrar</b>, în timp ce selectați unul dintre butoanele radio este <b>obligatoriu</b>. Acesta este motivul pentru care nu este posibil să opriți comutatorul dacă selectați cea mai apropiată opțiune. În cele din urmă, unul dintre comutatoare este întotdeauna selectat.</p><h2>Meniuri derulante</h2><p>Dacă numărul de opțiuni din care să alegeți ocupă prea mult spațiu, puteți utiliza meniurile drop-down <select> .</p><p>Ele funcționează similar cu comutatoarele, doar aspectul este diferit.</p><p> <select> <option>ianuarie</option> <option>februarie</option> <option>Martie</option> <option>Aprilie</option> <option>Mai</option> <option>iunie</option> <option>iulie</option> <option>August</option> <option>Septembrie</option> <option>octombrie</option> <option>noiembrie</option> <option>decembrie</option> </select> </p><h3>Selectare multiplă din meniul drop-down</h3><p>Dacă adăugați atributul multiplu, puteți oferi posibilitatea de a selecta mai multe opțiuni.</p><p> <label>Ce browsere folositi?</label> <select multiple> <option><a href="https://danykom.ru/ro/polnyi-distributiv-google-chrome-usloviya-predostavleniya-uslug-google-chrome/">Google Chrome</a></option> <option><a href="https://danykom.ru/ro/skachivanie-internet-explorer-brauzer-ustanovka-internet-explorer/">Internet Explorer</a></option> <option>Mozilla Firefox</option> <option>Operă</option> <option>Safari</option> </select> </p><p>Selectați mai multe opțiuni ținând apăsat Ctrl (sau ⌘) și făcând clic. Aceasta poate fi o alternativă bună la utilizarea mai multor casete de selectare pe linie.</p><h2>Exemplu: formular complet de înregistrare</h2> <form action="/signup" method="POST"> <p> <label>Recurs</label> <label> <input type="radio" name="title" value="Domnul">Domnul.</label> <label> <input type="radio" name="title" value="D-na">D-na.</label> </p> <p> <label>Nume</label> <input type="text" name="first_name"> </p> <p> <label>Nume de familie</label> <input type="text" name="last_name"> </p> <p> <label>E-mail</label> <input type="email" name="email"> </p> <p> <label>Telefon</label> <input type="tel" name="phone"> </p> <p> <label>Parola</label> <input type="password" name="password"> </p> <p> <label>Confirmați parola</label> <input type="password" name="password_confirm"> </p> <p> <label>O tara</label> <select name="country"> <option>Canada</option> <option>Franţa</option> <option>Germania</option> <option>Italia</option> <option>Japonia</option> <option>Rusia</option> <option>Marea Britanie</option> <option>STATELE UNITE ALE AMERICII</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Sunt de acord cu Termenii de utilizare</label> </p> <p> <button>Inregistreaza-te</button> </p> </form> <p>Sunt disponibile și alte elemente de formular, dar ne-am uitat la cele mai utilizate.</p> <p>Într-una din postările anterioare, am vorbit despre universal <a href="https://danykom.ru/ro/chto-takoe-submit-v-html-opisanie-parametrov-tega-input-atributy-tega-option/">eticheta de intrare</a>, care poate fi folosit pentru a crea majoritatea elementelor de formular web. Dar, folosind doar aceste elemente (câmp text, buton etc.) nu va fi posibilă crearea unui formular cu drepturi depline.</p> <p>Să presupunem că avem <a href="https://danykom.ru/ro/procedura-oformleniya-zakaza-prosta-i-osnovnye-pravila-forma/">formă simplă</a>, care constă din două câmpuri de text în care utilizatorul trebuie să-și introducă numele și prenumele.</p><p>Nume <br > <input type="text"><br>Nume de familie <br /> <input type="text" > </p> <p> <b>Unde</b>în mod specific și <b>Cum</b> </p> <p> <form >si inchidere</form ></p> <form>Nume <br > <span><input type="text" name="name"><br> </span> Nume de familie <br /> <span><input type="text" name="lastname" > </span></form> <p>Acum este clar că această parte a codului este o formă.</p> <p>Dacă vizualizați pagina cu acest cod într-un browser, veți vedea că nu există modificări semnificative. Această etichetă în sine nu este nimic <a href="https://danykom.ru/ro/prilozheniya-dlya-android-tema-aifon-4-kak-sdelat-svoi-android-smartfon/">modificări vizuale</a> nu contribuie la structura paginii.</p> <p>Dar acest formular încă nu funcționează. Deși două câmpuri de text sunt acum percepute de browser ca parte a unui formular, nu este deloc clar unde să trimită datele pe care utilizatorul le introduce în acest formular. Acest formular lipsește un foarte important <b>necesar</b> atribut.</p> <p>Scopul utilizării etichetei form este atributele speciale care îi pot fi aplicate.</p> <p>Să vedem care sunt aceste atribute. În primul rând, acestea sunt cele mai importante două atribute pentru formularele web.</p> <p>1) o acțiune – acest atribut este necesar. Acestea. crearea unui formular fără a-l folosi nu are prea mult sens. Cu ajutorul acestuia, specificați calea către programul (scriptul) care va procesa datele introduse în formular.</p> <p>2) metoda – cu acest atribut indicăm metoda prin care datele vor fi transferate către handlerul de program.</p> <p>Există două opțiuni posibile aici: GET și POST. Nu voi descrie în această postare cum diferă aceste două metode. Acesta este un subiect pentru alt articol.</p> <p>Dacă nu specificați acest atribut, metoda GET va fi utilizată implicit.</p> <p>Să adăugăm aceste două atribute la formularul nostru:</p> <span> <form action="http://dimachen.info/papka/script.php" method="post"> </span> Nume <br > <input type="text"><br>Nume de familie <br /> <input type="text" > </form> <p>Acum formularul nostru funcționează practic. Am specificat unde trebuie trimise datele pe care utilizatorul le introduce folosind atributul acțiune și am specificat cum trebuie trimise datele.</p> <p>Următoarele atribute sunt mult mai puțin comune, pentru rezolvarea unor probleme specifice, dar voi vorbi totuși puțin despre ele.</p> <p>3) enctype – folosind acest atribut puteți specifica tipul de conținut care va fi trimis către server.</p> <p>4) accept - specifică o listă separată prin virgulă de tipuri de conținut/conținut <a href="https://danykom.ru/ro/pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html-stranice/">lista de tipuri</a>, care va fi trimis la server.</p> <p>4) accept —charset – specifică o listă de codificări de text care vor fi raportate programului (scriptului).</p> <p>Asta e tot cu prima acțiune, să trecem la a doua.</p> <p>Actul 2. Creați un element de control - un buton, când se face clic, datele vor fi trimise programului de gestionare.</p> <p>Bine, am creat un formular web, dar utilizatorul trebuie să efectueze o acțiune pentru ca datele pe care le-a introdus să fie trimise programului de gestionare. Acest lucru se face de obicei prin crearea unui buton cu atributul type="submit".</p> <p>Toate browserele sunt deja configurate în așa fel încât atunci când utilizatorul face clic pe un buton cu atributele tastați ="submit". Apoi automat datele introduse în formular vor fi trimise la adresa specificată în atributul acțiune al formularului.</p> <p>Să adăugăm acest buton în formularul nostru web chiar acum. Am vorbit despre cum sunt create butoanele în lecția anterioară.</p><p> <form action="http://dimachen.info/papka/script.php" method="post">Nume <br > -<input type="text"><br>Nume de familie <br /> <input type="text" ><br> <input type="submit" value="Trimite" > </form> </p><p>Acum, când utilizatorul face clic pe butonul „Trimite”, datele pe care le-a introdus în câmpurile de text vor fi trimise programului de gestionare, care se află, de exemplu, la adresa „http://dimachen.info/papka /script.php”.</p> <p>Asta e tot pentru azi. Te văd! <br></p> <p>Utilizatorul poate completa aceste câmpuri, dar nu vor avea loc modificări. Pentru ca browserul să înceapă să perceapă această formă ca o singură structură, trebuie să efectuați două acțiuni:</p> <p><b>1 acțiune. Spuneți browserului că aceste câmpuri de text sunt o unitate, un formular.</b></p> <p>Eticheta specială care vă permite să faceți acest lucru este eticheta de formular. formularul este un element special care vă permite să combinați mai multe elemente de formular într-o singură structură și îi spune browserului să trateze această structură ca un întreg.</p> <p>Folosind eticheta de formular, putem spune browserului <b>Unde</b>în mod specific și <b>Cum</b> trebuie să trimiteți datele introduse în elementele formularului pentru ca acestea să fie prelucrate de un program special.</p> <p>Eticheta de formular este ceva ca un container care stochează elemente de formular. Acest <a href="https://danykom.ru/ro/html-elementy-odinochnye-i-parnye-tegi-otkryvayushchii-i-zakryvayushchii-teg-ponyatie/">etichetă asociată</a>. Zona sa de acțiune, între deschidere <form >si inchidere</form >, sunt determinate elementele care vor face parte din formular.</p> <p>Să ne întoarcem la exemplul nostru anterior și să încercăm să împachetăm elementele formularului în această etichetă:</p> <p><form> </p> <p>Nume <br > </p> <p><input type=»text» name=»name»><br> </p> <p>Nume de familie <br /> </p> <p><input type=»text» name=»lastname» > </p> <p></form ></p> <p>Apropo, doriți să aflați dacă are vreun rost un element de pe site-ul dvs. care folosește „obiectivele” Yandex Metrics și Google Analytics?</p> <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> </article> <div id="disqus_thread"> <div id="dsq-content"> <ul id="dsq-comments"> <li class="comment even thread-even depth-1" id="dsq-comment-2"> <div id="dsq-comment-header-2" class="dsq-comment-header"> <cite id="dsq-cite-2"> <span id="dsq-author-user-2">Serghei Savenkov</span> </cite> </div> <div id="dsq-comment-body-2" class="dsq-comment-body"> <div id="dsq-comment-message-2" class="dsq-comment-message"> <p>un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva</p> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="wpb_column vc_column_container td-pb-span4"> <div class="vc_column-inner "> <div class="wpb_wrapper"> <div class="wpb_widgetised_column wpb_content_element"> <div class="wpb_wrapper"> <div class="td-a-rec td-a-rec-id-sidebar td-rec-hide-on-p "> <div id="adriver_banner_1494422254"></div> </div> <div class="td-a-rec td-a-rec-id-custom_ad_1 td-rec-hide-on-p "> <div> </div> <div id='div-gpt-ad-1491821174306-2' style='height:600px; width:300px;'> </div> </div> <div class="td-a-rec td-a-rec-id-custom_ad_2 td-rec-hide-on-p "> <div> </div> <div id='div-gpt-ad-1491821174306-3' style='height:600px; width:300px;'> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-14"> <div class="td-container td-footer-bottom-full"> <div class="td-pb-row"> <div class="td-pb-span3"> <aside class="footer-logo-wrap"><a href="https://danykom.ru/ro/"><img class="td-retina-data" src="/uploads/logo.png" data-retina="/wp-content/uploads/2017/02/logo_544x180_bw.png" alt="Tehnică. Știri. Telefoane. Laptop-uri. Comparaţie. Windows" title="Tehnică. Știri. Telefoane. Laptop-uri. Comparaţie. Windows"/ loading=lazy loading=lazy></a></aside> </div> <div class="td-pb-span5"> <aside class="footer-text-wrap"> <div class="block-title"><span>Informații generale</span></div>.</aside> </div> <div class="td-pb-span4"> <aside class="footer-social-wrap td-social-style-2"> <div class="block-title"><span>Site de rețea socială</span></div> <span class="td-social-icon-wrap"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://danykom.ru/html-svoistvo-forms-chto-znachit-i-vvod-dannyh-vruchnuyu-opisanie-parametrov-tega/" title="Facebook"> <i class="td-icon-font td-icon-facebook"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="" title="Instagram"> <i class="td-icon-font td-icon-instagram"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="" title="RSS"> <i class="td-icon-font td-icon-rss"></i> </a> </span></aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span7 td-sub-footer-menu"> <div class="menu-td-demo-footer-menu-container"> <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"> </ul> </div> </div> <div class="td-pb-span5 td-sub-footer-copy">2023 Tehnica. Știri. Telefoane. Laptop-uri. Comparaţie. Windows</div> </div> </div> </div> </div> <link rel='stylesheet' id='css-5-css' href='/wp-content/mmr/ffba0e2b-1516146715.min.css' type='text/css' media='all' /> <script type='text/javascript' src='https://danykom.ru/wp-content/mmr/4ab436a1-1516146715.min.js'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> </body> </html>