Elemente HTML5 pentru formulare și date

Cuprins
HTML5 încorporează elemente noi pentru a facilita crearea câmpurilor de date care, în multe cazuri, trebuiau programate cu javascript sau adăugarea unei biblioteci externe într-un limbaj care să permită extinderea capacităților elementelor xhtml și html4.
Mulți programatori continuă să lucreze în mod tradițional, deoarece este acceptat de majoritatea browserelor, ultimele îmbunătățiri fiind acceptate doar de versiunile mai noi.
HTML5 oferă un set de atribute noi pentru atributul de tip al elementului de intrare, adică majoritatea elementelor unui formular, cum ar fi casetele de text.
Unele dintre aceste atribute html bine cunoscute sunt:
Tipul de introducere = text - Casetă text
tip de intrare = parolă - Câmp de parolă care ascunde parola cu asteriscuri.
Tipul de introducere = trimite - Buton pentru trimiterea formularelor
ÎNREGISTRARE ATRIBUȚIE TIP NUMĂR
Elementul care conține atributul type number, permite nu numai să se determine că valoarea introdusă este numerică, ci și să o restrângă între maxim și minim, putem vedea în imagine cum are și validare fără a fi nevoie să programăm nimic

Codul sursă pentru exemplul de utilizare a acestui atribut este după cum urmează
 Număr tip

Număr tip

Numărul pasajului (1-40):
TIP DE DATA ATRIBUT (DATE)
Atributul de tip dată este utilizat pentru câmpurile în care este necesar să conțină o dată. În funcție de browser și de suportul pe care îl oferă, controlul calendarului va apărea pentru a putea selecta o dată.

ATRIBUT DE TIP DE CULOARE
Atributul de tip culoare este utilizat pentru câmpurile în care este necesar să conțină o culoare. În funcție de browser și de suportul pe care îl oferă, controlul de tip colorpicker va apărea pentru a putea selecta o culoare sau a scrie culoarea în hexazecimal. Selectorul va apărea ca o fereastră pop-up când se face clic pe culoare.

Tipul de culoare

Selectați o culoare:

ATRIBUT DE TIP E-MAIL
Atributul de tip e-mail este utilizat pentru câmpurile în care este necesar să conțineți un e-mail. În funcție de browser și de suportul pe care îl oferă, acesta va valida faptul că textul introdus are formatul unui e-mail, în caz contrar va apărea un mesaj de eroare, acest lucru va facilita validarea unui formular fără programare.

Tipul de e-mail

Introduceți adresa de email:

ATRIBUT TIP URL
Atributul de tip url este utilizat pentru câmpurile în care este necesar să conțină un domeniu, o adresă URL. În funcție de browser și de suportul pe care îl oferă, acesta va valida faptul că textul introdus are formatul unui domeniu, dar va apărea un mesaj de eroare, acest lucru va facilita validarea unui formular fără programare. Nu este necesar să conțină http sau www, în acest caz, dacă îl solicităm, va trebui să îl validăm prin programare.

Tipul adresei URL

Introduceți adresa de email:

ATRIBUTE ȘI PROPRIETĂȚI PENTRU HTML5
1. Atribut de completare automată
Când scriem într-un câmp al formularului, constatăm că, în general, browserul ne va oferi opțiunea de a completa automat ceea ce scriem în acel moment cu text cu care am scris deja înainte, acest lucru poate da probleme de securitate deoarece, de exemplu, dacă scriem mai multe e-mailuri deoarece computerul a fost utilizat de un alt utilizator, am putea scrie pentru a vedea informațiile pe care le-a introdus un alt utilizator. În exemplu, dezactivăm completarea automată în e-mail, dar nu și în celelalte câmpuri. Poate fi dezactivat și din browser, dar mulți utilizatori nu știu că există opțiunea sau cum să dezactiveze completarea automată.

Atribut de completare automată

Nume:
E-mail:
Vedem că atunci când introduceți cuvântul Completare automată și trimiteți atunci când accesați același formular ulterior și apăsați doar litera A, în acest caz sugerează deja cuvântul pe care l-am scris anterior.

2. Atribut de focalizare automată
Acest atribut este utilizat pentru a indica în ce intrare a unui formular ar trebui poziționat cursorul atunci când pagina web este încărcată, dacă nu este prezentă, va începe cu prima pe care o găsește. Acest lucru poate fi, de asemenea, programat cu jQuery pentru a se concentra pe diferite controale, după cum este necesar.

3. Atributul formularului
Acest atribut este foarte util pentru gestionarea elementelor în afara unui formular, indiferent de locul în care este situat în structura web.

Atribut formular

Produs:
Descriere:

Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și tipografie.

Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și tipografie.

Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și tipografie.

Stoc:
Putem vedea în codul sursă HTML că am creat un formular pentru a introduce datele unui produs, apoi un text explicativ și, în cele din urmă, punem un câmp de text pentru stoc în afara formularului, dar îl raportăm la acest formular prin ID-ul său de identificare = "FormA" în câmpul de text stoc vom pune că îl raportăm la formularul formular = "formA", în acest fel la trimiterea formularului vor fi trimise și toate elementele aferente.
4. Atributul FormAction
Acest atribut este foarte util pentru a trimite același formular către pagini diferite, ceva care anterior trebuia să fie programat în javascript și să trimită parametrii tuturor elementelor formularului pentru a-l putea transmite, în unele cazuri a devenit foarte greoi, mai ales dacă existau forme multiple care depindeau una de alta.
Luăm exemplul cazului anterior cu un buton trimitem formularul la pagina record.php și cu celălalt la stoc.php

Atribut formular

Produs:
Descriere:

Lorem Ipsum este pur și simplu un text fals al industriei tipografice și tipografice.

Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și tipografie.

Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și tipografie.

Stoc: Atribut imagine cu trimitere Dacă dorim să utilizăm o imagine ca buton de trimitere pentru a trimite un formular, singurul mod de a face acest lucru a fost să punem o imagine sau să folosim foi de stil CSS și apoi să facem funcționalitatea cu javascript.

Atribut tip imagine

Produs:
Descriere:

5. Lista și atributul Datalist
Acest atribut vă permite să definiți o listă într-un element și apoi să o aplicați unui element de intrare, astfel încât să efectueze o căutare pe măsură ce tastăm.

Atribut tip și listă de date

Vedem că atunci când scriem o singură literă în acest caz f, se afișează o listă cu posibilitățile găsite, acest lucru este foarte util, deoarece realizează un filtru al datelor pe care le conține datalistul și poate fi, de asemenea, reutilizat în alte controale sau elemente.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

Vei ajuta la dezvoltarea site-ului, partajarea pagina cu prietenii

wave wave wave wave wave