HTML5, Element de intrare - Partea 2

Deja în prima parte a acestui tutorial am definit atributele cu care putem lucra, am văzut că avem unele noi pentru HTML5 și altele care nu sunt, totuși, atunci când vine vorba de construirea câmpurilor solide care ne ajută în procesele esențiale ale site-ului, atunci când combinația acestora și utilizarea corectă a fiecăruia ne vor ajuta să colectăm cele mai bune date.
Setarea dimensiunii unui câmp
După cum am văzut, avem două atribute care afectează direct dimensiunea unui câmp, acestea sunt mărimea Da lungime maxima, una reglează amplitudinea vizuală a câmpului, iar cealaltă cantitatea de text pe care câmpul o poate primi efectiv.
Să vedem un exemplu folosind ambele atribute:

 Exemplu
Yam:

Oraș:
Fructe:
Trimiteți votul 

În acest exemplu vedem cum este specificat primul câmp a lungime maximaNumai cu aceasta îi spunem browserului că poate accepta doar 10 caractere, totuși poate atribui lățimea implicită, în al doilea câmp specificăm mărimea Cu ceea ce îi spunem cât de larg ar trebui să fie, totuși nu limităm introducerea textului și în a treia aplicăm ambele condiții, să vedem cum funcționează în browser.

Utilizarea valorii și a substituentului
După ce am văzut diferența dintre aceste două câmpuri, în acest exemplu vom demonstra în mod eficient cum să le aplicăm unui formular, să vedem cum să le folosim în următorul cod.

 Exemplu
Yam:
Oraș:
Fructe:
Trimiteți votul 

După cum putem vedea în primele două câmpuri, substituentul indică un ajutor pentru ceea ce trebuie să introducă utilizatorul, această valoare pe care o conține substituentul nu este valoarea câmpului de intrare, așa că, dacă trimitem aceste câmpuri, acestea vor ajunge goale, în schimb al treilea câmp Are ceva deja plasat în atributul valoare, asta dacă ar fi trecut la trimiterea la formularul menționat.
Să vedem cum ne-ar arăta browserul asta

Creați câmpuri numai în citire
Uneori trebuie să lucrăm cu câmpuri de numai citire, fie pentru că valoarea nu trebuie modificată de utilizator, fie este doar informativă. De asemenea, se poate întâmpla ca acesta să fie rezultatul unei filtrări anterioare de către utilizator și numai această valoare poate fi văzută, pentru aceasta avem două opțiuni care, deși par aceleași, sunt total diferite.
Văzusem deja atributul numai în citire și știm că este astfel încât câmpul să nu poată fi modificat, avem și atributul dezactivat, face aceeași funcție ca și numai în citire, totuși atunci când faci Trimite toate câmpurile dezactivat nu sunt trimise, deci parcă nu există în formă.
Să vedem cele de mai sus explicate cu un exemplu practic.

 Exemplu
Yam:
Oraș:
Fructe:
Trimiteți votul 

Putem vedea că primul câmp este dezactivat și al doilea în readonlyly, când dezactivat este afișat în browser apare cu o culoare gri, de obicei asociată cu neactivarea, în timp ce readonly este văzut ca un câmp normal, deși dacă încercăm pentru a scrie oricui, nimeni nu ne va permite să introducem text.
Să vedem cum este exemplul:

Cu aceasta finalizăm această a doua parte a tutorialului, acum putem să ne îmbunătățim formularele folosind validări de bază ale dimensiunii și cantității de text și, de asemenea, controlând ceea ce utilizatorul poate modifica sau nu, pe lângă faptul că putem arăta ajutor în câmpuri astfel încât el să aibă o idee că ar trebui sau nu să intri.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv