Exemple de butoane HTML. Când să utilizați elementul Buton

24.06.2019 Recenzii

Descriere

Etichetă HTML

Dezactivat: Dezactivează capacitatea de a face clic pe butonul. Acesta poate fi folosit atunci când butonul ar trebui să devină activ atunci când sunt îndeplinite anumite condiții (de exemplu, când este selectată o casetă de selectare etc.), va fi posibil să activați butonul folosind JavaScript. Valorile pentru atributul boolean dezactivat pot fi setate în următoarele moduri: formular: indică formei căreia îi aparține acest buton. Valoarea este unul sau mai mulți identificatori de formular separați prin spații. Numărul de identificatori din valoarea atributului depinde de numărul de formulare aparținând butonului:

Butonul se află în afara elementului de formular, dar face parte din formular.

Notă: Atributul nu este acceptat în Internet Explorer.

Formare: Specifică adresa la care sunt trimise datele din formular când se face clic pe butonul. Dacă este specificat un atribut de acțiune pentru un formular, atunci atributul de formare va suprascrie valoarea acestuia:

Atributul formation este folosit numai pentru butoanele cu atributul type="submit".

Notă: Atributul nu este acceptat în IE9 și versiuni anterioare.

Formenctype: Specifică modul în care datele formularului ar trebui să fie codificate înainte de a fi trimise către server. Folosit numai pentru butoanele cu atributul type="submit". Valori posibile ale atributelor:

application/x-www-form-urlencoded- toate caracterele sunt codificate înainte de trimitere (valoare implicită).
multipart/form-data- caracterele nu sunt codificate (această metodă este folosită atunci când se utilizează formulare care au un fișier de control al încărcării).
text/ simplu- spațiile sunt convertite în caracterul „+”, dar caracterele nu sunt codificate.

Dacă este specificat un atribut enctype pentru un formular, atunci atributul formenctype va suprascrie valoarea acestuia.

Notă: Atributul nu este acceptat în IE9 și versiuni anterioare.

Formmethod: Specifică ce metodă HTTP va fi utilizată la trimiterea datelor din formular. Folosit numai pentru butoanele cu atributul type="submit". Valori posibile ale atributelor:

obține- datele formularului sunt adăugate la sfârșitul adresei URL: URL?name=value?name=value
post- trimite datele formularului ca HTTP după tranzacție

Dacă un formular are un atribut de metodă, atunci atributul formmethod va suprascrie valoarea acestuia.

Notă: Atributul nu este acceptat în IE9 și versiuni anterioare.

Formnovalidate: Specifică faptul că datele din formular nu vor fi validate. Folosit numai pentru butoanele cu atributul type="submit". Valorile pentru atributul boolean autofocus pot fi setate în următoarele moduri: Dacă atributul novalidate este specificat pentru un formular, atunci atributul formnovalidate va suprascrie valoarea acestuia.

Notă: Atributul nu este acceptat în IE9 și versiuni anterioare și în Safari.

Formtarget: Specifică unde va fi afișat răspunsul după trimiterea formularului. Folosit numai pentru butoanele cu atributul type="submit". Valori posibile ale atributelor:

_gol- deschide răspunsul într-o fereastră sau filă nouă.
_de sine- deschide răspunsul în același director în care se află linkul (valoare implicită).
_mamă- deschide răspunsul în fereastra părinte.
_top- deschide răspunsul pe toată lățimea ferestrei.
nume_cadru- deschide răspunsul în iframe al cărui nume a fost specificat ca valoare.

Dacă un formular are un atribut țintă, atunci atributul formtarget va suprascrie valoarea acestuia.

Notă: Atributul nu este acceptat în IE9 și versiuni anterioare.

Nume: Specifică un nume pentru element

Notă: unele articole

Notă: specificați întotdeauna atributul de tip pentru butoane, deoarece diferite browsere pot avea valori implicite diferite pentru atributul de tip.

Valoare: valoarea butonului care va fi trimisă la server sau citită folosind scripturi.

Notă: dacă utilizați element . În timp ce alte browsere vor trimite conținutul atributului value.

Etichetă

Eticheta de închidere este necesară.

WAI ARIA

valoarea implicită a rolului: buton

Valori valide pentru rol:

Caseta de bifat
legătură
articol din meniu
caseta de selectare a elementelor de meniu
menuitemradio
opțiune
radio
intrerupator

Atribute

autofocus - Setează butonul pentru a obține focalizarea după ce pagina este încărcată.
disabled - Blochează accesul și modificarea elementului.
formular - Asociază un formular și un buton.
formaction - Setează adresa la care sunt trimise datele din formular când se face clic pe butonul.
formenctype - Cum sunt codificate datele din formular.
formmethod - Specifică metoda de trimitere a datelor din formular.
formnovalidate - Anulează validarea formularului.
formtarget - Deschide rezultatul trimiterii unui formular într-o nouă fereastră sau cadru.
nume - Specifică un nume unic pentru buton.
tip - Setează tipul butonului: normal; pentru a trimite date de formular către server; pentru a șterge formularul.
value - Valoarea butonului care va fi trimisă la server sau citită folosind scripturi.

autofocus

Atributul de focalizare automată specifică faptul că butonul primește focalizare după ce pagina este încărcată. Un astfel de buton poate fi apăsat imediat fără a se transfera focalizarea, de exemplu, folosind tastatura.

Sintaxă

Valori

Valoare implicită

dezactivat

Blochează accesul la buton și modificarea acestuia. În acest caz, este afișat cu gri și nu este disponibil pentru activare de către utilizator. În plus, unui astfel de buton nu i se poate focaliza apăsând tasta Tab, folosind mouse-ul sau altfel. Cu toate acestea, starea acestui buton poate fi schimbată prin intermediul scripturilor. Valoarea butonului dezactivat nu este transmisă serverului.

Sintaxă

Valori

Valoare implicită

În mod implicit, această valoare este dezactivată.

formă

Asociază un buton cu un formular prin id-ul său. O astfel de legătură este necesară atunci când butonul nu se află în interiorul elementului

, de exemplu, la crearea programului.

Sintaxă

Valori

Identificator de formular (valoarea atributului id al elementului ).

Valoare implicită

formare

Specifică adresa managerului de formulare - acesta este programul care primește datele formularului și efectuează acțiunea dorită cu acesta. Atributul de formare este similar în acțiune cu atributul de acțiune al elementului. . Dacă specificați acțiune și formație în același timp, atunci când se face clic pe butonul, atributul acțiune este ignorat și datele sunt trimise la adresa specificată în formation .

Sintaxă

Valori

formenctype

Setează modul în care datele formularului sunt codificate atunci când sunt trimise la server. De obicei specificat explicit în cazul în care câmpul este folosit pentru a trimite un fișier (input type="file"). Acest atribut are același efect ca și atributul enctype al elementului. .

Sintaxă

Valori

application/x-www-form-urlencoded - Spațiile sunt înlocuite cu +, caracterele precum literele rusești sunt codificate după valorile lor hexazecimale (de exemplu, %D0%9F%D0%B5%D1%82%D1%8F în loc de Petya).
multipart/form-data - Datele nu sunt codificate. Această valoare este utilizată la încărcarea fișierelor.
text/plain - Spațiile sunt înlocuite cu +, literele și alte caractere nu sunt codificate.

Valoare implicită

application/x-www-form-urlencoded

formmetod

Atributul îi spune browserului ce metodă să trimită datele formularului către server.

Sintaxă

Valori

Există două metode - GET și POST.

GET - Această metodă este concepută pentru a transmite datele formularului direct în bara de adrese ca perechi nume=valoare care sunt adăugate la adresa paginii după un semn de întrebare și separate printr-un ampersand (& caracter). Adresa completă, de exemplu, va fi http://site.ru/doc/?name=Vasya&password=pup . Cantitatea de date din metodă este limitată la 4 KB.
POST - Trimite date către server într-o solicitare de browser, cantitatea de date trimisă este limitată doar de setările serverului.

