Modele pentru limbajul html 5. Atributele max și min

08.04.2019 OS

Și să includem următorul CSS pentru a evidenția intrările valide cu o bifă și intrările nevalide cu o cruce:

Div (marja-jos: 10px; poziție: relativ;) intrare (lățime: 100px;) intrare + span (padding-dreapta: 30px;) intrare: nevalid + span: după (poziție: absolut; conținut: "✖"; padding -stânga: 5px; culoare: # 8b0000;) intrare: valid + span: după (poziție: absolut; conținut: „✓"; umplutură-stânga: 5px; culoare: # 009000;)

Ieșirea arată astfel:

Validarea modelului

Dacă doriți să restricționați și mai mult numerele introduse, astfel încât acestea să se conformeze și unui anumit model, puteți utiliza atributul model, care ia ca valoare o expresie regulată cu care valorile introduse trebuie să se potrivească.

În acest exemplu, „vom folosi același CSS ca înainte, dar HTML-ul nostru este schimbat pentru a arăta astfel:

Introduceți un număr de telefon (sub forma xxx-xxx-xxxx):

Trimite

Div (marja-jos: 10px; poziție: relativ;) intrare (lățime: 100px;) intrare + span (padding-dreapta: 30px;) intrare: nevalid + span: după (poziție: absolut; conținut: "✖"; padding -stânga: 5px; culoare: # 8b0000;) intrare: valid + span: după (poziție: absolut; conținut: „✓"; umplutură-stânga: 5px; culoare: # 009000;)

Observați cum valoarea introdusă este raportată ca nevalidă, cu excepția cazului în care modelul xxx-xxx-xxxx este potrivit; de exemplu, 41-323-421 "nu va fi acceptat. Nici 800-MDN-ROCKS. Cu toate acestea, 865-555-6502 va fi acceptat. Acest model special este evident util doar pentru anumite locații - într-o aplicație reală dvs." d probabil că trebuie să varieze modelul utilizat în funcție de localitatea utilizatorului.

Exemple

În acest exemplu, vă prezentăm o interfață simplă cu un element care reprezintă un control care oferă un meniu de opțiuni „> element care permite utilizatorului să aleagă în ce țară „se află și un set de elemente care să le permită să introducă fiecare parte a numărului lor de telefon; nu există niciun motiv pentru care „nu poți avea mai multe intrări de tel.

Fiecare intrare are un atribut substituent pentru a arăta un indiciu utilizatorilor văzători despre ce să introducă în ea, un model pentru a impune un anumit număr de caractere pentru secțiunea dorită și un atribut aria-label pentru a conține un indiciu care trebuie citit cititorului de ecran utilizatorilor despre ce să intre în el.

Alege-ți țara: Regatul Unit S.U.A. Germania

Introduceți numărul dvs. de telefon:

Trimite

JavaScript este relativ simplu - conține un handler de evenimente onchange care, atunci când valoarea este modificată, actualizează modelul elementului, substituentul și eticheta aria pentru a se potrivi cu formatul numerelor de telefon din țara/teritoriul respectiv.

Var selectElem = document.querySelector ("selectare"); var inputElems = document.querySelectorAll ("input"); selectElem.onchange = funcția () (pentru (var i = 0; i< inputElems.length; i++) { inputElems[i].value = ""; } if(selectElem.value === "S.U.A.") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "Prefixul zonei"; inputElems.pattern = "{3}"; inputElems.placeholder = "Prima parte"; inputElems.pattern = "{3}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "A doua parte"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } else if(selectElem.value === "Regatul Unit") { inputElems.parentNode.style.display = "none"; inputElems.placeholder = "Prefixul zonei"; inputElems.pattern = "{3,6}"; inputElems.placeholder = "Numar local"; inputElems.pattern = "{4,8}"; inputElems.setAttribute("aria-label","Local number"); } else if(selectElem.value === "Germania") { inputElems.parentNode.style.display = "inline"; inputElems.placeholder = "Prefixul zonei"; inputElems.pattern = "{3,5}"; inputElems.placeholder = "Prima parte"; inputElems.pattern = "{2,4}"; inputElems.setAttribute("aria-label","First part of number"); inputElems.placeholder = "A doua parte"; inputElems.pattern = "{4}"; inputElems.setAttribute("aria-label","Second part of number"); } }

Exemplul arată astfel:

Aceasta este o idee interesantă, care arată o potențială soluție la problema de a face față numerelor de telefon internaționale. Desigur, ar trebui să extindeți exemplul pentru a oferi modelul corect pentru potențial fiecare țară, ceea ce ar fi mult de lucru și nu ar exista încă nicio garanție sigură că utilizatorii își vor introduce numerele corect.

Te face să te întrebi dacă merită să faci toate aceste probleme pe partea clientului, când ai putea doar să lași utilizatorul să-și introducă numărul în orice format vrea pe partea clientului și apoi să-l validezi și să-l igienizezi pe server. Dar această alegere este a ta.

Div (marja-jos: 10px; poziție: relativ;) intrare (lățime: 100px;) intrare + span (padding-dreapta: 30px;) intrare: invalid + span: după (poziție: absolut; conținut: "✖"; padding -stânga: 5px; culoare: # 8b0000;) intrare: valid + span: după (poziție: absolut; conținut: „✓"; umplutură-stânga: 5px; culoare: # 009000;)

Specificații

Specificație	stare	cometariu
Standard de viață HTML Definitia lui " „în specificația respectivă.	Operă	Safari	Vizualizare web Android	Chrome pentru Android	Edge mobil	Firefox pentru Android	Opera pentru Android	Safari pe iOS	Samsung Internet
tip = "tel"	Chrome Suport complet Da	Edge Suport complet Da	Firefox Suport complet Da	IE Suport complet 10 elementul este utilizat pentru a crea controale interactive pentru formularele bazate pe web pentru a accepta date de la utilizator; sunt disponibile o mare varietate de tipuri de date de intrare și widget-uri de control, în funcție de dispozitiv și agent de utilizator. ">

Această colecție de fragmente HTML5 utile vă poate ajuta să vă îmbunătățiți site-ul.

Completare automată în câmpurile de text

Folosind elementul de listă de date HTML5 puteți crea o casetă text de completare automată. Foarte confortabil!

Câmpuri de introducere a e-mail, url și tel

HTML5 introduce multe tipuri noi pentru câmpurile de intrare, inclusiv e-mail, url și tel. Îți permit să scrii mai mult frumos cod, faceți toată munca de validare a conținutului pentru dvs. și, de asemenea, forțați browserele mobile să afișeze o tastatură tactilă cu butoane speciale (cum ar fi @ and.com) atunci când completează aceste câmpuri.

Modele pentru potrivirea câmpurilor de formular cu expresia regulată

Anterior, trebuia să utilizați JavaScript pentru a valida conținutul de pe front-end. Acum, cu atributul model HTML5, puteți specifica pur și simplu expresia regex cu care ar trebui să se potrivească intrarea dvs.!

Meniu contextual personalizat

HTML5 vă permite să adăugați elemente la meniul contextual(acesta este același meniu care apare dacă faceți clic dreapta oriunde pe pagina dvs.).
La momentul scrierii acestui articol, elementul ContextMenu este compatibil doar cu Firefox, dar sperăm că alte browsere vor adăuga suport pentru acesta foarte curând.

Da, puteți face clic dreapta aici.

Videoclip HTML5, cu rezervă Flash.

Una dintre cele mai mari caracteristici noi din HTML5 este cu siguranță capacitatea sa de a reda videoclipuri fără a utiliza Flash. Dar pentru browserele mai vechi care nu sunt compatibile cu HTML5, trebuie să implementați un player Flash ca alternativă. V următorul exemplu arată cum să încorporați videoclipuri mp4 și ogv în HTML5, cu un player alternativ pentru browserele mai vechi.

Elemente ascunse în HTML5

HTML5 a introdus atributul ascuns care poate fi aplicat oricărui element. Efectul său este similar cu afișarea: nicio proprietate CSS.

Focalizare automată pentru câmpurile de text

Atributul de focalizare automată vă permite să setați focalizarea pe un anumit element la încărcarea paginii. Util pentru căutare, autentificare sau pagini de înregistrare, de exemplu.

Preîncărcare în HTML5

Jean-Baptiste Jung a scris despre preîncărcarea în HTML5. Pe scurt, aceasta este o modalitate ușoară de a notifica browser-ul despre ce resurse ar putea fi necesare în curând, astfel încât să le încarce în avans (de exemplu, imagini încărcate de ajax). Codul de mai jos implementează preîncărcarea imaginii.

Redați fișiere audio în HTML5

HTML5 poate reda videoclipuri și, desigur, poate reda și fișiere audio, cum ar fi formatul mp3. Codul de mai jos implementează un player audio minimalist, dar funcțional.

Cea mai comună etichetă folosită în formulare este ... Nu are etichetă finală. Toate informațiile pe care browserul trebuie să le proceseze sunt conținute direct în etichetă și este setat folosind diverse atribute. Semantică variază foarte mult în funcție de valoarea atributului său tip.

Atributele etichetei

type Atributul principal care specifică tipul elementului. Dacă atributul nu este specificat, atunci este implicit text.
Valori posibile:

Nu toate browserele acceptă tipurile adăugate în HTML5.
Dacă browserul nu acceptă niciunul dintre noile tipuri, atunci va presupune că acesta este un tip. Cum se organizează suportul pentru browsere mai vechi este descris folosind exemplul de dată.

Autocomplete = "off" Dezactivează completarea automată pentru a acestui domeniu... Foarte util pentru câmpurile de introducere pentru coduri unice, captchas etc. .setAttribute („completare automată”, „dezactivat”); focalizare automată Se concentrează automat pe încărcarea paginii. Valoarea poate fi setată în trei moduri: ... ... ... Un exemplu de emulare a proprietății de focalizare automată pentru browsere mai vechi... disabled Face elementul indisponibil. Elementele indisponibile nu sunt încărcate pe server. nume Numele câmpului. Fiecare câmp de intrare pe care îl creați trebuie să aibă propriul nume unic, altfel scriptul nu va determina câmpurile cărora le aparțin valorile primite. Desigur, numele câmpului de intrare trebuie să se potrivească cu numele descris pentru acesta în programul de procesare. value Valoarea implicită a câmpului sau eticheta de pe buton. dimensiune Mărimea câmpului de tip. maxlength Limitează numărul de caractere care pot fi introduse într-un câmp de tip. readonly = "readonly" sau "" Împiedică modificări ale articolului. obligatoriu Verifică automat dacă câmpul este completat.
Pentru a evidenția un câmp obligatoriu completat corect, puteți utiliza următoarea construcție de stil: min Valoarea minimă a unui număr dintr-un câmp de tip număr... max Valoarea maximă a unui număr dintr-un câmp de tip număr... pas Pasul de schimbare a numărului în câmpul tip număr... model Modelul câmpului de intrare. Verificarea corectitudinii introducerii datelor. Exemple de șabloane pentru modelul de introducere a formularelor HTML5... substituent Text indiciu în câmpul formular, care dispare automat când este primit câmpul de focalizare.
Un exemplu de setare a unui stil de indicație:

IE și Firefox (până la versiunea 18) substituent este considerată o pseudo-clasă, iar în altele este considerată un pseudo-element.

REZULTAT:

Listă O listă de opțiuni pe care le puteți selecta pe măsură ce introduceți în caseta de text.
Inițial, această listă este ascunsă și devine disponibilă atunci când câmpul primește focus sau când se tastează.

Tipuri de elemente INPUT

Butonul BUTON

Buton BUTON este destinat acelor cazuri în care trebuie să executați un script. Adică, un eveniment este atârnat pe buton OnСlick iar funcția dorită este apelată. Atribut valoare setează eticheta pe buton. Atribut onclick specifică un handler JavaScript care este apelat atunci când se face clic pe butonul. Atribut Nume servește pentru denumirea JavaScript a butonului (nu este transmisă serverului).

Exemplu

REZULTAT:

Buton de trimitere

Acest buton este pentru trimiterea unui formular. În majoritatea browserelor, pare aproape imposibil de distins de un buton. Ea în sine nu se transmite, ci servește doar pentru control.

Atribut onclick pentru buton TRIMITE practic nu este folosit, deoarece este mai bine să folosiți un handler de evenimente onsubmit specificat în etichetă

... La urma urmei, pentru a transfera datele introduse în formular, în cazul general, nu este deloc necesar să faceți clic pe butonul. TRIMITE... Puteți apăsa doar tasta de pe tastatură INTRODUCEîn timp ce în orice câmp de introducere a textului. Acest lucru va transfera date.

Exemplu

REZULTAT:

Atribut valoare oferă anumite avantaje atunci când utilizați mai mult de un buton de transfer de date. În acest caz, pe baza valorii variabilei primite, scriptul va putea determina cum să proceseze în continuare informațiile primite.

Exemplu

REZULTAT:

Atribut formnovalidate poate fi aplicat pentru a preveni validarea valorilor formularului.

Exemplu

REZULTAT:

Butonul de resetare

Acesta este butonul pentru ștergerea formularului. Când sunt apăsate, toate elementele modificate revin la valorile implicite. Este rar folosit. Cu toate acestea, în unele cazuri poate fi destul de util.

Sfat: aveți grijă la alegerea etichetei de pe buton RESET... Ceva de genul „Șterge”, „Începe de la capăt”, „Șterge intrarea”, etc. va fi destul de vizual (și, cel mai important, intuitiv intuitiv chiar și pentru un ceainic). În general, este necesar ca utilizatorul să nu aibă nicio umbră de îndoială cu privire la scopul acestei chei.

Exemplu

câmp de introducere TEXT

Câmpul de introducere a textului este cea mai utilizată casetă de text în formulare. Mai mult decât atât, poate fi considerat pe bună dreptate elementul principal și cel mai important al formelor. Acest tip este folosit de etichetă în mod implicit, îl puteți lăsa necompletat pentru a afișa o casetă de text. Cu toate acestea, dacă devine necesar să setați stilul pentru selector intrare, apoi atributul tip = "text" nu poate fi omis.
Numele câmpului specificat de atribut Nume, este întotdeauna necesar, deoarece pe baza acestui parametru, browserul transmite scriptului perechea nume = valoare.

Exemplu

REZULTAT:

Textul „Ivanov” este plasat în câmpul creat ca valoare inițială. Dacă utilizatorul nu face modificări sau dă clic pe buton, valoarea Ivanov va fi trimisă scriptului ca numele de familie al utilizatorului.

Câmpul de introducere a numărului NUMBER

Câmpul este pentru introducerea numerelor. Partea fracțională la introducere poate fi separată fie printr-un punct (2.5) fie prin virgulă (2.5). Dacă utilizatorul introduce litere, formularul nu va fi trimis la server.

Exemplu

REZULTAT:

Puteți seta valoarea minimă, maximă a câmpului și pasul de modificare a numărului. Valoarea pasului poate fi fie pozitivă, fie negativă, dar trebuie să fie mai mare decât 0. Dacă numărul introdus în câmp nu îndeplinește limitele specificate, atunci trimiterea către server nu va avea loc.

Exemplu

REZULTAT:

Pentru a specifica orice pas, utilizați pas = „oricare”.

Exemplu

REZULTAT:

Camp număr este afișat diferit: unele browsere afișează întotdeauna săgeți, altele doar când câmpul trece peste sau primește focalizare.

Parola

HIDDEN câmp ascuns

Acesta este un tip special (ascuns). casetă de text... Dacă un script gestionează mai multe formulare diferite, atunci în câmpul ascuns al fiecărui formular, puteți specifica un identificator care vă va permite să determinați cu ce formular aveți de-a face.

Exemplu

... Alte elemente de formă ....

... Alte elemente de formă...

Browserul nu afișează câmpul ascuns, deși poate fi detectat prin plasarea browserului în modul de vizualizare HTML și analizarea textului paginii Web. Câmpurile ascunse sunt utile atunci când trebuie să furnizați informații care sunt necesare pentru un script, dar nu doriți ca utilizatorul să poată face modificări la acesta. Rețineți, totuși, că un utilizator experimentat vă poate salva formularul într-un fișier, îl poate edita și apoi trimite acel formular la server într-o formă modificată. Prin urmare, nu vă bazați pe câmpuri ascunse pentru a crea un fel de protecție.

Exemplu

Scriptul va primi o variabilă numită FormVersion, căruia i se va atribui valoarea 1.2. Aceste informații pot fi folosite pentru a determina modul în care sunt procesate restul informațiilor primite din formular. Dacă utilizatorul modifică această valoare, programul script se poate comporta în moduri neașteptate.

Câmp de introducere a adresei de e-mail

Pentru a introduce mai multe adrese, puteți adăuga atributul multiplu, iar virgulă (,) este folosită pentru a separa adresele

Exemplu

E-mail: