Ce atribute sunt necesare pentru eticheta de intrare. Adrese de email. Descrierea parametrilor etichetei
Eticheta INPUT este unul dintre elementele de formular versatile și vă permite să creați diferite elemente de interfață și să oferiți interacțiunea utilizatorului. INPUT este destinat în principal creării de câmpuri de text, diverse butoane, butoane radio și casete de selectare. Cu toate că element INPUT Nu este nevoie să plasați un FORM în interiorul containerului care definește formularul, dar dacă intrarea utilizatorului trebuie trimisă la server unde este procesată de un program CGI, atunci FORM este necesar. Același lucru este valabil și în cazul utilizării prelucrării datelor aplicații client, de exemplu, scripturi în JavaScript.
Parametrul principal al etichetei INPUT, care determină tipul de element, este tipul. Vă permite să setați următoarele elemente formulare: câmp de text (text), câmp de parolă (parolă), comutator (căsuță de selectare), casetă de selectare (buton radio), câmp ascuns (ascuns), buton (buton), buton pentru a trimite formularul (trimitere), buton pentru a șterge formularul ( reset ), un câmp pentru trimiterea unui fișier (fișier) și un buton cu o imagine (imagine). Fiecare element are propria listă de parametri care îi determină aspectul și caracteristicile.
Sintaxă
Etichetă de închidere
Nu este necesar.
Opțiuni
align - definește alinierea imaginii.
alt - text alternativ pentru un buton cu o imagine.
chenar - grosimea cadrului din jurul imaginii.
bifat - un buton radio sau o casetă de selectare preactivată.
dezactivat - blochează accesul și modificarea elementului.
lungime maxima - suma maxima caractere permise în text.
nume - numele câmpului, destinat astfel încât procesatorul de formulare să-l poată identifica.
readonly - specifică faptul că câmpul nu poate fi modificat de către utilizator.
dimensiune - lățimea câmpului de text.
src - valoarea elementului.
Exemplul 1: Utilizarea etichetei INPUT
Numele dumneavoastră:
Ce browser folosești în principal:
Internet Explorer
Netscape
Operă
FireFox
Mozilla
Un comentariu
Descriere
Determină modul de aliniere a câmpului de imagine în raport cu textul sau alte elemente de formular.
Sintaxă
Aplicabil
Argumente
Tabelul 1 listează valorile posibile ale parametrului de aliniere și rezultatul utilizării acestuia.
| de jos | Marginea de jos a imaginii este aliniată la marginea de jos a liniei curente. | |
| absmiddle | Mijlocul imaginii este aliniat la linia mediană text. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| de jos sau de bază | Marginea de jos a imaginii este aliniată cu linia de bază a liniei de text. Această valoare este setată implicit. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| stânga | Imaginea este poziționată la marginea din stânga a elementului părinte. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| mijloc | Mijlocul imaginii este aliniat la linia de bază a liniei curente de text. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| dreapta | Imaginea este aliniată la marginea dreaptă a elementului părinte. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| texttop | Marginea de sus a imaginii este aliniată la cel mai înalt element de text al liniei curente. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| top | Marginea de sus a imaginii este aliniată la cel mai înalt element al liniei curente. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
Valoare implicită
fund
Exemplul 2: Alinierea unui câmp cu o imagine
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Notă
Deși toate valorile parametrului align sunt acceptate de browsere, argumentele absbottom , absmiddle , baseline și texttop nu sunt acoperite de specificația HTML 4.
Descriere
Parametrul alt setează text alternativ pentru câmpul de imagine. Acest text vă permite să obțineți informații text despre desen când încărcarea imaginii este dezactivată în browser. Deoarece imaginile sunt încărcate după ce browserul primește informații despre ele, textul de înlocuire al imaginii apare mai devreme. Și pe măsură ce se încarcă, textul va fi înlocuit cu o imagine. Browserele afișează, de asemenea, text alternativ ca un sfat explicativ atunci când treceți mouse-ul peste o imagine.
Sintaxă
Argumente
Orice potrivit șir de text. Trebuie să fie cuprins între ghilimele duble sau simple.
Valoare implicită
Nu.
Exemplul 3: Adăugarea de text alternativ
...
Descriere
Browserele tratează imaginile adăugate prin eticheta INPUT similar cu imaginile create folosind Etichetă IMG. De asemenea, puteți adăuga un cadru în jurul imaginii, a cărui culoare se potrivește cu culoarea textului.
Sintaxă
Argumente
Orice număr întreg pozitiv în pixeli.
Valoare implicită
0
Exemplul 4: Adăugarea unui cadru la o imagine
...
Notă
În prezent, această opțiune este acceptată doar de browserul Netscape alte browsere o ignoră și afișează imaginea fără margine.
Descriere
Acest parametru determină dacă un element de formular, cum ar fi o casetă de selectare sau un buton radio, este pre-bifat. În cazul utilizării comutatoarelor (checkbox), doar un element al grupului poate fi bifat pentru casete de selectare (radiobutton), este permis să se marcheze cel puțin toate elementele;
Sintaxă
Argumente
Nu.
Valoare implicită
Exemplul 5. Marcarea butoanelor radio
Cu care sisteme de operare va cunoasteti?
Windows 95/98
Windows 2000
Sistemul X
Linux
X3-DOS
Descriere
Blochează accesul și modificarea unui câmp de formular. În acest caz, este afișat gri și nu poate fi activat de către utilizator. În plus, un astfel de câmp nu poate obține focalizare apăsând tasta Tab, folosind mouse-ul sau în alt mod. Cu toate acestea, această stare de câmp poate fi modificată folosind scripturi.
Sintaxă
Aplicabil
La toate elementele de formă.
Argumente
Nu.
Valoare implicită
În mod implicit, această opțiune este dezactivată.
Descriere
Setează numărul maxim de caractere care pot fi introduse de utilizator într-un câmp de text. Când acest număr este atins în timpul tastării, introducerea ulterioară devine imposibilă.
Sintaxă
Argumente
Orice număr întreg pozitiv în caractere.
Valoare implicită
Introducerea caracterelor nu este limitată.
Exemplul 7: Limitarea numărului de caractere introduse într-un câmp
Descriere
Definește un nume unic pentru un element de formular. De obicei, acest nume este folosit atunci când trimiteți date către server sau pentru a accesa datele câmpului introduse prin scripturi.
Sintaxă
Aplicabil
La toate elementele de formă.
Argumente
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 parametrul nume.
Valoare implicită
Nu.
Exemplul 8: Utilizarea unui nume de câmp
funcția DataField(f) (
alert("Ați introdus: " + f.comment.value);
Introduceți text
Descriere
Atunci când o opțiune numai pentru citire este adăugată la o etichetă INPUT, câmpul de text nu poate fi modificat de către utilizator, inclusiv introducerea text nou sau modificați unul existent. În plus, un astfel de câmp nu poate obține focalizare apăsând tasta Tab, folosind mouse-ul sau în alt mod. Cu toate acestea, starea și conținutul câmpului pot fi modificate folosind scripturi.
Sintaxă
Argumente
Nu.
Valoare implicită
În mod implicit, această valoare este dezactivată.
Exemplul 9: Câmp numai pentru citire
Descriere
Lățimea câmpului de text, care este determinată de numărul de caractere dintr-un font monospațiu. Cu alte cuvinte, lățimea este determinată de numărul de litere adiacente de aceeași lățime orizontală. Dacă dimensiunea fontului este modificată folosind stiluri, lățimea se schimbă în consecință.
Sintaxă
Argumente
Orice număr întreg pozitiv.
Valoare implicită
20
Exemplul 10. Lățimea câmpului
Descriere
Adresa fișierului grafic care va fi afișat pe pagina web în câmpul imagine. Cele mai populare fișiere din format GIFși JPEG.
Sintaxă
Argumente
Valoarea este considerată plină sau cale relativă la dosar.
Valoare implicită
Nu.
Exemplul 11. Calea către fișierul grafic
...
Descriere
Spune browserului ce tip este elementul formularului.
Sintaxă
Argumente
Tabelul 2 listează valorile posibile ale parametrului tip și tipul câmpului de formular rezultat.
Descriere
Definește valoarea elementului de formular care va fi trimisă către server sau primită folosind scripturi client. O pereche nume/valoare este trimisă către server, unde numele este specificat de parametrul nume al etichetei INPUT, iar valoarea este specificată de parametrul value.
În funcție de tipul elementului, parametrul valoare joacă următorul rol:
- pentru butoane (input type=button | reset | submit ) setează eticheta de text pe ele;
- pentru câmpurile de text (tip de intrare=parolă | text ) specifică șirul introdus anterior. Utilizatorul poate șterge textul și introduce propriile caractere, dar atunci când este utilizat într-un formular, butonul Reset șterge textul utilizatorului și restabilește ceea ce a fost introdus în parametrul valoare;
- pentru casetele de selectare și butoanele radio (input type=checkbox | radio ) definește în mod unic fiecare element, astfel încât clientul sau program server ar putea determina clar ce element a selectat utilizatorul.
Sintaxă
Aplicabil
La toate elementele de formă.
Argumente
Orice șir de text.
Valoare implicită
Nu.
Exemplul 13: Adăugarea unei valori de câmp
Cum crezi că înseamnă abrevierea „OS”?
Ofițeri
sistem de operare
Muscă cu dungi grozave
Formularele HTML sunt controale care sunt utilizate pentru a colecta informații de la vizitatorii site-ului web.
Formularele web constau dintr-o colecție de câmpuri de text, butoane, liste și alte controale care sunt activate printr-un clic de mouse. Din punct de vedere tehnic, formularele transmit date de la utilizator la un server la distanță.
Limbaje de programare web precum PHP, Perl sunt folosite pentru a primi și procesa datele din formular.
Înainte de apariția HTML5, formularele web erau o colecție de mai multe elemente, care se terminau cu un buton. A fost nevoie de mult efort pentru a modela formularele în diferite browsere. În plus, formularele necesitau utilizarea JavaScript pentru a valida datele introduse și, de asemenea, lipseau tipuri specifice de câmpuri de intrare pentru specificarea informațiilor de zi cu zi, cum ar fi datele, adresele E-mailși URL-uri.
Formularele HTML5 au rezolvat majoritatea acestor probleme comune cu atribute noi, oferind posibilitatea de a se schimba aspect elemente de formular folosind CSS3.
Orez. 1. Formulare Web îmbunătățite cu HTML5 Creați un formular HTML5
1. Element Baza oricărei forme este elementul.... Nu prevede introducerea datelor, deoarece este un container, ținând împreună toate controalele formularului - câmpuri. Atributele acestui element conțin informații care sunt comune tuturor câmpurilor de formular, astfel încât câmpurile care sunt combinate logic trebuie incluse într-un singur formular.
| accept-charset | Valoarea atributului este o listă de codificări de caractere, separate prin spații, care va fi utilizată pentru a trimite formularul, de ex. |
| acțiune | Atribut obligatoriu care specifică adresa URL a handler-ului de formular de pe serverul către care sunt trimise 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ă ce pagina este reîncărcată, elementele formularului vor prelua valorile implicite. În cazul în care toate lucrările se vor face din partea clientului Scripturi JavaScript, apoi pentru atribut de acțiune puteți specifica valoarea #. De asemenea, puteți aranja ca formularul completat de vizitator să vă fie trimis prin e-mail. Pentru a face acest lucru, trebuie să faceți următoarea intrare: |
| completare automată | |
| enctype | Folosit pentru a specifica tipul MIME de date trimise cu formularul, de exemplu, enctype="multipart/form-data" . Specificat numai în cazul method="post" . application/x-www-form-urlencoded este tipul de conținut implicit, ceea ce indică faptul că datele transmise reprezintă o listă de variabile de formular codificate în URL. Caracterele de spațiu (ASCII 32) vor fi codificate ca + și un caracter special, cum ar fi ! va fi codificat în hexazecimal 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 element individual forme. text/plain - indică faptul că se transmite text simplu (nu html). |
| metodă | Specifică modul în care sunt trimise datele din formular. Metoda get trimite date către server prin bara de adresa browser. La generarea unei cereri 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 adăugate la adresa serverului după semn? și sunt separate prin &. Toate caracterele speciale și literele non-latine sunt codificate în formatul %nn, spațiul este înlocuit cu +. Această metodă ar trebui folosită dacă nu treceți volume mari informație. Dacă ar trebui să trimiteți un fișier împreună cu formularul, această metodă nu va funcționa. Metoda post este folosită pentru a trimite cantități mari de date, precum și informații confidențiale si parole. Datele trimise prin această metodă nu sunt vizibile în antetul URL-ului deoarece sunt conținute în corpul mesajului. |
| Nume | Specifică numele formularului care va fi folosit pentru a accesa elementele formularului prin intermediul scripturilor, de exemplu name="opros" . |
| nuvalidate | Dezactivează validarea în butonul de trimitere a formularului. Atributul este utilizat fără a specifica o valoare |
| ţintă | Specifică fereastra către care vor fi trimise informațiile: _blank - fereastră nouă _self - același cadru _parent — cadru părinte (dacă există, dacă nu, atunci la cel curent) _fereastra de sus nivel superiorîn raport cu acest cadru. Dacă apelul nu vine de la un cadru copil, atunci la același cadru. |
Elementul ... este destinat grupării elementelor care sunt legate între ele, împărțind astfel forma în fragmente logice.
Fiecare grup de elemente poate fi numit folosind elementul care vine imediat după etichetă. Numele grupului apare în partea stângă în chenarul de sus. De exemplu, dacă elementul stochează informații de contact:
Informații de contact
Nume *
Orez. 2. Gruparea elementelor de formular folosind| dezactivat | Dacă atributul este prezent, atunci un grup de elemente de formular conexe situate în interiorul containerului sunt dezactivate pentru completare și editare. Folosit pentru a restricționa accesul la anumite câmpuri de formular care conțin date introduse anterior. Atributul este utilizat fără a specifica o valoare - . |
| formă | în același document. Indică una sau mai multe forme cărora le aparține acest grup de elemente. Pe acest moment Atributul nu este acceptat de niciun browser. |
| Nume | Definește numele care va fi folosit pentru a se referi la elemente din JavaScript sau pentru a se referi la datele formularului după ce formularul este completat și trimis. Este analog cu atributul id. |
Elementul creează majoritatea câmpurilor de formular. Atributele unui element diferă în funcție de tipul de câmp pentru care este folosit elementul.
Folosind stilurile CSS puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și să adăugați chenare, culoarea de fundal și imagine de fundal. Lățimea câmpului este specificată de proprietatea width.
| Accept | Determină tipul de fișier care poate fi trimis către server. Indicat doar pentru . Valori posibile: file_extension - permite descărcarea fișierelor cu extensia specificată, de exemplu, accept=".gif" , accept=".pdf" , accept=".doc" audio/* - permite descărcarea fișierelor audio video/* - permite descărcarea fișierelor video imagine/* - permite încărcarea imaginilor media_type - indică tipul media al fișierelor descărcate. |
| alt | Definește text alternativ pentru imagini, specificat numai pentru . |
| completare automată | Responsabil pentru reținerea valorilor introduse în câmpul de text și înlocuirea lor automată data viitoare când introduceți: pornit - înseamnă că câmpul nu este protejat și 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 de încărcare unul sau altul câmp de intrare are deja focus (a fost selectat), fiind gata să introduceți o valoare. |
| verificat | Atributul verifică dacă caseta de selectare implicită este bifată la încărcarea paginii pentru câmpuri precum type="checkbox" și type="radio" . |
| dezactivat | |
| formă | Valoarea atributului trebuie să fie egală cu atributul id al unui element din același document. Identifică unul sau mai multe formulare cărora le aparține acest câmp de formular. |
| formare | Specifică adresa URL a fișierului care va prelucra datele introduse în câmpurile la trimiterea formularului. Setați numai pentru câmpurile type="submit" și type="image" . Atributul î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 către server. Supliniază valoarea atributului enctype al formularului. Setați numai pentru câmpurile type="submit" și type="image" . Opțiuni: application/-x-www-form-urlencoded este valoarea implicită. Toate caracterele sunt codificate înainte de trimitere (spațiile sunt înlocuite cu caracterul +, caracterele speciale sunt convertite în valori ASCII HEX) multipart/form-data - caracterele nu sunt codificate text/plain - spațiile sunt înlocuite cu simbolul +, iar caracterele speciale nu sunt codificate. |
| formmetod | Atributul specifică metoda pe care browserul o va folosi pentru a trimite datele formularului către server. Setați numai pentru câmpurile type="submit" și type="image" . Supliniază valoarea atributului metodei formularului. Opțiuni: get este valoarea implicită. Datele din formular (perechea nume/valoare) sunt adăugate la adresa URL și trimise la server: URL?name=value&name=value datele post - formular sunt trimise ca o 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. Setați numai pentru câmpurile type="submit" și type="image" . Suprascrie valoarea atribut target forme. _parent – încarcă răspunsul în 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 de măsură. Setează înălțimea unui câmp de formular de tip type="image" , 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 un link către un element, care conține id-ul acestuia. 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 numerică permisă la o valoare maximă, valoarea atributului poate conține un număr întreg sau un număr 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 introduse în câmp. Valoarea implicită este de 524288 de caractere. |
| min | Vă permite să limitați intrarea numerică permisă la o valoare 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ă valoare de atribut. |
| Nume | Definește numele care va fi folosit pentru a accesa elementul, de exemplu în tabele stiluri css. Este analog cu atributul id. |
| model | Vă permite să determinați utilizarea expresie uzuala sintaxa datelor care trebuie lăsate să fie introduse într-un anumit câmp. De exemplu, pattern="(3)-(3)" - parantezele pătrate stabilesc intervalul caractere valide, în acest caz - orice literă mică, număr în acolade indică faptul că sunt necesare trei litere mici, urmate de o liniuță, apoi trei numere cuprinse între 0 și 9. |
| substituent | Conține textul care este afișat în câmpul de introducere înainte de a fi completat (cel mai adesea acesta este un sfat instrument). |
| numai citire | Nu permite utilizatorului să modifice valorile elementelor de formular, selectarea și copierea textului este încă disponibilă. Specificat fără valoare de atribut. |
| necesar | Afișează un mesaj care indică faptul 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ă valoare de atribut. |
| mărimea | Setează lățimea vizibilă a câmpului î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 imaginii folosită ca butonul de trimitere a formularului. Indicat doar pentru domeniu. |
| Etapa | Folosit pentru elemente care necesită intrare valori numerice, indică cantitatea de mărire sau scădere a valorilor în timpul ajustării intervalului (pas). |
| tip | buton - creează un buton. |
| casetă de selectare - transformă un câmp de introducere într-o casetă de selectare care poate fi bifată sau șters, de ex. eu am o mașină |
|
| culoare - generează palete de culori în browserele compatibile, permițând utilizatorilor să selecteze 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 o dată și o oră separate prin litere mari scrisoare engleză T conform modelului zz.mm.aaaa hh:mm. Ziua și ora de naștere: |
|
| e-mail - browsere care acceptă acest atribut, se va aștepta ca utilizatorul să introducă date care se potrivesc cu sintaxa adreselor de e-mail. E-mail: |
|
| fișier - vă permite să descărcați fișiere de pe computerul utilizatorului. Alege fișierul: |
|
| ascuns - Ascunde controlul, care nu este afișat de browser și împiedică utilizatorul să modifice valorile implicite. | |
| imagine - creează un buton, permițându-vă să inserați o imagine în loc de text pe buton. |
|
| luna - Permite utilizatorului să introducă numărul anului și al lunii folosind modelul aaaa-mm. |
|
| număr - destinat introducerii valorilor întregi. Atributele sale min , max și step specifică limitele superioare, inferioare și, respectiv, pasul dintre valori. Aceste atribute sunt presupuse pentru toate elementele care au indicatori numerici. Valorile lor implicite depind de tipul elementului. Vă rugăm să indicați cantitatea (de la 1 la 5): |
|
| parola - creează câmpuri de textîn formă, în timp ce caracterele introduse de utilizator sunt înlocuite cu asteriscuri, marcatori sau altele, instalat de browser icoane. Introdu parola: |
|
| radio - creează un comutator - un control sub forma unui cerc mic care poate fi pornit sau oprit. 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 de formular de datele introduse de utilizator. |
|
| căutare - denotă un câmp de căutare, în mod implicit câmpul de intrare are formă dreptunghiulară. Căutare: |
|
| trimite - creează un buton standard care este activat printr-un clic de mouse. Butonul colectează informații din formular și le trimite spre procesare. |
|
| text - Creează câmpuri de text într-un formular, generând un câmp de text cu o singură linie pentru introducerea textului. |
|
| timp - vă permite să introduceți ora în format de 24 de ore folosind modelul hh:mm. În browserele compatibile, apare ca un control numeric al câmpului de intrare cu o valoare editabilă cu mouse-ul și permite doar introducerea valorilor de timp. Specificați ora: |
|
| url—câmpul este destinat specificarii adreselor URL. Pagina principala: |
|
| săptămână - Instrumentul indicator corespunzător permite utilizatorului să selecteze o săptămână din an, după care va oferi introducerea datelor în format nn-aaaa. În funcție de an, numărul de săptămâni poate fi 52 sau 53. Specificați săptămâna: |
|
| valoare | Determină textul care apare pe un buton, într-un câmp sau în 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. |
Elementul ... este folosit în locul elementului când trebuie să creați câmpuri de text mari. Textul afișat ca valoare originală este plasat în interiorul etichetei. Dimensiunile câmpului sunt stabilite folosind atributele cols - dimensiuni orizontale, rânduri - dimensiuni verticale. Înălțimea câmpului poate fi setată folosind proprietatea înălțime. Toate dimensiunile sunt calculate pe baza mărimii unui caracter dintr-un font monospațiu.
| autofocus | Setează automat focalizarea pe câmpul de text inițial dorit. |
| cols | Setează lățimea în funcție de numărul de caractere. Dacă utilizatorul introduce mai mult text, apare o bară de defilare. |
| dezactivat | Dezactivează posibilitatea de a edita și copia conținutul câmpului. |
| formă | Valoarea atributului trebuie să fie egală cu valoarea atributului id al elementului din același document. Identifică unul sau mai multe formulare cărora le aparține acest câmp de text. |
| lungime maxima | Valoarea atributului specifică numărul maxim de caractere de introdus în câmp. |
| Nume | Specifică numele câmpului de text. |
| substituent | Definește un scurt text prompt care descrie valoarea de intrare așteptată. |
| numai citire | Dezactivează posibilitatea de a edita conținutul câmpului. |
| necesar | Afișează un mesaj care indică faptul că acest câmp este obligatoriu. |
| rânduri | Specifică un număr care indică câte linii trebuie afișate în zona de text. |
| înfășura | Stabilește dacă textul trebuie să păstreze întreruperile de rând atunci când este trimis formularul. Valoarea hard păstrează transportul, dar valoarea soft nu. Dacă se folosește hard, trebuie specificată valoarea atributului cols. |
Listele vă permit să aranjați un numar mare de punctează compact. Listele derulante sunt create folosind elementul .... Acestea vă permit să selectați una sau mai multe valori din setul propus. În mod implicit, o casetă listă își afișează primul element.
Pentru a adăuga elemente în listă, utilizați elementele ..., care se află în interior.
Pentru a organiza liste, utilizați elementul ..., care creează titluri în liste.
Pentru liste, puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și puteți adăuga chenare, culoare de fundal și imagine de fundal.
| autofocus | Setează focalizarea automată pe un element atunci când pagina se încarcă. |
| dezactivat | Dezactivează lista derulantă. |
| formă | Definește forma căreia îi aparține această listă. Valoarea atributului este identificatorul formularului. |
| multiplu | Vă permite să selectați unul sau mai multe elemente pentru a face acest lucru, atunci când selectați, trebuie să apăsați și să țineți apăsat Tasta Ctrl. |
| Nume | Definește un nume pentru lista verticală. Valoarea atributului conține un nume care reflectă subiectul listei. |
| necesar | Afișează un mesaj care indică faptul că utilizatorul trebuie să selecteze o valoare din lista verticală înainte de a trimite formularul. |
| mărimea | Setează numărul de elemente din listă care sunt vizibile simultan pe ecran. Dacă numărul de elemente din listă depășește numărul setat, apare o bară de defilare. Valoarea atributului este specificată ca un întreg pozitiv. |
Etichetele pentru elementele de formular sunt create folosind elementul .... Există două moduri de a grupa etichetele și câmpurile. Dacă câmpul se află în interiorul unui element, atunci atributul for nu trebuie să fie specificat.
Când ai zburat ultima dată într-un avion?
Pisică
7. ButoaneElementul ... creează butoane pe care se poate face clic. Spre deosebire de butoanele create de ( , , , ), puteți plasa conținut - text sau o imagine - în interiorul elementului.
Pentru afișare corectă element în diferite browsere trebuie să specificați atributul tip, de exemplu, .
Butoanele permit utilizatorilor să trimită date într-un formular, să șterge conținutul formularului sau să întreprindă alte acțiuni. Puteți crea chenare, puteți schimba fundalul și puteți alinia textul pe un buton.
| autofocus | Setează focalizarea pe buton atunci când pagina se încarcă. |
| dezactivat | Dezactivează butonul, făcându-l de neclic. |
| 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 de date din formular trimis atunci când se face clic pe butonul. Numai pentru tipul butonului = "submit" . Supliniază valoarea atributului de acțiune specificat pentru element. |
| formenctype | Setează tipul de codificare al datelor din formular înainte de a le trimite la server când se face clic pe butoane precum tip="trimitere". Supliniază valoarea atributului enctype specificat pentru element. Valori posibile: application/x-www-form-urlencoded este valoarea 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/plain - caracterele nu sunt codificate, iar spațiile sunt înlocuite cu simbolul +. |
| formmetod | Atributul specifică metoda pe care browserul o va folosi pentru a trimite formularul. Supliniază valoarea atributului metodei specificat pentru element. Specificat numai pentru butoanele de tipul tip="submit". Valori posibile: get - datele din formular (perechea nume/valoare) sunt adăugate la url și trimise la server. Această metodă are limitări în ceea ce privește 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 restricții de dimensiune. |
| formnovalidate | Atributul specifică faptul că datele formularului nu trebuie validate la trimitere. Specificat numai pentru butoanele de tipul tip="submit". |
| formtarget | Atributul specifică în ce fereastră se va afișa rezultatul după trimiterea formularului. Specificat numai pentru butoanele de tipul tip="submit". Supliniază valoarea atributului țintă specificat pentru element. _blank - încarcă răspunsul într-o fereastră/filă nouă _self - încarcă răspunsul în aceeași fereastră (implicit) _parent - încarcă răspunsul în cadrul părinte _top - încarcă răspunsul pe ecran complet framename - încarcă răspunsul într-un cadru cu numele specificat. |
| Nume | Setează 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 de buton. Valori posibile: buton - buton pe care se poate face clic resetare - buton de resetare, returnează valoarea inițială trimite - buton pentru trimiterea datelor formularului. |
| valoare | Setează valoarea implicită trimisă atunci când se face clic pe butonul. |
Casetele de selectare din formulare sunt specificate folosind constructul, iar un buton radio este specificat folosind .
Casetele de selectare, spre deosebire de butoanele radio, pot fi setate la mai multe într-un singur formular. Dacă atributul bifat este specificat pentru casete de selectare, atunci când pagina se încarcă, casetele de selectare din câmpurile de formular corespunzătoare vor fi deja selectate.
Elementul este utilizat la implementarea selecției folosind butoanele radio și casetele de selectare. Poți alege elementul dorit, doar făcând clic pe textul asociat acestuia. Pentru a face acest lucru, trebuie să îl plasați în interiorul elementului.
Noi tipuri de elemente
Unul dintre lucrurile ciudate despre formularele HTML este utilizarea unui singur element cu un nume vag pentru a crea o varietate de controale, de la casete de selectare la câmpuri de text și la butoane. Aspectul specific al controlului depinde de atributul tip al elementului.
Dacă browserul întâlnește un tip de element necunoscut, browserul web îl tratează ca pe un câmp de text normal. Aceasta înseamnă că următoarele trei elemente sunt tratate exact la fel de către toate browserele:
HTML5 profită de acest comportament. Și anume, mai multe tipuri noi au fost adăugate elementului, iar dacă vreun browser nu le acceptă, le va trata ca câmpuri de text obișnuite. De exemplu, pentru a introduce o adresă de e-mail, puteți crea un e-mail nou de tip câmp:
Dacă vizualizați o pagină cu acest cod într-un browser care nu acceptă tipul de element de e-mail (de exemplu, Internet Explorer), acest câmp va apărea ca un câmp text obișnuit. Dar browserele care acceptă Formulare HTML 5 puțin mai inteligent poate face următoarele:
Oferiți servicii de editare. De exemplu, un browser inteligent poate oferi o modalitate de a selecta o adresă de e-mail din carte de adreseși inserați-l în câmpul de adresă.
Împiedica posibile greșeli. De exemplu, este posibil ca browserul să nu accepte litere atunci când introduce un câmp precum un număr sau să nu accepte date nevalide sau chiar să oblige utilizatorul să selecteze datele dintr-un mini-calendar, ceea ce este mai ușor și mai sigur.
Efectuați verificarea. Browserele pot efectua verificări mai complexe după ce utilizatorul face clic pe un buton pentru a trimite date.
Specificația HTML5 nu oferă nicio îndrumare dezvoltatorilor de browsere cu privire la primul punct. Browserele sunt libere să controleze afișarea și editarea tipuri diferite date în orice mod semnificativ și browsere diferite poate adăuga diverse mici facilități.
Dar mai importantă sunt capacitatea de a verifica și elimina erorile. Cel puțin, un browser care acceptă formulare HTML5 ar trebui să împiedice trimiterea unui formular care conține date care încalcă regulile de tip de date. Prin urmare, dacă browserul nu poate preveni erorile direct în timpul introducerii (conform al doilea punct din lista de mai sus), trebuie să le verifice atunci când utilizatorul încearcă să trimită formularul (conform punctului al treilea).
Din păcate, nu toate browserele moderne îndeplinesc aceste cerințe. Unele recunosc noi tipuri de date și oferă unele capacități de editare, dar nu și validare. Multe browsere înțeleg un tip de date, dar nu altul. Browserele mobile sunt deosebit de problematice în acest sens - oferă unele facilități de editare, dar nu există capacități de verificare.
Tabelul de mai jos rezumă noile tipuri de date și nivelul de suport complet în browserele majore. Asistența completă înseamnă că, dacă există o încălcare a tipului de date, formularul nu va fi trimis.
| Tip de date | I.E. | Firefox | Crom | Safari | Operă | Safari iOS | Android |
| - | 4 | 10 | 5 | 10.6 | - | - | |
| url | - | 4 | 10 | 5 | 10.6 | - | - |
| căutare(fara verificare) | |||||||
| tel(fara verificare) | |||||||
| număr | - | - | 10 | 5 | - | - | - |
| gamă | - | - | 6 | 5 | 11 | - | - |
| datetime, data, luna, saptamana, ora | - | - | 10 | - | 11 | - | - |
| culoare | - | - | - | - | 11 | - | - |
Deși browserele mobile Safari pentru iOS și Android nu acceptă validarea, furnizarea de tastaturi specializate de către aceste browsere reprezintă o comoditate semnificativă, așa că merită să folosiți tipuri de date specializate în aplicațiile pentru aceste browsere web.
Adrese de emailTip date de e-mail utilizat pentru câmpurile destinate introducerii adreselor de e-mail. În general, o adresă de e-mail constă dintr-un șir de caractere (unele caractere nu sunt permise). O adresă validă trebuie să conțină un simbol @ și un punct, cu cel puțin un caracter între ele și cel puțin două caractere după punct:
Tipul de e-mail acceptă atributul multiplu, care vă permite să introduceți mai multe adrese în câmp. Dar aceste mai multe adrese arată în continuare ca o singură linie de text, separate doar prin virgule.
Nu uita asta valori goale sunt testate. A preveni câmp gol adresa, trebuie să inserați atributul necesar în elementul său.
URL-uriTipul URL este utilizat pentru câmpurile de introducere a adresei URL. Întrebarea a ceea ce constituie o adresă URL validă continuă să fie aprig dezbătută. Dar majoritatea browserelor folosesc un algoritm de verificare relativ lax. Adresa trebuie să conțină un prefix (care poate fi fie real, cum ar fi http://, fie fictiv, cum ar fi bonk//) și permite spații și majoritatea caractere speciale, cu excepția colonului.
Unele browsere oferă, de asemenea, sugestii posibile de adrese URL într-o listă derulantă, care sunt de obicei preluate din istoricul paginilor vizitate recent al browserului.
Câmpuri de căutareTipul de căutare este utilizat pentru câmpurile de căutare. Ele sunt de obicei destinate introducerii Cuvinte cheie, care sunt apoi folosite pentru a efectua un anumit tip de căutare. Aceasta poate fi o căutare pe întregul Internet (cum ar fi Google), o căutare pe o singură pagină sau o procedură specială de căutare care examinează un catalog de informații. În orice caz, câmpul de căutare arată și se comportă aproape exact ca un câmp de text obișnuit.
În unele browsere, cum ar fi Safari, câmpul de căutare arată ușor diferit și are colturi rotunjite. În plus, atunci când utilizatorul începe să tasteze în câmpul de căutare din browserul Safari sau Chrome, partea dreapta câmp, apare o pictogramă X mică, făcând clic pe care puteți șterge câmpul.
În afară de aceste diferențe minore, câmpul de căutare nu este altceva decât un câmp de text obișnuit. Principala diferență este semantica. Cu alte cuvinte, tastați căutarea datelor folosit pentru a clarifica numele câmpului pentru browsere și programe de sprijin pentru utilizatorii cu dizabilități. Aceștia pot direcționa vizitatorii către locația dorită de pe pagină sau pot oferi alte servicii, mai inteligente – poate în viitor.
Numere de telefonTipul de date tel este utilizat pentru a indica câmpurile de intrare numere de telefon, care poate fi prezentat într-o varietate de formate. Unii folosesc doar numere, alții folosesc spații, liniuțe, semne plus și paranteze. Această lipsă a unui format uniform poate fi motivul pentru care standardul HTML5 nu solicită browserelor să efectueze validarea numărului de telefon. În același timp, nu este clar de ce un câmp precum tel nu respinge cel puțin litere.
În prezent, singurul avantaj al utilizării unui domeniu precum tel este de a oferi servicii specializate tastatura virtuala pentru introducerea numerelor de telefon în browserele mobile, care conține numere, dar nu litere.
NumereleHTML5 definește două tipuri de date numerice. Tipul de număr este pentru numere obișnuite.
Acest tip de date are un potențial evident. Câmpurile de text obișnuite acceptă literalmente orice: cifre, litere, spații, semne de punctuație etc. Din acest motiv, una dintre cele mai frecvente sarcini de validare este să vă asigurați că o valoare este un număr în anumit interval. Dar când introduceți date într-un câmp precum numărul, browserul ignoră automat toate caracterele, cu excepția numerelor. Următorul este un exemplu de cod pentru a crea un câmp de acest tip:
Vârstă *
Desigur, există multe numere care nu se potrivesc fiecărui tip de date numerice. De exemplu, marcajul de mai sus permite o vârstă ca 43.000 sau -6 ani, ceea ce este oarecum incompatibil cu realitatea. Această problemă este rezolvată folosind atributele min și max. Următorul cod oferă un exemplu de limitare a vârstei la un interval rezonabil:
De obicei, câmpurile de numere acceptă numai numere întregi, iar fracții precum 30,5 nu sunt permise. (De fapt, unele browsere nici măcar nu vă vor permite să introduceți o zecimală.) Dar acest comportament poate fi modificat și folosind atributul step, care specifică pasul în care numărul este schimbat (în sus sau în jos). De exemplu, setând valoarea pasului la 0,1, puteți introduce valori precum 0,1, 0,2 0,3 etc. Dar încercați să trimiteți un formular cu o valoare de 0,15 și veți primi mesajul de eroare familiar care apare. Valoarea implicită a pasului este 1.
Atributul step afectează și funcționarea butoanelor de câmp cu un contor:
GlisoarePentru alții tip numeric HTML5 este interval . La fel ca tipul de număr, acest tip poate reprezenta valori întregi și fracționale. De asemenea, acceptă atributele min și max pentru a seta o gamă de valori. Următorul este un exemplu de cod pentru a crea un câmp de acest tip:
Vârstă *
Diferența constă în modul în care un câmp de interval își prezintă informațiile. În loc de contor, ca în cazul unui câmp numeric, browserele inteligente afișează un glisor:
Pentru a seta o valoare a tipului de interval, glisați pur și simplu glisorul în poziția dorită între valorile minime și maxime. Dar browserele care acceptă acest tip de câmp nu oferă informații despre feedback valoarea stabilită. Pentru a obține aceste informații, trebuie să adăugați o procedură JavaScript la marcaj care reacționează la modificările poziției glisorului (poate prin gestionarea evenimentului onChange) și apoi să afișeze această formație lângă câmp.
data si oraHTML5 definește mai multe tipuri de date legate de timp. Browserele care acceptă tipuri de date pot oferi un calendar derulant convenabil din care utilizatorul poate selecta data și/sau ora dorită. Acest lucru nu numai că elimină incertitudinea cu privire la formatul corect al datei, dar vă împiedică și să setați accidental (sau intenționat) o dată care nu există. Browserele inteligente pot face și mai multe, cum ar fi suport pentru integrarea cu un calendar personal.
Mai jos este un exemplu de utilizare a datelor:
Data nașterii *
Tabelul de mai jos prezintă cele șase noi formate HTML5 pentru date și ore, cu o scurtă descriere a acestora:
Browserele care acceptă tipuri de date pentru date și ore acceptă și atribute minime și maxime pentru acestea, ceea ce vă permite să setați date minime și maxime atâta timp cât utilizați formatul de dată corect. Acest lucru este demonstrat în exemplul de mai sus.
CuloareTipul de date de culoare este utilizat pentru câmpurile de culoare. Tipul de date de culoare este o caracteristică secundară interesantă, dacă este folosită rar, care permite unui vizitator al unei pagini web să selecteze o culoare dintr-o paletă derulantă, similar cu o paletă editor grafic:
Alegeți culoarea preferată Culoarea
Standardul HTML5 recunoaște mai multe atribute folosite pentru a controla browserul la completarea formularelor. Nu toate aceste atribute sunt acceptate de toate browserele. Cu toate acestea, este bine de experimentat:
atribut de verificare ortograficăUnele browsere încearcă să umple golurile în cunoștințele de ortografie ale utilizatorului prin verificarea ortografiei textului introdus. Problema evidentă a acestui serviciu este că nu tot textul este alcătuit din cuvinte reale, iar sublinierea roșie ondulată poate pune nervii utilizatorului foarte repede. Pentru a împiedica browserul să verifice ortografia textului dintr-un câmp, setați atributul de verificare ortografică la fals și atributul de verificare la adevărat.
În mod implicit, diferitele browsere acționează diferit când vine vorba de verificarea ortografică, dar setarea atributului de verificare a ortografiei are ca rezultat un comportament consistent.
Unele browsere încearcă să economisească timpul utilizatorului sugerând, la introducerea informațiilor într-un câmp, valorile care au fost introduse anterior în acest câmp. Acest comportament nu este întotdeauna de dorit - așa cum subliniază specificația HTML5, unele informații pot fi sensibile (de exemplu, coduri pentru lansarea rachetelor nucleare;) sau pot rămâne relevante doar pentru o perioadă scurtă de timp (de ex. parolă de unică folosință intrarea la sistem bancar autoservire). Pentru astfel de câmpuri, setați valoarea atributului de completare automată la off pentru a împiedica browserul să solicite opțiuni posibile completarea textului introdus în câmp. Și pentru a completa automat un anumit câmp, setați atributul de completare automată la activat.
Atributele de autocorectare și autocapitalizareAceste atribute sunt folosite pentru a controla capabilitățile corectare automatăși valorificarea unor browsere mobile și anume Versiuni Safari pentru iPad și iPhone
atribut multipluDezvoltatorii web au folosit atributul multiple cu elementul pentru a crea liste cu alegeri multiple din timpuri imemoriale. Dar acum pot folosi acest atribut cu anumite tipuri de elemente, inclusiv fișier (pentru încărcarea fișierelor) și e-mail. Într-un browser care acceptă acest atribut, utilizatorul poate selecta mai multe fișiere pentru a le încărca pe server simultan sau poate introduce mai multe adrese de e-mail într-un câmp.
Elementul (din engleză „input” ‒ „input”) este elementul principal al formei ( Etichetă HTML) și definește un câmp personalizat pentru introducerea informațiilor.
Câmpul de introducere acceptă alt fel, în funcție de valoarea atributului tip aplicat acestui element. Acestea pot fi o varietate de butoane, câmpuri de text, parolă sau nume de fișier, butoane radio, casete de selectare etc.
Deoarece eticheta este inline, nu trebuie să fie inclusă în formular (etichetă), dar dacă trimiteți date către server, atunci acest lucru trebuie făcut. Dar dacă accesați eticheta, de exemplu, folosind scripturi, atunci este suficient să o plasați în interiorul oricărui element care poate conține etichete inline.
Notă: o etichetă nu poate conține niciun conținut, poate conține doar atribute.
Sintaxă Etichetă de închidereNu este necesar.
Tipul atributelor Atributul principal care definește tipul elementului de intrare. Dacă atributul nu este specificat, valoarea implicită este „text” .Valori posibile:
- butonul – definește butonul activ cu o inscripție.
- casetă de selectare – Definește controalele casetei de selectare.
- culoare – generează o paletă de culori, permițând utilizatorilor să selecteze valorile de culoare în format hexazecimal.
- data – definește un câmp pentru introducerea unei date calendaristice (an, lună, zi).
- datetime – definește un câmp pentru introducerea datei și orei.
- datetime-local – Definește un control de dată și oră (an, lună, zi, oră, minute, secunde și fracțiuni de secundă (fără fus orar)).
- e-mail – definește un câmp pentru o adresă de e-mail.
- fișier – definește un control cu un buton Browse pentru selectarea și încărcarea fișierelor.
- ascuns – definește un câmp de introducere ascuns (nu este afișat pe pagina Web).
- imagine – definește o imagine ca buton pentru trimiterea datelor din formular către server. Împreună cu această valoare, trebuie să utilizați atributul src pentru a defini adresa imaginii și atributul alt pentru a defini textul alternativ. De asemenea, puteți seta atributele de lățime și înălțime pentru a specifica dimensiunea imaginii în pixeli.
- lună – vă permite să selectați o lună, după care va oferi introducerea datelor sub formă de an și lună (de exemplu: 2017-07).
- număr – definește un câmp pentru introducerea numerelor.
- parola – definește un câmp pentru introducerea unei parole (caractere mascate).
- radio – creează butoane radio care se exclud reciproc, dacă selectați un buton radio, toate celelalte devin inactive; Atributul bifat indică faptul că opțiunea este selectată implicit.
- interval – creează un glisor pentru introducerea numerelor din intervalul specificat. Dacă nu sunt specificate atributele corespunzătoare, atunci valorile implicite sunt:
- min = 1
- max = 100
- valoare = min + (max - min) / 2, sau min dacă max< min
- pas = 1
- resetare – creează un buton pentru a reseta datele formularului la starea inițială.
- căutare – definește un câmp de text pentru introducerea unui șir de căutare.
- trimite – Definește un buton „Trimite” pentru trimiterea datelor din formular către server.
- tel – definește un câmp pentru introducerea unui număr de telefon.
- text – Definește un câmp de text cu o linie (lățimea implicită este de 20 de caractere).
- oră – definește un câmp pentru introducerea orei în format de 24 de ore, de exemplu 17:30.
- url – definește un câmp pentru introducerea unei adrese URL.
- săptămână – vă permite să selectați o săptămână, după care va oferi introducerea datelor în format de an și săptămână (de exemplu: 2017-W15).
Nu toate browserele acceptă tipurile adăugate în HTML5.
Dacă browserul nu acceptă unul dintre noile tipuri, se va presupune că tipul este text .
Suporturi pentru articole