formnovalidate

Anulează validarea încorporată a datelor introduse de utilizator în formular pentru corectitudine atunci când se apasă butonul. Această verificare se face automat de către browser la trimiterea formularului către server pentru câmpuri , , precum și dacă elementul are un model sau un atribut obligatoriu .

Sintaxă

Valori

Valoare implicită

În mod implicit, acest atribut este dezactivat.

formtarget

Specifică numele cadrului în care rezultatul returnat de handlerul de formular va fi încărcat ca document HTML.

Sintaxă

Valori

Valoarea este numele cadrului specificat de atributul nume al elementului . Dacă este setat un nume inexistent, se va deschide o nouă filă. Următoarele pot fi specificate ca valori rezervate.</p> <ul><li>_blank - Încarcă pagina într-o filă nouă de browser.</li> <li>_self - Încarcă pagina în fila curentă.</li> <li>_parent - Încarcă pagina în cadrul părinte; dacă nu există cadre, atunci această valoare funcționează ca _self .</li> <li>_top - Anulează toate cadrele și încarcă pagina într-o fereastră completă a browserului; dacă nu există cadre, atunci această valoare funcționează ca _self .</li> </ul><h3>Nume</h3> <p>Specifică un nume unic de buton. De obicei, acest nume este folosit atunci când trimiteți valoarea butonului către server sau când accesați butonul prin scripturi.</p> <p><b>Sintaxă</b></p><p> <button name="<имя>">...</button> </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 vă referiți la un element după nume, utilizați aceeași ortografie ca și în atributul nume.</p> <p><b>Valoare implicită</b></p> <h3>tip</h3> <p>Specifică tipul butonului, care stabilește comportamentul acestuia pe formular. Butoanele de diferite tipuri nu diferă ca aspect, dar fiecare astfel de buton are propriile sale funcții.</p> <p><b>Sintaxă</b></p><p> <button type="button | reset | submit">...</button> </p><p><b>Valori</b></p> <ul><li>buton - Un buton obișnuit.</li> <li>resetare - Un buton pentru a șterge datele din formular introduse și a readuce valorile la starea inițială.</li> <li>trimite - Butonul pentru a trimite datele formularului către server.</li> <li>meniu - Deschide meniul creat de element <menu> .</li> </ul><p><b>Valoare implicită</b></p> <ul><li>Trimite</li> </ul><h3>valoare</h3> <p>Specifică valoarea butonului care va fi trimisă serverului. O pereche nume=valoare este trimisă la server, unde numele este dat de atributul nume al elementului <button>, iar valoarea este atributul valoare. Valoarea poate fie să se potrivească cu textul de pe buton, fie să fie independentă. Atributul value este, de asemenea, folosit pentru a accesa date prin scripturi.</p> <p><b>Sintaxă</b></p><p> <button value="<text>">...</button> </p><p><b>Valori</b></p> <p>Orice șir de text.</p> <p><b>Valoare implicită</b></p> <h2>Specificații</h2> <h2>Exemple</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>BUTON</title> </head> <body> <p style="text-align: center"> <button>Buton cu text</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Butonul de model</button> </p> </body> </html> <p>Butoanele sunt unul dintre cele mai populare elemente de interfață și sunt adesea folosite în interiorul formularelor, de exemplu, pentru a trimite informațiile introduse în formular către server.</p><p>Butoanele de pe o pagină web pot fi create în mai multe moduri - folosind elementul <input>sau element <button> .</p><p>Luați în considerare mai întâi adăugarea unui buton prin <input>și sintaxa acesteia.</p><p> <input type="button" value="Text"> </p><p>Atributele butoanelor sunt listate în tabel. unu.</p><p>Crearea unui buton este prezentată în exemplul 1.</p><p>Exemplul 1: Adăugarea unui buton</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Buton</title> </head> <body> <form> <p><input type="button" value="Apăsați-mă ușor"></p> </form> </body> </html> </p><p>Rețineți că toate spațiile din eticheta butonului sunt numărate, spre deosebire de textul HTML simplu, astfel încât orice număr de spații poate fi inclus, ceea ce va afecta în cele din urmă lățimea butonului. Dar este mai corect, desigur, să setați aspectul butonului prin CSS. Rezultatul exemplului este prezentat în Fig. unu.</p><p>Orez. 1. Vedere butoane</p><p>Există o serie de reguli obligatorii pentru astfel de butoane:</p><ul><li><input> <a> ;</li><li><input>nu poate fi imbricat într-un buton <button> ;</li><li>valoarea atributului valoare nu poate fi goală.</li> </ul><p>A doua modalitate de a crea un buton se bazează pe utilizarea elementului <button>. În acțiunea sa, seamănă cu rezultatul obținut cu ajutorul lui <input>. Dar, spre deosebire de acesta, oferă opțiuni avansate pentru crearea de butoane. De exemplu, puteți plasa orice elemente HTML pe un astfel de buton, inclusiv imagini și tabele. Pe fig. 2 prezintă diferite tipuri de butoane obținute folosind <button> .</p><p><img src='https://i1.wp.com/webref.ru/assets/images/html5-css3/form-button-02.png' width="100%" loading=lazy loading=lazy></p><p>Orez. 2. Butoane create cu <button></p><p>Sintaxa pentru crearea unui astfel de buton este următoarea.</p><p> <button>Inscripția de pe buton</button> </p><p>Atributele sunt listate în tabel. 1, dar spre deosebire de buton <input>atributul value definește doar valoarea trimisă către server, nu eticheta de pe buton. Dacă doriți să afișați o imagine pe buton, atunci <img>adăugat înăuntru <button>, așa cum se arată în exemplul 2.</p><p>Exemplul 2. Imagine pe buton</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Buton</title> </head> <body> <form> <p><button>Buton cu text</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>Butonul de model</button></p> </form> </body> </html> </p><p>Acest exemplu arată cum să creați un buton obișnuit cu text, precum și un buton cu text și o imagine. Mărimea butonului depinde de conținut <button>, dar spațiile sunt ignorate, deci pur și simplu crescându-le numărul, ca în cazul utilizării <input>, lățimea butonului nu poate fi modificată.</p><p>Pentru <button>Există, de asemenea, o serie de restricții:</p><ul><li><button>nu poți încorpora link-uri <a> ;</li><li>unu <button>nu poate fi imbricat în altul.</li> </ul><h2>Buton de trimitere</h2><p>Un buton special de trimitere este folosit pentru a trimite date către server. Aspectul său nu este diferit de butoanele obișnuite, dar atunci când este apăsat, sare la gestionarea formularului la adresa specificată de atributul de acțiune al elementului. <form>. Programul de gestionare primește datele introduse de utilizator în câmpurile de formular, efectuează manipulările necesare cu acestea și apoi returnează rezultatul sub forma unui document HTML. Ce face exact handlerul depinde de autorul site-ului, de exemplu, această tehnologie este folosită atunci când se creează sondaje, forumuri, teste și multe alte lucruri.</p><p>Sintaxa pentru crearea unui buton Trimitere depinde de elementul utilizat. <input>sau <button> .</p><p> <input type="submit"> <button type="submit">Inscripția de pe buton</button> </p><p>Atributele sunt aceleași ca pentru butoanele obișnuite (exemplul 3), dar valoarea atributului value poate fi acum omisă, deoarece browserul va înlocui textul de la sine, acesta diferă în funcție de browser. Deci, Firefox scrie „Trimite cererea”, IE – „Solicitare trimitere”, Opera și Chrome – „Trimite”. Textul etichetei în sine nu afectează funcționalitatea butonului.</p><p>Exemplul 3: Trimiterea datelor către server</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Buton</title> </head> <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body> </html> </p><h2>Butonul de resetare</h2><p>Când faceți clic pe butonul Reset, datele din formular revin la valorile inițiale. De regulă, acest buton este folosit pentru a șterge informațiile introduse în câmpurile formularului. Pentru formularele mari, este mai bine să nu folosiți deloc butonul Reset, pentru a nu da clic pe el din greșeală, pentru că atunci va trebui să completați din nou formularul.</p><p>Sintaxa pentru crearea butonului menționat este simplă și similară cu celelalte butoane.</p><p> <input type="reset"> <button type="reset">Inscripția de pe buton</button> </p><p>Exemplul 4 arată un formular cu un singur câmp de text care conține deja text pre-introdus folosind atributul valoare al elementului <input>. După modificarea textului și apăsarea butonului „Șterge”, valoarea câmpului va fi restabilită și va apărea din nou inscripția „Introduceți text”.</p> Etichete HTML <h2>Semnificație și aplicare</h2> <p>Etichetă HTML <button>folosit pentru a plasa butonul. În interiorul etichetei <button>puteți plasa atât text formatat, cât și imagine. Aceasta este principala diferență dintre acest element și butoanele create folosind eticheta <input>(cu tipul de atribut = "button").</p> <p>Specificați întotdeauna pentru etichetă <button>tipul de atribut = „button” dacă elementul este folosit ca buton obișnuit. Dacă utilizați eticheta <button>în interiorul unui formular HTML, este posibil să descoperiți că browserele mai vechi pot prezenta valori diferite atunci când trimiteți formularul. <b>În acest caz, se recomandă utilizarea elementului <input>pentru a trimite formulare HTML.</b></p> <h2>Suport pentru browser</h2> <table class="tableTag"><tr><th class="tw">Etichetă</th><th></th><th></th><th><br>Operă</th><th></th><th><br>IExplorer</th><th><br>margine</th> </tr><tr><td><button> </td><td class="tyes">da</td><td class="tyes">da</td><td class="tyes">da</td><td class="tyes">da</td><td class="tyes">da</td><td class="tyes">da</td> </tr></table><h2>Atribute</h2> <table class="tableTag"><tr><th>Atribut</th><th>Sens</th><th class="tatt">Descriere</th> </tr><tr><td> </td><td>autofocus</td><td>Un atribut boolean care specifică faptul că butonul ar trebui să primească automat focalizare atunci când pagina se încarcă.</td> </tr><tr><td>dezactivat</td><td>dezactivat</td><td>Este un atribut boolean și specifică faptul că butonul ar trebui să fie dezactivat (nu este disponibil pentru interacțiunea utilizatorului).</td> </tr><tr><td> </td><td>form_id</td><td>Specifică o formă (element <form>) căruia îi aparține butonul. Valoarea trebuie să fie identificatorul de formular () din același document.</td> </tr><tr><td> </td><td>URL</td><td>Specifică adresa URL a fișierului care va procesa (controla) intrarea după trimiterea formularului (numai pentru <button <span>tip="trimite"></span>). </td> </tr><tr><td> </td><td><span>application/x-www-form-urlencoded <br>multipart/form-data <br>text/ simplu</span> </td><td>Specifică modul în care datele formularului ar trebui să fie codificate atunci când sunt trimise la server (numai pentru <button <span>tip="trimite"></span>). </td> </tr><tr><td> </td><td>obține <br>post</td><td>Specifică ce metodă HTTP să folosești la trimiterea datelor din formular (numai pentru <button <span>tip="trimite"></span>). </td> </tr><tr><td> </td><td>formnovalidate</td><td>Indică faptul că nu se efectuează validarea datelor introduse de utilizator în formular (doar pt <button <span>tip="trimite"></span>). </td> </tr><tr><td> </td><td><span>_gol <br>_de sine <br>_mamă <br>_top <br>nume cadru</span> </td><td>Spune browserului unde să arate răspunsul primit după trimiterea formularului (filă, fereastra curentă sau cadru). Valoarea implicită este _self - afișează răspunsul în fereastra curentă. Folosit doar pentru <button <span>tip="trimite"></span>. </td> </tr><tr><td>Nume</td><td>Nume</td><td>Specifică un nume pentru butonul care este transmis la trimiterea formularului.</td> </tr><tr><td>tip</td><td>buton <br>resetare <br>Trimite</td><td>Specifică tipul butonului. <b>Valoare implicită <b>Trimite.</b> </b> </td> </tr><tr><td>valoare</td><td>text</td><td>Specifică valoarea inițială pentru buton.</td> </tr></table><h2>Exemplu de utilizare</h2> <span><!DOCTYPE html> <html> <head> <title> </span> Etichetă <button><span></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;" > <b> </span> Butonul 1 <span></b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px" > <img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy loading=lazy> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;" > <i> </span> Butonul 3 <span></i> </button><br><br> </body> </html> </span> <p>În acest exemplu, am plasat <i>3 butoane</i>, cărora li sa dat nume unice cu atributul name și, folosind stiluri CSS interne, au specificat o lățime ( <i>lăţime</i>) cu o dimensiune de 80 de pixeli și o înălțime ( <i>înălţime</i>) cu o dimensiune de 50 de pixeli:</p> <ul><li>Text în interior <i>primul buton</i> l-am formatat cu aldine (tag <b>). <b>Observați că textul pe care l-am pus în interiorul etichetei este afișat pe butonul însuși.</b></li> <li>Interior <i>al doilea buton</i> element <img>noi am postat <i>*.png</i> imagine (cu fundal transparent). Cu atributul alt, setăm un text alternativ pentru imagine, în cazul în care nu este încărcat din anumite motive (atribut obligatoriu), setăm calea relativă către imagine cu atributul src (atribut obligatoriu), lățimea (lățimea) și atributele înălțime (înălțime) setează dimensiunile imaginii la 40 pe 40 de pixeli. Vă rugăm să rețineți că atributele care stabilesc dimensiunea nu trebuie să specifice unități de măsură, spre deosebire de stilurile CSS, deoarece atributele pot fi specificate doar în pixeli.</li> <li>Text în interior <i>al treilea buton</i> am formatat italic (tag <i>).</li> </ul><p>Rezultatul exemplului nostru:</p> <p>Următorul exemplu arată utilizarea atributelor care vă permit să nu validați datele introduse de utilizator și să spuneți browserului unde să arate răspunsul primit după trimiterea formularului.</p> <span><!DOCTYPE html> <html> <head> </span> <title>Utilizarea atributelor etichetelor HTML formnovalidate și formtarget <button><span></title> </head> <body> <form id = "myForm" > </span> <input <span>tip = "text" nume = "ulogin" substituent = "(!LANG:Numele tău" >!} <br> <span> </span> <textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Întrebarea dvs" ></textarea><br> <button formtarget = _blank formnovalidate > </span> trimite <span></button> <span> </span> </form> </body> </html> </span> <p>În acest exemplu, în interiorul formularului, am creat două elemente</p> <p>Instruire</p> <p>Utilizarea descriptorilor <input>adaugă un buton la pagină cu numele numelui și valoarea valorii. Atributul name dă elementului un identificator unic și este folosit pentru a determina valoarea acestuia de către handlerul de formulare. Value desenează textul necesar deasupra. De exemplu, pentru a crea un buton, scrieți următorul cod:</p><p><form><br><input type = “button” name = “имя” value = “Отправка”><br></form></p><p>Această comandă va crea un buton numit butonul cu „Trimite” scris pe el.</p> <p>Descriptor <button>creează un similar <input>element, cu toate acestea, oferă multe opțiuni suplimentare pe care un dezvoltator web poate avea nevoie să le folosească. Da, peste <button>puteți suprapune un tabel sau o imagine, un text îmbogățit sau o listă. De exemplu:</p><p><button form = “id формы” formaction = “адрес” formmethod = “метод пересылки данных” name = “имя” type = “тип” value = “значение”><img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy loading=lazy><b>Text</b></button></p> <p>Atributul form specifică ID-ul formularului care va fi utilizat pentru procesarea datelor. Formaction setează handlerul de formulare la o altă parte a documentului, fișierului sau site-ului. Formmethod este responsabil pentru definirea metodei de transmitere a datelor. Nume setează numele butonului, tip - tip (normal, pentru trimiterea datelor sau pentru ștergerea formularului). Valoare - valoarea care va fi citită de scripturi. Butonul va afișa o imagine cu adresa și textul specificate.</p> <p>Pentru a crea un buton care va procesa datele introduse, trebuie să specificați tipul corespunzător în atribut:</p><p><input type = “submit”></p><p>Pentru a crea un buton care șterge introducerea utilizatorului, setați tip = „resetare”.</p> <p>Notă</p> <p>Descriptor <input>trebuie folosit ca conținut al etichetei <form>. Buton <button>poate fi afișat în afara unui formular, dar pentru a procesa date și a efectua o anumită acțiune, acesta trebuie, de asemenea, inclus între <form></form>.</p> <p>Pentru a organiza interacțiunea site-ului cu vizitatorul în paginile sale, este necesar să se ofere oportunități de introducere a informațiilor și trimitere la server. Pentru a face acest lucru, limbajul de descriere a paginii web HTML (HyperText Markup Language - „hipertext markup language”) oferă un set special de etichete. Ce sunt aceste etichete și cum, folosindu-le, pentru a crea o pagină web <b>formă</b> să fie completat de către vizitator?</p> <p>Vei avea nevoie</p> <ul><li>Cunoștințe de bază despre limbajul HTML</li> </ul><p>Instruire</p> <p>Etichete HTML care indică browserului unde trebuie redată pagina <b>formă</b> iar elementele sale sunt plasate în cod între eticheta de deschidere<.form>si inchidere<./form>. Eticheta de deschidere trebuie să conțină informații obligatorii - atribute care spun unde anume trebuie trimise informațiile din formular și prin ce metodă trebuie făcută. În plus, dacă pagina conține mai multe formulare, atunci fiecare trebuie să aibă propriul nume. Având în vedere toate acestea, eticheta de deschidere ar putea arăta astfel: <form name="thisFormName" method="POST" action=">Aici, atributul „nume” este numele formularului, atributul „metodă” specifică metoda de trimitere (sunt posibile metodele POST sau GET), iar atributul „acțiune” trebuie să specifice adresa URL a scriptului de pe serverul către care datele din formular trebuie trimise. Dacă adresa nu este specificată, atunci datele vor fi transferate la adresa URL a aceleiași pagini. De regulă, astfel de pagini interactive sunt formate din scripturi universale, care asigură și primirea/prelucrarea datelor de pe aceeași pagină.</p> <p>După eticheta formularului de deschidere, ar trebui să plasăm elemente de formular care sunt mai potrivite pentru ca utilizatorul să introducă tipul dorit de date. Astfel de elemente pot fi: Câmp de introducere a textului: <input name="textField" type="text" value="Acesta este un câmp de text" />Aici, la fel ca în toate celelalte etichete „input”, atributul „type” specifică tipul elementului, „name” este numele care va fi trimis împreună cu datele introduse în acest câmp, iar „value” este valoarea implicită care va fi completat în câmpul de introducere a testului. --Camp : <input name="passField" type="password" />--Câmp pentru „marcați cu o bifă”: <input name="checkBox" type="checkbox" value="1" checked="checked" />Aici este prezența atributului „bifat” , că în mod implicit caseta de selectare va fi acolo.--Un grup de butoane radio, din care trebuie să selectați doar unul: <input name="radioBox" type="radio" value="0" checked="checked" /><br><input name="radioBox" type="radio" value="1" />Vă rugăm să rețineți că toate elementele grupului trebuie să aibă același nume (nume), dar valori diferite (valoare). Va fi transmisă o singură valoare - cea pe care o marchează vizitatorul sau cea care a fost selectată implicit (prin atributul bifat).--Lista derulantă: <select name="selectField"><br> <option value="valoare1">Câmpul unu</option><br> <option value="valoarea2" selected="selected">Câmpul doi</option><br> <option value="valoarea 3">Câmpul trei</option><br></select> Aici, fiecare etichetă „opțiune” se află într-o listă derulantă. În ceea ce privește grupul de butoane radio, o singură valoare va fi transmisă din câmpul selectat de vizitator sau selectat implicit (aici - atributul selectat).--Câmp text cu mai multe linii: <textarea name="textRows" cols="50" rows="5">Iată o linie multiplă</textarea> Atributele „cols” și „rows” stabilesc lățimea (în caractere) și înălțimea (în linii) câmpului de introducere a textului.--Câmp ascuns: <input name="hiddenField" type="hidden" value="câmp ascuns" />Acest câmp nu va fi vizibil pentru umplere <b>formă</b>, dar va fi trimis și împreună cu restul datelor.--Câmp de selecție a fișierului de trimis: <input name="fileField" type="file" />Trimiterea unui fișier necesită asta în deschidere <b>formă</b> eticheta avea atribute suplimentare. Trebuie adăugată cel puțin eticheta „enctype”. De exemplu, așa: <form name="thisFormName" method="POST" enctype="multipart/form-data" action=">--În afară de aceasta, <b>formă</b> puteți pune butoane - pentru a șterge introdus <b>formă</b> date: <input name="resetButton" type="reset" value="clar" />și pentru a trimite formularul completat la server: <input name="submitButton" type="submit" value="trimite" />Valoarea specificată în atributul „valoare” pentru butoane este eticheta de pe butonul însuși.</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> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Top articole similare</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/chto-takoe-formatirovanie-teksta-formatirovanie-simvolov-i-abzacev-v-ms-word-chto.html"> <div class="img_container"><img src="/uploads/0f7078ef1ffdeb53e940166728743cbc.jpg" border="0" alt="Formatarea caracterelor și a paragrafelor în MS Word Ce este formatarea paragrafelor" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Formatarea caracterelor și a paragrafelor în MS Word Ce este formatarea paragrafelor</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/failovaya-sistema-vypolnyaet-funkciyu-failovaya-sistema-obzor-rasprostranennyh.html"> <div class="img_container"><img src="/uploads/b668bfdaadf32615c55cdd180bfdaf15.jpg" border="0" alt="Sistemul de fișiere îndeplinește o funcție" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Sistemul de fișiere îndeplinește o funcție</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/analiz-elt-monitorov-istoriya-sozdaniya-elt---monitorov-elt-so-shchelevoi-maskoi-slot.html"> <div class="img_container"><img src="/uploads/44579ce5e3e20810027cd287085b5580.jpg" border="0" alt="Istoricul creării monitoarelor CRT - CRT cu o mască de fante (Slot Mask)" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Istoricul creării monitoarelor CRT - CRT cu o mască de fante (Slot Mask)</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Categorii:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/ro/category/programs/">Programe</a></li> <li class=""><a href="https://bumotors.ru/ro/category/safety/">Securitate</a></li> <li class=""><a href="https://bumotors.ru/ro/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/ro/category/iron/">Fier</a></li> <li class=""><a href="https://bumotors.ru/ro/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/ro/category/vkontakte/">In contact cu</a></li> <li class=""><a href="https://bumotors.ru/ro/category/errors/">Greșeli</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2022 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.</span> </div> </div> </div> </div> </body> </html>