Elementele în HTML posedă atribute; acestea sunt valori suplimentare care configurează elementele sau ajustează comportamentul lor în diferite moduri pentru a corespunde criteriilor dorite de utilizatori.
Lista de atribute
| Nume atribut | Elemente | Descriere |
|---|---|---|
| accept | <form>, <input> |
Listă de tipuri acceptate de server, de obicei un tip de fișier. |
| accept-charset | <form> |
Lista seturilor de caractere acceptate. |
| accesskey | Atribut global | Definește o scurtătură de tastatură pentru a activa sau a oferi focalizare elementului. |
| action | <form> |
Identificatorul uniform de resursă (URI) a unui program care procesează informația trimisă prin intermediul formularului. |
| align | <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> |
Specifică alinierea pe orizontală a elementului. |
| alt | Text alternativ în caz că o imagine nu poate fi afișată. | |
| async | <script> |
Indică că script-ul trebuie executat asincron. |
| autocomplete | <form>, <input> |
Indică dacă controalele în formular pot avea în mod implicit valorile lor completate automat de către browser. |
| autofocus | <button>, <input>, <keygen>, <select>, <textarea> |
Elementul trebuie automat focalizat după încărcarea paginii. |
| autoplay | <audio>, <video> |
Redarea audio sau video trebuie să înceapă cât mai curând posibil. |
| bgcolor | <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> |
Culoarea de fundal a elementului. Notă: Acesta este un atribut învechit. Înlocuiți-l cu proprietatea CSS |
| border | <img>, <object>, <table> |
Grosimea bordurii. Notă: Acesta este un atribut învechit. Înlocuiți-l cu proprietatea CSS |
| buffered | <audio>, <video> |
Conține diapazonul de timp a conținutului media deja tamponat. |
| challenge | <keygen> |
Un șir de caractere care este trimis împreună cu cheia publică. |
| charset | <meta>, <script> |
Declară codificarea caracterelor paginii sau a script-ului. |
| checked | <command>, <input> |
Indică dacă elementul trebuie bifat odată ce pagina s-a încărcat. |
| cite | <blockquote>, <del>, <ins>, <q> |
Conține un identificator uniform de resursă (URI) care indică spre sursa citatului sau modificării. |
| class | Atribut global | Deseori utilizat în CSS pentru stilizarea elementelor cu proprietăți comune. |
| code | <applet> |
Specifică localizatorul uniform de resursă (URL) al fișierului clasei applet-ului care trebuie încărcat și executat. |
| codebase | <applet> |
Acest atribut oferă localizatorul uniform de resursă (URL) absolut sau relativ al directorului unde fișierele .class ale applet-urilor referite de atributul code sunt stocate. |
| color | <basefont>, <font>, <hr> |
Acest atribut setează culoarea textului utilizând fie numele culorii, fie codul ei hexazecimal #RRGGBB. Notă: Acesta este un atribut învechit. Înlocuiți-l cu proprietatea CSS |
| cols | <textarea> |
Definește numărul coloanelor într-o zonă de text (textarea). |
| colspan | <td>, <th> |
Definește numărul coloanelor pe care o celulă trebuie să le cuprindă. |
| content | <meta> |
Valoare asociată cu http-equiv sau name în dependență de context. |
| contenteditable | Atribut global | Indică dacă conținutul elementului este editabil. |
| contextmenu | Atribut global | Definește ID-ul elementului <menu> care va servi drept meniu contextual pentru element. |
| controls | <audio>, <video> |
Indică dacă browserul trebuie să afișeze controalele de redare utilizatorului. |
| coords | <area> |
Un set de valori care specifică coordonatele regiunii selectabile. |
|
data data-custom |
Specifică localizatorul uniform de resursă (URL) a resursei. permite atașarea unui atribut personalizat la elementele html. |
|
| datetime | <del>, <ins>, <time> |
Indică data și ora asociate cu elementul dat. |
| default | <track> |
Indică că pista trebuie activată doar dacă preferințele utilizatorului nu indică ceva diferit. |
| defer | <script> |
Indică că script-ul trebuie executat după ce pagina a fost parsată. |
| dir | Atribut global | Definește direcția textului. Valorile permise sunt ltr (stânga spre dreapta) sau rtl (dreapta spre stânga). |
| dirname | <input>, <textarea> |
Definește și trimite numele câmpului care conține text direcția căruia este diferită de a celorlalte elemente. |
| disabled | <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> |
Indică dacă utilizatorul poate interacționa cu elementul. |
| download | <a>, <area> |
Indică faptul că hiperlinkul urmează să fie folosit pentru descărcarea unei resurse. |
| draggable | Atribut global | Definește dacă elementul poate fi tras. |
| dropzone | Atribut global | Indică că elementul acceptă ca să fie tras conținut pe el. |
| enctype | <form> |
Definește tipul conținutului datelor formularului când method este POST. |
| for | <label>, <output> |
Descrie elementele cărora le aparține acesta. |
| form | <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> |
Indică formularul căruia îi aparține elementul. |
| headers | <td>, <th> |
ID-urile elementelor <th> la care se referă elementul dat. |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
Notă: În unele cazuri, cum ar fi <div>, acesta este un atribut învechit. În aceste cazuri trebuie utilizată proprietatea height. În alte cazuri, cum ar fi <canvas>, înălțimea trebuie specificată utilizând acest atribut. |
| hidden | Atribut global | Indică relevanța unui element. |
| high | <meter> |
Indică hotarul de jos a limitei de sus. |
| href | <a>, <area>, <base>, <link> |
Localizatorul uniform de resursă (URL) a unei resurse legate. |
| hreflang | <a>, <area>, <link> |
Specifică limba resursei legate. |
| http-equiv | <meta> |
Specifică antete HTTP. |
| icon | <command> |
Specifică o imagine care reprezintă comanda. |
| id | Atribut global | Deseori utilizat cu CSS pentru stilizarea unui element specific. Valorile acestui atribut trebuie să fie unice în cadrul unei pagini. |
| ismap | <img> |
Indică că imaginea este o parte a unei hărți de imagine server-side. |
| itemprop | Atribut global | Indică că elementul conținător păstrează valoarea proprietății specificate. |
| keytype | <keygen> |
Specifică tipul cheii generate. |
| kind | <track> |
Specifică tipul pistei de text. |
| label | <track> |
Specifică un titlu lizibil pentru utilizator a pistei de text. |
| lang | Atribut global | Definește limba utilizată în element. |
| language | <script> |
Definește limbajul script-ului utilizat în element. |
| list | <input> |
Identifică o listă de opțiuni predefinite pentru a fi sugerate utilizatorului. |
| loop | <audio>, <bgsound>, <marquee>, <video> |
Indică dacă conținutul media trebuie să fie redat de la început odată ce s-a sfârșit redarea. |
| low | <meter> |
Indică hotarul de sus a limitei de jos. |
| manifest | <html> |
Specifică adresa URL a manifestării memoriei cache a documentului. |
| max | <input>, <meter>, <progress> |
Indică valoarea maximă admisibilă. |
| maxlength | <input>, <textarea> |
Definește numărul maximal de caractere permis în element. |
| media | <a>, <area>, <link>, <source>, <style> |
Specifică o sugestie a conținutului media pentru care resursa legată a fost proiectată. |
| method | <form> |
Definește care metodă HTTP să fie folosită la trimiterea datelor prin intermediul formularului. Poate fi GET (implicit) sau POST. |
| min | <input>, <meter> |
Indică valoarea minimă admisibilă. |
| multiple | <input>, <select> |
Indică dacă valori multiple pot fi introduse într-un câmp de tipurile email sau file. |
| name | <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> |
Numele elementului. Se folosește de către server pentru identificarea câmpurilor la venirea datelor trimise prin formular. |
| novalidate | <form> |
Indică că formularul nu trebuie validat când se trimite. |
| open | <details> |
Indică dacă detaliile vor fi afișate la încărcarea paginii. |
| optimum | <meter> |
Indică valoarea numerică optimală. |
| pattern | <input> |
Definește o expresie regulată după care va fi validată valoarea elementului. |
| ping | <a>, <area> |
Oferă adresele URL a resurselor care sunt interesate în a fi notificate dacă utilizatorul accesează această legătură. |
| placeholder | <input>, <textarea> |
Furnizează o sugestie utilizatorului despre ce poate fi introdus într-un câmp. |
| poster | <video> |
O adresă URL care indică spre un poster care va fi afișat până când utilizatorul nu pornește redarea. |
| preload | <audio>, <video> |
Indică dacă întreaga resursă, unele părți ale ei sau nimic să fie pre-încărcate. |
| pubdate | <time> |
Indică dacă această dată și oră este data celui mai apropiat element strămoș <article>. |
| radiogroup | <command> |
Specifică numele grupului de comenzi, cu valoarea radio a atributului type, care vor fi comutate când comanda însăși este comutată. Acest atribut trebuie omis numai dacă valoarea atributului type nu este radio. |
| readonly | <input>, <textarea> |
Indică dacă elementul poate fi editat. |
| rel | <a>, <area>, <link> |
Specifică relația obiectului țintă cu obiectul legat. |
| required | <input>, <select>, <textarea> |
Indică dacă elementul este necesar de completat, sau nu. |
| reversed | <ol> |
Indică dacă lista trebuie să fie afișată într-o ordine descrescătoare, în loc de crescătoare. |
| rows | <textarea> |
Definește numărul de rânduri într-o regiune de text. |
| rowspan | <td>, <th> |
Definește numărul de rânduri pe care o celulă trebuie să le cuprindă. |
| sandbox | <iframe> |
Dacă acest atribut este specificat ca un șir de caractere gol, el activează restricții adiționale asupra conținutului care poate apărea în cadru. În caz că primește valori predefinite se pot specifica restricțiile aplicate. |
| spellcheck | Atribut global | Indică dacă verificarea ortografiei este permisă pentru elementul dat. |
| scope | <th> |
Definește celulele la care se referă elementul <th> dat. |
| scoped | <style> |
Dacă acest atribut este prezent atunci stilurile se referă numai la elementul părinte, altfel la întreg documentul. |
| seamless | <iframe> |
Indică că browserul trebuie să interpreteze cadrul într-un mod în care el pare a fi o parte a documentului conținător. |
| selected | <option> |
Definește o valoare care va fi selectată la încărcarea paginii. |
| shape | <a>, <area> |
Definește o regiune selectabilă pentru legăturile hipertext sursă asociate cu o figură pentru a crea o hartă imagine. |
| size | <input>, <select> |
Definește lățimea elementului (în pixeli). Dacă atributul type a elementului este text sau password, atunci este numărul caracterelor. |
| sizes | <link> |
Definește dimensiunile icoanelor pentru conținutul media vizual în resursă. |
| span | <col>, <colgroup> |
Conține un număr întreg pozitiv care indică numărul coloanelor consecutive pe care elementul <col> le cuprinde. |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> |
Localizatorul uniform de resursă (URL) a conținutului inserabil. |
| srcdoc | <iframe> |
Conținutul paginii care contextul inserabil urmează să-l conțină. |
| srclang | <track> |
Definește limba datelor pistei. |
| start | <ol> |
Definește primul număr dacă este diferit de 1. |
| step | <input> |
Definește valoare de incrementare și/sau decrementare în caz că type este number sau date-time. |
| style | Atribut global | Definește stilurile CSS care vor rescrie stilurile setate anterior. |
| summary | <table> |
Definește un text alternativ în caz că browserul nu este în stare să afișeze tabelul. |
| tabindex | Atribut global | Rescrie ordinea de tabulare implicită stabilită de browser și folosește una specifică în loc. |
| target | <a>, <area>, <base>, <form> |
Specifică unde va fi afișată resursa spre care țintește legătura. |
| title | Atribut global | Textul afișat ca sugestie la plasarea cursorului pe element. |
| type | <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> |
Definește tipul elementului. |
| usemap | <img>, <input>, <object> |
Adresa URL parțială (începând cu "#") a unei hărți imagine asociată cu elementul dat. |
| value | <button>, <option>, <input>, <li>, <meter>, <progress>, <param> |
Definește valoarea implicită care va fi afișată în element la încărcarea paginii. |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
Notă: În unele cazuri, cum ar fi <div>, acesta este un atribut învechit. În aceste cazuri trebuie utilizată proprietatea width. În alte cazuri, cum ar fi <canvas>, lățimea trebuie specificată utilizând acest atribut. |
| wrap | <textarea> |
Indică dacă textul trebuie trecut din rând nou. |
Atribute de conținut versus IDL
În HTML, majoritatea atributelor se prezintă în două ipostaze: atribute de conținut și atribute IDL.
Atributul de conținut este atributul setat în conținut (codul HTML) și care poate fi setat sau obținut prin element.setAttribute() sau element.getAttribute(). Atributul de conținut este mereu un șir de caractere chiar și în cazurile când valoarea așteptată este un număr întreg. De exemplu, pentru a seta maxlength egală cu 42 pentru elementul <input> utilizând atributul de conținut, trebuie apelată funcția setAttribute("maxlength", "42") asupra acelui element.
Atributul IDL este de asemenea cunoscut ca proprietate JavaScript. Acestea sunt atributele care pot fi citite sau setate utilizând proprietățile JavaScript, cum ar fi element.foo. Atributul IDL mereu va utiliza (și poate va transforma) atributul de conținut care stă la bază pentru a returna o valoare când este obținut și va salva ceva în atributul de conținut când este setat. Cu alte cuvinte, atributele IDL, în esență, reflectă atributele de conținut.
În majoritatea cazurilor, atributele IDL vor returna valorile lor așa cum ele sunt într-adevăr utilizate. De exemplu, valoarea implicită a type pentru elementul <input> este "text", deci, dacă este setat input.type="foobar", elementul <input> va fi de tipul "text" (în aparență și comportament) dar atributul de conținut type va avea valoarea "foobar". Totuși, atributul IDL type va returna șirul de caractere "text".
Atributele IDL nu sunt mereu șiruri de caractere; de exemplu, input.maxlength este un număr (un întreg lung cu semn). Când se utilizează atributele IDL, valorile se pot citi sau seta de tipul dorit, astfel input.maxlength va returna întotdeauna un număr și la setare va solicita un număr. Dacă se transmite un tip diferit, el este automat convertit într-un număr conform regulilor standard JavaScript pentru conversia tipurilor.
Atributele IDL pot reflecta alte tipuri, cum ar fi întreg lung fără semn, adrese URL, valori booleene, etc. Din păcate, nu există reguli clare iar modul în care atributele IDL se comportă în conjuncție cu atributele de conținut corespunzătoare depinde de atribut. În majoritatea cazurilor, ele vor urma regulile prevăzute în specificație, dar uneori nu o vor face. Specificațiile HTML încercă să facă acest lucru cât mai comod pentru dezvoltator, dar din diverse motive (în mare parte istorice), unele atribute se comportă ciudat ( de exemplu: select.size) și este nevoie de apelat la specificație pentru a înțelege cum exact ele se comportă.