Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Erori
  • Descrierea formularului. Crearea și lucrul cu formulare în html

Descrierea formularului. Crearea și lucrul cu formulare în html

05.11.2019 Erori

Etichete HTML care definesc formularele HTML pe site

Creăm site-uri și pagini individuale pe Internet pentru a comunica cu vizitatorii.

Formulare HTML sunt folosite pentru a înregistra vizitatori pe site, pentru sondaje și sondaje interactive, vă permit să trimiteți mesaje, să faceți achiziții și așa mai departe. HTML Formularul este creat cu un singur scop: colectarea și transferul ulterior de informații pentru prelucrare către un script de program sau prin e-mail.

Exemplu de formular HTML | conectare

Etichete, atribute și valori

  • - determinați forma.
  • nume = "" - definește numele formularului.
  • metoda = "" - definește metoda de trimitere a datelor din formular. Valori: „get” (implicit) și „post”. Metoda „post” este adesea folosită, deoarece permite transferul unor cantități mari de date.
  • acțiune = "" - definește adresa URL la care datele sunt trimise pentru prelucrare. În cazul nostru, enter_data.php ..
  • - definiți elemente de formular precum butoane, butoane radio, câmpuri de text pentru introducerea datelor.
  • tip = "text" - definește un câmp de text pentru introducerea datelor.
  • tip = „parolă” - definește un câmp pentru introducerea unei parole, în timp ce textul este afișat sub formă de asteriscuri sau cercuri.
  • tip = "checkbox" - definește o casetă de selectare.
  • tip = „ascuns” - definește un element de formular ascuns - folosit pentru a trimite informații suplimentare către server.
  • dimensiune = „25” - lungimea câmpului de text în caractere.
  • maxlength = "30" - numărul maxim de caractere care trebuie introduse.
  • value = "" - definește valoarea care va fi trimisă pentru procesare dacă se referă la butoane radio sau comutatoare. Valoarea acestui atribut ca parte a unui câmp de text sau a unui buton va fi afișată ca, de exemplu, Vasya sau Login în exemplul de mai sus.

Exemplu de formular HTML | Comentarii pe site

Exemplu de formular HTML




Nume



Poștă

Etichete, atribute și valori

  • action = "http: //site/comments.php" - defineste url-ul catre care vor fi trimise datele din formular.
  • id = "" - definește numele, identificatorul elementului de formular.
  • name = "" - definește numele elementului de formular.
  • - definiți un câmp de text ca parte a unui formular.
  • cols = "" - definește numărul de coloane din câmpul de text al formularului.
  • rows = "" - definește numărul de rânduri din câmpul de text al formularului.

Dacă între pune text, acesta va fi afișat în interiorul casetei ca exemplu care este ușor de eliminat.

Exemplu de formular HTML | Lista verticală

Formulare HTML

Etichete, atribute și valori

  • - definiți o listă cu poziții pentru selecție.
  • dimensiune = "" - definește numărul de poziții vizibile din listă. Dacă valoarea este 1, avem de-a face cu o listă derulantă.
  • - definiți pozițiile (articolele) din listă.
  • value = "" - conține valoarea care va fi trimisă prin formular la adresa URL specificată pentru procesare.
  • selectat = "selectat" - Selectează poziția listei ca exemplu.

Exemplu de formular HTML | Lista derulante

Prin creșterea valorii atributului size = "", obținem o listă cu o bară de derulare:

Prima poziție A doua poziție A treia poziție A patra poziție

Formulare HTML

Pentru această opțiune, folosim steagul multiplu = „multiplu”, care face posibilă selectarea mai multor poziții. Absența lui permite selectarea unui singur articol.

  • tip = "submit" - definește butonul.
  • tip = "resetare" - definește butonul de resetare.
  • valoare = "" - definește eticheta de pe buton.

    • Vezi suplimentar:

    Descriere

    Etichetă

    creează un formular pe o pagină web. 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.

    Un document poate conține orice număr de formulare, dar un singur formular poate fi trimis la server la un moment dat. Din acest motiv, datele din formular trebuie să fie independente unele de altele.

    Pentru a trimite formularul către server, utilizați butonul Trimitere, același lucru se poate realiza prin apăsarea tastei Enter din cadrul formularului. Dacă butonul Trimitere nu este prezent în formular, tasta Enter simulează utilizarea acestuia.

    Când formularul este trimis la server, controlul datelor este transferat programului specificat de atributul de acțiune al etichetei. ... Browserul pregătește informațiile sub forma unei perechi „nume = valoare”, unde numele este determinat de atributul nume al etichetei iar valoarea este introdusă de utilizator sau setată în câmpul implicit al formularului. Dacă metoda GET este folosită pentru a trimite date, atunci bara de adrese poate lua următoarea formă.

    http: //www..cgi? nick =% C2% E0% ED% FF +% D8% E0% EF% EE% F7% EA% E8% ED & pagina = 5

    Parametrii sunt listați după semnul întrebării după adresa programului CGI și sunt separați printr-un caracter și (&). Caracterele non-latine sunt convertite în hexazecimal (în forma% HH, unde HH este codul hexazecimal pentru valoarea caracterului ASCII), spațiul este înlocuit cu un plus (+).

    Permis în interiorul recipientului plasați alte etichete, în timp ce formularul în sine nu este afișat în niciun fel pe pagina web, sunt vizibile doar elementele sale și rezultatele etichetelor imbricate.

    Sintaxă

    ...

    Atribute

    Setează codificarea în care serverul poate primi și procesa date. Adresa programului sau documentului care prelucrează datele din formular. Permite completarea automată a câmpurilor de formular. O modalitate de a codifica datele din formular. Metoda protocolului HTTP. Numele formularului. Anulează validarea încorporată a datelor din formular pentru introducerea corectă. Numele ferestrei sau cadrul unde handlerul va încărca rezultatul returnat.

    Etichetă de final

    Necesar.

    HTML5 IE Cr Op Sa Fx

    eticheta FORM

    Cum crezi că înseamnă abrevierea „OS”?

    Ofițeri
    Sistem de operare
    Muște mari în dungi

    Rezultatul acestui exemplu este prezentat în Fig. unu.

    Orez. 1. Vizualizarea elementelor de formular în fereastra browserului

    ... continutul formularului...

  • Chiar în interiorul elementului de formular ar trebui să existe controale, dintre care pot fi atâtea câte doriți.

    • Atributele formularului:

    • Atributul action specifică fișierul server cu scriptul responsabil pentru prelucrarea principală a datelor trimise din formular. De obicei, codul acestui fișier este scris într-un limbaj de programare pe partea de server, de exemplu, în limbajul respectiv php sau perl.
    • Atributul enctype indică tipul de informații transmise serverului, dacă este vorba doar de date text - text / simplu, dacă fișierele sunt trimise cu formularul, atunci ar trebui să specificați multipart / form-data.
    • Atributul metodei specifică și definește forma de transmitere a datelor. Nu ne vom opri în detaliu asupra acestui lucru, dar trebuie spus că pentru un transfer mai de încredere ar trebui specificată metoda postului.

    Elemente de formular HTML

      <tip de intrare = „text” nume = „autentificare” dimensiune = „20” valoare = „(! LANG: Autentificare" maxlength = "25" > !}

      Rezultat:

      • Valoarea atributului tip - text - indică faptul că acesta este un câmp text
      • dimensiune - dimensiunea câmpului de text în caractere
      • maxlength - numărul maxim de caractere care se potrivesc în câmp
      • valoare - textul original din caseta de text
      • nume - numele elementului, necesar procesării datelor din fișierul handler

      Rezultat:


      În loc de text, în câmp este afișată o mască - asteriscuri sau cercuri

      <tip de intrare = valoarea „trimite” = „Trimite date”>

      Rezultat:

      Butonul de trimitere colectează toate datele introduse de utilizator din formular și le trimite la adresa specificată în atributul de acțiune al formularului.

      <tip de intrare = „resetare” valoare = „(! LANG: Ștergeți formularul" > !}

      Rezultat:

      Butonul readuce starea tuturor controalelor la starea lor inițială (șterge formularul)

      <tip de intrare = „checkbox” nume = „asp” valoare = „(! LANG: da" > !} ASP<br> <tip de intrare = „checkbox” name = „js” value = „(! LANG: da" checked = "checked" > !} javascript<br> <tip de intrare = „căsuță de selectare” nume = „php” valoare = „(! LANG: da" > !} PHP<br> <tip de intrare = „checkbox” nume = „html” valoare = „(! LANG: da" checked = "checked" > !} HTML<br>

      ASP
      javascript
      PHP
      HTML


      Rezultat:

      ASP
      javascript
      PHP
      HTML

      În html, caseta de selectare este folosită pentru a organiza selecția multiplă, de exemplu. când este necesar și posibil să alegeți mai multe variante de răspuns

      <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: asp" > !} ASP<br> <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: js" > !} Javascript<br> <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: php" > !} PHP<br> <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: html" checked = "checked" > !} HTML<br>

      ASP
      Javascript
      PHP
      HTML

      Rezultat:

      ASP
      Javascript
      PHP
      HTML

      butonul radio html servește pentru o singură selecție din mai multe opțiuni

      Atributul verificat setează elementul verificat imediat

    Important: Pentru articole radio este necesar ca valoarea atributului Nume toate elementele din grup au avut aceleași: în acest caz, elementele vor funcționa interconectate, când un element este pornit, celelalte vor fi oprite

    Meniu derulant HTML

    Să ne uităm la un exemplu de adăugare a unei liste derulante:

    1 2 3 4 5 6 <selectați numele = "carte" dimensiune = "1"> <valoarea opțiunii = "(! LANG: asp" > !} ASP</ opțiune> <valoarea opțiunii = "(! LANG: js" > !} JavaScript</ opțiune> <valoarea opțiunii = "(! LANG: php" > !} PHP</ opțiune> <valoarea opțiunii = "(! LANG: html" selected = "selected" > !} HTML</ opțiune> </ selectați>

    Rezultat:

    • Lista derulantă constă dintr-o etichetă principală - select - care are o pereche de închidere, iar fiecare element din listă este o etichetă de opțiune, în interiorul căreia este afișat textul articolului
    • Atribut dimensiune cu valoare "unu" indică faptul că lista restrânsă afișează un articol, restul sunt deschise făcând clic pe săgeata de meniu
    • Atributul selectat al articolului (opțiune) indică faptul că acest articol particular va fi vizibil inițial, iar restul elementelor sunt „restrânse”

    Pentru liste mari și complexe, există o opțiune adăugați subtitluri- eticheta optgroup cu atributul label (label):

    1 2 3 4 5 6 7 8 9 10 11 12 <selectați numele = "carte" dimensiune = "1"> <optgroup label = „Engleză”> <valoarea opțiunii = "(! LANG: asp" > !} ASP</ opțiune> <valoarea opțiunii = "(! LANG: js" > !} JavaScript</ opțiune> <valoarea opțiunii = "(! LANG: php" > !} PHP</ opțiune> <valoarea opțiunii = "(! LANG: html" selected = "selected" > !} HTML</ opțiune> </ optgroup> <optgroup label = „Ruși”> <valoarea opțiunii = "(! LANG: asp_rus" > !} ASP în rusă</ opțiune> <valoarea opțiunii = "(! LANG: js_rus" > !} JavaScript în rusă</ opțiune> </ optgroup> </ selectați>


    Pentru a oferi o oportunitate selectați mai multe articole în același timp trebuie adăugat atributul multiplu. Dar, în acest caz, atributul dimensiune ar trebui setat la o valoare mai mare decât 1:

    Rezultat:

    • Lățimea elementului depinde de atributul cols, care specifică câte caractere se potrivesc pe orizontală
    • Atributul rows determină numărul de rânduri dintr-un element

    Alte elemente

    Elemente și atribute suplimentare

    • Pentru controale radioși Caseta de bifat este convenabil să folosiți elemente suplimentare, care, în primul rând, fac textul ancorat la elementul radio sau caseta de selectare în sine și, în al doilea rând, adăugați o lovitură la clic:
      • <tip de intrare = "checkbox" id = "book1"> <etichetă pentru = „carte1”> ASP</ etichetă>

      În exemplu, a fost creată o legendă (etichetă etichetă) pentru elementul casetă de selectare. Legarea se realizează prin atributul id, a cărui valoare este specificată în atributul for al etichetei.

      Rezultat:

    • Atributul dezactivat vă permite să blocați un element, făcându-l indisponibil pentru modificarea utilizatorului:
      • <tip de intrare = „text” nume = „autentificare” dimensiune = „20” valoare = „(! LANG: Autentificare" maxlength = "25" disabled = "disabled" >!}
      <tip de intrare = „checkbox” nume = „asp” valoare = „(! LANG: da" > !} ASP<br> <tip de intrare = „checkbox” name = „js” value = „(! LANG: da" checked = "checked" disabled = "disabled" > !} javascript<br>


      ASP
      javascript

    Formulare HTML sunt controale care sunt utilizate pentru a colecta informații de la vizitatorii site-ului web.

    Formularele web sunt alcătuite dintr-o colecție de casete de text, butoane, liste și alte controale pe care se poate face clic. Din punct de vedere tehnic, formularele transferă date de la un utilizator la un server la distanță.

    Pentru a primi și a procesa datele din formular, se folosesc limbaje de programare web, cum ar fi PHP, Perl.

    Înainte de HTML5, formularele web erau o colecție de elemente multiple. , terminand cu un buton ... A fost nevoie de mult efort pentru a stila formularele în diferite browsere. În plus, formularele necesitau JavaScript pentru a valida introducerea și au fost eliminate anumite tipuri de câmpuri de intrare pentru a specifica informații de zi cu zi, cum ar fi datele, adresele de e-mail și adresele URL.

    Formulare HTML5 a rezolvat majoritatea acestor probleme comune prin introducerea de noi atribute, oferind posibilitatea de a schimba aspectul elementelor de formular prin CSS3.

    Orez. 1. Formulare web îmbunătățite cu HTML5

    Crearea formularelor HTML5

    1. Element

    Orice formă se bazează pe un element ...... Nu prevede introducerea datelor, deoarece este un container, care ține împreună toate controalele formularului - câmpuri... Atributele acestui element conțin informații care sunt comune tuturor câmpurilor de formular, așa că trebuie să includeți câmpuri combinate logic într-un singur formular.

    Tabelul 1. Atributele etichetei
    Atribut Sens/Descriere
    accept-charset Valoarea atributului este un spațiu delimitat lista de codificare a caracterelor pentru a fi folosit pentru a trimite formularul, de exemplu .
    acțiune Atribut obligatoriu care specifică url-ul handler-ului de formular de pe serverul căruia îi sunt transmise datele. Este un fișier (de exemplu, action.php) care descrie ce trebuie făcut cu datele din formular. Dacă valoarea atributului nu este specificată, atunci după reîncărcarea paginii, elementele formularului vor lua valorile implicite.
    Dacă toată munca va fi efectuată pe partea clientului prin scripturi JavaScript, atunci valoarea # poate fi specificată pentru atributul acțiune.
    De asemenea, vă puteți asigura că formularul completat de vizitator ajunge prin poștă. Pentru a face acest lucru, trebuie să faceți următoarea intrare:
    completare automată

    enctype Folosit pentru a indica MIMA-tip de date trimise cu formularul, de exemplu, enctype = "multipart / form-data". Specificat numai dacă metoda = „post”.
    application / x-www-form-urlencoded este tipul de conținut implicit, indicând faptul că datele trimise sunt o listă de variabile de formular codificate în URL. Caracterele de spațiu (ASCII 32) vor fi codificate ca + și caracterele speciale, cum ar fi! va fi codificat în hexadecimal ca% 21.
    multipart / form-data - folosit pentru a trimite formulare care conțin fișiere, date non-ASCII și date binare, constă din mai multe părți, fiecare dintre acestea reprezentând conținutul unui element individual de formular.
    text / simplu - indică faptul că este transmis text simplu (nu html).
    metodă Specifică modul în care sunt transmise datele din formular.
    Metoda get transmite date către server prin bara de adrese a browserului. Când se generează o solicitare către server, toate variabilele și valorile lor formează o secvență precum www.anysite.ru/form.php?var1=1&var2=2. Numele și valorile variabilelor sunt atașate la adresa serverului după? și sunt separate prin semnul &. Toate caracterele speciale și literele, altele decât latine, sunt codificate în formatul % nn, spațiul este înlocuit cu +. Această metodă ar trebui utilizată dacă nu transferați cantități mari de informații. Dacă intenționați să trimiteți un fișier împreună cu formularul, această metodă nu va funcționa.
    Metoda postului este folosită pentru a trimite cantități mari de date, precum și informații confidențiale și parole. Datele trimise folosind această metodă nu sunt vizibile în antetul URL-ului deoarece sunt conținute în corpul mesajului.
    Nume seturi numele formularului pentru a fi folosit pentru a accesa elemente de formular prin scripturi, de exemplu name = „opros”.
    nuvalidate Dezactivează validarea pe butonul de trimitere a formularului. Atributul este utilizat fără a specifica o valoare
    ţintă Specifică fereastra către care vor fi direcționate informațiile:
    _blank - fereastră nouă
    _self - același cadru
    _parent - cadrul părinte (dacă există, dacă nu, atunci la cel curent)
    _top este fereastra de nivel superior în raport cu acest cadru. Dacă apelul nu este dintr-un cadru copil, atunci în același cadru.

    2. Gruparea elementelor de formular

    Element

    ...
    este destinat grupării elementelor legate între ele, împărțind astfel forma în fragmente logice.

    Fiecare grup de elemente poate fi numit folosind elementul care urmează eticheta

    ... Numele grupului apare în partea stângă în chenarul de sus
    ... De exemplu, dacă elementul
    informațiile de contact sunt stocate:

    Informatii de contact


    Orez. 2. Gruparea elementelor de formular folosind

    Tabelul 2. Atributele etichetei
    Atribut Sens/Descriere
    dezactivat Dacă atributul este prezent, atunci un grup de elemente de formular înrudite care se află în interiorul containerului
    dezactivat pentru completare și editare. Folosit pentru a restricționa accesul la unele câmpuri de formular care conțin date introduse anterior. Atributul este utilizat fără a specifica o valoare -
    .
    formă
    in acelasi document. Indică una sau mai multe forme cărora le aparține acest grup de elemente. În prezent, atributul nu este acceptat de niciun browser.
    Nume Definește Nume pentru a fi utilizat pentru a face referire la elemente în JavaScript sau pentru a face referire la datele din formular după ce formularul a fost completat și trimis. Analog cu atributul id.

    3. Creați câmpuri de formular

    Element creează majoritatea câmpurilor de formular. Atributele elementului diferă în funcție de tipul de câmp pentru care elementul este utilizat.

    Folosind stilurile CSS, puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și adăugați chenare, culoarea de fundal și imaginea de fundal. Lățimea câmpului este stabilită de proprietatea width.

    Tabelul 3. Atributele etichetei
    Atribut Sens/Descriere
    Accept Specifică tipul de fișier care poate fi trimis către server. Indicat doar pentru ... Valori posibile:
    file_extension - permite încărcarea fișierelor cu extensia specificată, de exemplu, accept = ". gif", accept = ". pdf", accept = ". doc"
    audio / * - permite descărcarea fișierelor audio
    video / * - permite încărcarea fișierelor video
    imagine / * - permite încărcarea imaginilor
    media_type - indică tipul media al fișierelor încărcate.
    alt Definește text alternativ pentru imagini, indicat doar pentru .
    completare automată Responsabil pentru memorarea valorilor introduse în câmpul de text și înlocuirea lor automată la introducerea ulterioară:
    pornit - înseamnă că câmpul nu este protejat, iar valoarea acestuia poate fi stocată și preluată,
    off - dezactivează completarea automată pentru câmpurile formularului.
    autofocus Vă permite să vă asigurați că în formularul încărcat acest sau acel câmp de intrare are deja focus (a fost selectat), fiind gata să introduceți o valoare.
    verificat Atributul verifică dacă caseta de selectare este bifată în mod implicit la încărcarea paginii pentru câmpurile de tip = „checkbox” și tip = „radio”.
    dezactivat
    formă Valoarea atributului trebuie să fie egală cu atributul id al elementului in acelasi document. Specifică unul sau mai multe formulare cărora le aparține acest câmp de formular.
    formare Setează adresa URL a fișierului care va procesa datele introduse în câmpurile la trimiterea formularului. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Acest atribut înlocuiește valoarea atributului de acțiune al formularului în sine.
    formenctype Determină modul în care datele câmpului formularului vor fi codificate atunci când sunt trimise la server. Supliniază valoarea atributului enctype al formularului. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Opțiunile sunt:
    application / -x-www-form-urlencoded este implicit. Toate caracterele sunt codificate înainte de trimitere (spațiile sunt înlocuite cu +, caracterele speciale sunt convertite în valori ASCII HEX)
    multipart / form-data - caracterele nu sunt codificate
    text / simplu - spațiile sunt înlocuite cu caracterul +, iar caracterele speciale nu sunt codificate.
    formmetod Atributul specifică metoda pe care browserul o va folosi pentru a trimite datele formularului către server. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Supliniază valoarea atributului metodei din formular. Opțiunile sunt:
    get este valoarea implicită. Datele din formular (perechea nume/valoare) sunt atașate la url și trimise la server: url? Nume = valoare și nume = valoare
    post - Datele formularului sunt trimise ca cerere http.
    formnovalidate Specifică faptul că datele câmpului formularului nu trebuie validate atunci când formularul este trimis. Supliniază valoarea atributului novalidate al formularului. Poate fi folosit fără a specifica o valoare de atribut.
    formtarget Stabilește unde să se afișeze răspunsul primit după trimiterea formularului. Este setat numai pentru câmpurile de tip = „submit” și tip = „image”. Supliniază valoarea atributului țintă al formularului.


    _parent - Încarcă răspunsul la cadrul părinte
    _top - încarcă răspunsul pe ecran complet
    framename - Încarcă răspunsul într-un cadru cu numele specificat.
    înălţime Valoarea atributului conține numărul de pixeli fără a specifica o unitate. Setează înălțimea unui câmp de formular de tipul = „imagine”, de exemplu ... Este recomandat să setați atât înălțimea cât și lățimea câmpului în același timp.
    listă Este o referință la un articol , conține id-ul său. Vă permite să oferiți utilizatorului mai multe opțiuni din care să aleagă atunci când începe să introducă o valoare în câmpul corespunzător.
    max Vă permite să limitați intrarea de date numerice permise la valoarea maximă; valoarea atributului poate conține un număr întreg sau fracționar. Se recomandă utilizarea acestui atribut împreună cu atributul min. Funcționează cu următoarele tipuri de câmpuri: număr, interval, dată, dată și oră, dată și oră-local, lună, oră și săptămână.
    lungime maxima Atributul specifică numărul maxim de caractere care pot fi introduse în câmp. Valoarea implicită este de 524288 de caractere.
    min Vă permite să restricționați introducerea numerică validă la valoarea minimă.
    multiplu Permite utilizatorului să introducă mai multe valori ale atributelor, separate prin virgulă. Se aplică fișierelor și adreselor de e-mail. Specificat fără o valoare de atribut.
    Nume Specifică numele care va fi folosit pentru a accesa elementul de exemplu în foile de stil css. Analog cu atributul id.
    model Vă permite să definiți utilizarea expresie uzuala sintaxa datelor care trebuie permise într-un anumit câmp. De exemplu, model = "(3) - (3)" - parantezele pătrate stabilesc intervalul de caractere valide, în acest caz - orice litere mici, numărul dintre acolade indică faptul că sunt necesare trei litere mici, urmate de o liniuță, apoi trei cifre în intervalul de la 0 la 9.
    substituent Conține textul care este afișat în câmpul de introducere înainte de completare (cel mai adesea este un indiciu).
    numai citire Nu permite utilizatorului să modifice valorile elementelor de formular, în timp ce selectarea și copierea textului este disponibilă. Specificat fără o valoare de atribut.
    necesar Afișează un mesaj care afirmă că acest câmp este obligatoriu. Dacă utilizatorul încearcă să trimită formularul fără a introduce valoarea necesară în acest câmp, pe ecran va fi afișat un mesaj de avertizare. Specificat fără o valoare de atribut.
    mărimea Specifică lățimea aparentă a marginii, în caractere. Valoarea implicită este 20. Funcționează cu următoarele tipuri de câmpuri: text, căutare, tel, url, e-mail și parolă.
    src Specifică adresa URL a unei imagini de utilizat ca buton pentru trimiterea datelor din formular. Specificat doar pentru domeniu .
    Etapa Folosit pentru articolele care necesită introducere numerică, indică cantitatea de creștere sau scădere a valorilor în timpul ajustării intervalului (pas).
    tip buton - creează un buton.
    casetă de selectare - transformă câmpul de introducere într-o casetă de selectare care poate fi bifată sau debifată, de exemplu
    eu am o mașină
    culoare - generează selecționatori de culori în browserele compatibile, oferind utilizatorilor posibilitatea de a selecta valorile de culoare în format hexazecimal.
    data - vă permite să introduceți o dată în formatul zz.ll.aaaa.
    Zi de nastere:
    datetime-local - vă permite să introduceți data și ora, separate printr-o literă engleză majusculă T conform modelului dd.mm.aaaa hh: mm.
    Ziua și ora de naștere:
    e-mail - browserele care acceptă acest atribut se vor aștepta ca utilizatorul să introducă date care se potrivesc cu sintaxa adreselor de e-mail.
    E-mail:
    fișier - vă permite să încărcați fișiere de pe computerul utilizatorului.
    Selectați un fișier:
    ascuns - Ascunde un control care nu este vizibil pentru browser și împiedică utilizatorul să modifice valorile implicite.
    imagine - creează un buton, permițându-vă să inserați o imagine în locul textului de pe buton.
    luna - Permite utilizatorului să introducă anul și luna folosind modelul aaaa-mm.
    număr - destinat introducerii valorilor întregi. Atributele sale min, max și step stabilesc valorile superioare, inferioare și, respectiv, de spațiere. Aceste atribute sunt presupuse pentru toate articolele care au valori numerice. Valorile lor implicite depind de tipul elementului.
    Indicați cantitatea (de la 1 la 5):
    parola - creează câmpuri de text în formular, în timp ce caracterele introduse de utilizator sunt înlocuite cu asteriscuri, marcatori sau alte pictograme setate de browser.
    Introdu parola:
    radio - creează un buton radio - un control sub forma unui cerc mic care poate fi activat sau dezactivat.
    Vegetarian:
    interval - vă va permite să creați un element de interfață, cum ar fi un glisor, min / max - vă va permite să setați intervalul de selecție
    resetare - creează un buton care șterge câmpurile formularului de datele introduse de utilizator.
    căutare - denotă un câmp de căutare, în mod implicit câmpul de intrare este dreptunghiular.
    Căutare:
    trimite - creează un buton standard pe care se poate face clic. Butonul colectează informații din formular și le trimite spre procesare.
    text - creează casete de text într-un formular, afișând o casetă de text cu un rând pentru introducerea textului.
    oră - vă permite să introduceți ora în format de 24 de ore folosind șablonul hh: mm. În browserele compatibile, apare ca un control numeric de intrare cu o valoare pe care se poate face clic cu mouse-ul și acceptă numai valori de timp.
    Specificați ora:
    url - câmpul este destinat specificarii adreselor URL.
    Pagina principală:
    săptămână - Instrumentul indicator adecvat permite utilizatorului să selecteze o săptămână din an și apoi furnizează introducerea datelor în format nn-aaaa. În funcție de an, numărul de săptămâni poate fi 52 sau 53.
    Indicați săptămâna:
    valoare Specifică textul afișat pe un buton, într-o casetă sau textul asociat. Nu este specificat pentru câmpurile de tip fișier.
    lăţime Valoarea atributului conține numărul de pixeli. Vă permite să setați lățimea câmpurilor de formular.

    4. Câmpuri de introducere a textului

    Element folosit în loc de element atunci când trebuie să creați casete de text mari. Textul afișat ca valoare originală este plasat în interiorul etichetei. Dimensiunile câmpului sunt stabilite folosind atributele cols - dimensiunile orizontale, rândurile - dimensiunile verticale. Înălțimea câmpului poate fi setată cu proprietatea height. Toate dimensiunile sunt calculate pe baza mărimii unui caracter de font monospațial.

    Tabelul 4. Atributele etichetei

    7. Butoane

    Element creează butoane pe care se poate face clic. Spre deosebire de butoanele create ( , , , ), în interiorul elementului .

    Butoanele permit utilizatorilor să trimită date într-un formular, să ștergă conținutul unui formular sau să întreprindă alte acțiuni. Puteți crea chenare, puteți schimba fundalul și puteți alinia textul pe buton.

    Tabelul 9. Atributele etichetei
    Atribut Sens/Descriere
    autofocus Setează focalizarea pe un buton la încărcarea paginii.
    dezactivat Dezactivează butonul, făcându-l inaccesibil.
    formă Indică una sau mai multe forme cărora le aparține acest buton. Valoarea atributului este identificatorul formularului corespunzător.
    formare Valoarea atributului conține adresa URL a handler-ului pentru datele formularului trimise atunci când se face clic pe butonul. Doar pentru un buton de tipul = „trimite”. Supliniază valoarea atributului de acțiune specificat pentru element .
    formenctype Specifică tipul de codificare a datelor din formular înainte de a fi trimise la server atunci când se face clic pe butoanele de tip = „trimite”. Supliniază valoarea atributului enctype specificat pentru element ... Valori posibile:
    application / x-www-form-urlencoded este implicit. Toate caracterele vor fi codificate înainte de trimitere.
    multipart / form-data - caracterele nu sunt codificate. Folosit atunci când fișierele sunt încărcate folosind un formular.
    text / simplu - caracterele nu sunt codificate și spațiile sunt înlocuite cu caracterul +.
    formmetod Atributul definește metoda pe care browserul o va folosi pentru a trimite formularul. Supliniază valoarea atributului metodei specificat pe element ... Este specificat doar pentru butoanele de tipul = „submit”. Valori posibile:
    get - datele din formular (pereche nume/valoare) sunt adăugate la url și trimise la server. Această metodă are restricții privind dimensiunea datelor trimise și nu este potrivită pentru trimiterea de parole și informații confidențiale.
    post - datele din formular sunt adăugate ca cerere http. Metoda este mai fiabilă și mai sigură decât get și nu are limită de dimensiune.
    formnovalidate Atributul specifică faptul că datele formularului nu trebuie validate la trimitere. Este specificat doar pentru butoanele de tipul = „submit”.
    formtarget Atributul specifică în ce fereastră se va afișa rezultatul după trimiterea formularului. Este specificat doar pentru butoanele de tipul = „submit”. Supliniază valoarea atributului țintă specificat pentru element .
    _blank - încarcă răspunsul într-o nouă fereastră/filă
    _self - încarcă răspunsul în aceeași fereastră (implicit)
    _parent - Încarcă răspunsul la cadrul părinte
    _top - încarcă răspunsul pe ecran complet
    framename - Încarcă răspunsul într-un cadru cu numele specificat.
    Nume Specifică numele butonului, valoarea atributului este text. Folosit pentru a conecta la datele din formular după ce formularul a fost trimis sau pentru a conecta la un buton (e) dat(e) în JavaScript.
    tip Definește tipul butonului. Valori posibile:
    buton - buton pe care se poate face clic
    resetare - buton de resetare, returnează valoarea inițială
    trimite - un buton pentru trimiterea datelor din formular.
    valoare Setează valoarea implicită trimisă atunci când se face clic pe butonul.

    8. Casete de selectare și butoane radio în formulare

    Casetele de selectare din formulare sunt setate folosind construcția iar comutatorul cu .

    Spre deosebire de butoanele radio, mai multe casete de selectare pot fi setate într-un singur formular. Dacă atributul bifat este specificat pentru casetele de selectare, atunci când pagina este încărcată, casetele de selectare vor fi deja bifate în câmpurile de formular corespunzătoare.

    Element

    În procesul de navigare prin site-uri, utilizatorul practic face doar clic pe link-uri pentru a naviga pe paginile web.

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

    • înregistrare și autentificare pe site-uri;
    • introducerea de informații personale (nume, adresă, detalii card de credit etc.);
    • filtrarea conținutului (folosind liste derulante, casete de selectare etc.);
    • efectuarea unei căutări;
    • încă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;
    • descărcați widget-uri;
    • butoanele 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 un element bloc care definește interactiv parte a unei pagini web. Ca rezultat, toate controalele (cum ar fi ,