Noile tipuri de casete input in HTML5
HTML5 adauga mai multe tipuri de casute input pentru formular (datetime, datetime-local, date, month, week, time, number, range, email, url, search, si color), care sunt prezentate mai jos:type="date" - Creaza o caseta de control pentru specificarea datei (an, luna, zi), precum un calendar. Valoarea initiala (adaugata in atributul "value") trebuie sa fie furnizata in format data ISO.
<input type="date" name="set_date" value="2011-10-15" />
type="datetime" - Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO date/time, si e trimisa ca fiind in fusul orar UTC.
<input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />
type="datetime-local" - Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO date/time, la fel ca "datetime", dar presupunand ca timpul este cel din fusul orar local.
<input type="datetime-local" name="dtl" value="2011-06-14T01:26:32:00">
type="month" - Creaza o caseta input in care se poate specifica anul si luna.
<input type="month" value="2012-09" name="mnt" />
type="week" - o caseta input pentru anul si numarul unei anumite saptamani din an (AN-Wnr , nr e numarul saptamanii).
<input type="week" name="weeks" value="2011-W34" />
type="time" - creaza o casuta de formular pentru ora (ora, minute, secunde).
<input type="time" name="currenttime" value="18:12:00" />
type="tel" - o caseta input pentru numar de telefon.
<input type="tel" name="hometel" value="123-888-2012" />
type="url" - e folosit pentru campuri de formular care trebuie sa contina doar adresa URL. Valoarea din acest input e automat validata cand datele din formular sunt trimise (daca nu are un format URL valid, returneaza un mesaj de eroare).
<input type="url" name="site" size="25" value="https://marplo.net" />
type="number" - creaza casete de formular care sa contina doar numere. Se poate restrictiona numerele acceptate, cu atributele "min", "max" si "step".
<input type="number" name="points" min="5" max="80" />
type="range" - Creeaza o zona cu un cursor de control care indica o valoare dintr-o serie de numere. Numerele acceptate incep de la valoarea specificata in atributul "min" (0 default), pana la numarul specificat in atributul "max" (100 default).
<input type="range" name="val" min="1" max="10" />
type="email" - e folosit pentru campuri de formular care trebuie sa contina doar adresa de e-mail. Valoarea din acest input e automat validata cand datele din formular sunt trimise.
<input type="email" name="email" />
type="search" - Creaza un camp de text special folosit pentru cautare (de ex. cautare in site, cu un script).
<input type="search" name="srch" size="25" value="Cautare" />
type="color" - Creaza un camp de formular special pentru selectarea unei culori.
<input type="color" name="get_color" />
Atribute noi pentru <form> adaugate in HTML5
- autocomplete="on | off" - Permite browser-ului sa completeze automat datele in formular (on), sau de fiecare data utilizatorul trebuie sa introduca el insusi datele (off).
- Functioneaza cu <form>, si urmatoarele tipuri <input>: text, search, url, tel, email, password, date-pickers, range, color.<form action="script.php" method="post" autocomplete="on" id="idf"> Name:<input type="text" name="fname" /> <input type="submit" value="Send" /> </form>
- novalidate - (novalidate="novalidate" in XHTML) - Seteaza ca formularul, sau campul input unde e adaugat, sa nu valideze automat datele cand sunt trimise.
- Se poate adauga in <form> si in urmatoarele casete <input>: text, search, url, tel, email, password, date-pickers, range, color.<form action="script.php" id="idf" novalidate="novalidate"> E-mail: <input type="email" name="email" /> <input type="submit" value="Send"/> </form>
Atribute noi pentru input
autofocus - (autofocus="autofocus" in XHTML) - specifica faptul ca un camp de formular sa primeasca automat focus cand pagina e afisata. Functioneaza in toate casetele <input>.Name: <input type="text" name="name1" autofocus="autofocus" />
form="form_id" - Asociaza campul input cu formularul care are id="form_id". Cu aceasta metoda, caseta de text nu trebuie adaugata special intr-un element form. Functioneaza in toate tipurile <input>.
<form action="script.php" method="post" id="idf"> Name:<input type="text" name="fname" /> <input type="submit" value="Send" /> </form> E-mail: <input type="email" name="email" form="idf" />
formaction="url" - Rescrie valoarea atributului "action" din <form>, trimitand datele la adresa specificata la "url".
formenctype="content_type" - Rescrie valoarea atributului "enctype" din <form>.
formmethod="get | post | put | delete" - Rescrie valoarea atributului "method" din <form>. Valorile "put" si "delete" sunt noi in HTML5.
formnovalidate - (formnovalidate="formnovalidate" in XHTML) - Rescrie valoarea atributului "novalidate" din <form>.
formtarget="target" - Rescrie valoarea atributului "target" din formular.
- Aceste atribute de recriere sunt folosite doar in buton submit (type "submit" sau "image").
<form action="script.php" method="post" id="idf"> E-mail: <input type="email" name="email" /><br /> <input type="submit" value="Trimite" /><br /> <input type="submit" formaction="script_2.php" value="Trimite la script_2" /><br /> <input type="submit" formnovalidate="formnovalidate" value="Trimite fara validare" /> </form>
height="pixels" - Specifica inaltimea butonului imagine, cand type="image".
width="pixels" - Specifica lungimea butonului imagine, cand type="image".
- Aceste atribute sunt folosite doar in butoane cu type="image":
<input type="image" src="img_submit.gif" width="80" height="23" />
list="id_datalist" - Indica faptul ca exista o list predefinita de optiuni pentru utilizator, care sunt furnizate de un element datalist. Valoarea atributului list ("id_datalist") este ID-ul adaugat in <datalist>.
- Poate fi utilizat cu urmatoarele tipuri de <input>: text, search, url, tel, email, datepickers, number, range, color.
Website: <input type="url" list="sites" name="link" /> <datalist id="sites"> <option label="CoursesWeb" value="http://www.coursesweb.net" /> <option label="MarPlo" value="https://marplo.net" /> <option label="W3Schools" value="http://www.w3schools.com" /> </datalist>
max="number" - specifica valoarea maxima pentru numere, aceasta trebuie sa fie mai mare (sau egala) decat valoarea adaugata in atributul "min".
min="number" - specifica o valoarea minima pentru numere.
step="any/number" - specifica intervalul de numere care poate fi folosit (daca step="3", numerele acceptate sunt: -3,0,3,6, etc).
- Atributele "min", "max", si "step" pot fi utilizate in urmatoarele casete <input> types: date-pickers, number, range.
Urmatorul cod defineste o caseta care accepta numere de la 1 la 10, cu step 3 (numere ce pot fi adaugate: 3, 6 sau 9):
<input type="number" name="num" min="1" max="10" step="3" />
multiple - (multiple="multiple" in XHTML) - Indica faptul ca utilizatorul poate specifica mai mult de o valoare.
- Poate fi utilizat in urmatoarele casete <input>: email, file.
<input type="file" name="img" multiple="multiple" />
pattern="regexp" - specifica o expresie regulata folosita la validarea datelor din caseta input. Puteti adauga un atribut "title" care sa indice pe scurt formatul datelor ce trebuie adaugate.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email, password.
Codul urmator defineste un camp text in care pot fi adaugate maxim 5 caractere (doar litere si numere):
<input type="text" name="pass" pattern="[A-z0-9]{5}" title="Cinci caractere, litere si numere" />
placeholder="text" - Furnizeaza un mic indiciu, sau exemplu care sa ajute utilizatorul sa adauge datele corecte (pentru o descriere mai lunga, se foloseste atributul "title").
Indiciul e afisat in caseta input cand e goala, si dispare cand cursorul e in acel camp.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email, password.
<input type="search" name="src" placeholder="Search MarPlo" />
required - (required="required" in XHTML) - indica faptul ca respectivul camp input trebuie sa fie completat inainte de a trimite datele.
- Poate fi adaugat in urmatoarele casete <input>: text, search, url, tel, email, password, date-pickers, number, checkbox, radio, file.
<input type="text" name="name1" required="required" />
Alte elemente de formular adaugate in HTML5
<datalist> ... </datalist> tag
Elementul datalist trebuie sa contina un "id" si tag-uri <option> ... </option>.Creaza un meniu cu optiuni (adaugate in elementul "option"), oferind o functie de "auto-completare" in timp ce utilizatorul tasteaza in caseta input care are un atribut "list" ce face referire la "id-ul" din datalist.
Tag-ul <option> trebuie sa contina atributul "value".
Exemplu:
Website: <input type="url" list="sites" name="link" /> <datalist id="sites"> <option label="CoursesWeb" value="http://www.coursesweb.net" /> <option label="MarPlo" value="https://marplo.net" /> <option label="W3Schools" value="http://www.w3schools.com" /> </datalist>
<keygen /> tag
Elementul keygen e folosit pentru a genera doua chei (una privata, si cealalta publica) care ofera un mod mai sigur de autentificare a utilizatorului.Cheia privata este salvata pe calculatorul client, iar cheia publica e trimisa la server.
Suportul navigatoarelor web pentru acest element nu e inca destul de bun pentru a fi utilizat ca un standard de securitate.
Exemplu:
<form action="script.php" id="idf" method="post"> Utilizator: <input type="text" name="user" /> Encriptare: <keygen name="security" /> <input type="submit" value="Submit" /> </form>
<output> </output> tag
E folosit pentru a afisa rezultatul unei operatiuni de calcul, cel mai probabil rezultatul returnat de un script.Total: <output name="total" onformchange="calc()">0</output>- Aici, "calc()" poate fi o functie dintr-un script JavaScript.
<<-HTML5 - Tag-uri Noi -- HTM5 canvas->>