HTML — наріжний камінь веброзробки. Однак багато початківців ознайомлюються з ним лише поверхнево і переходять до CSS, JS тощо, втрачаючи весь потенціал HTML.
Тож розгляньмо перелік атрибутів HTML, про які багато новачків не знають, але які можуть бути вкрай корисними.
1. Multiple
Атрибут multiple дає змогу користувачеві вводити кілька значень у <input>. Це булевий атрибут, котрий застосовується для інпутів вибору файлів або електронної пошти та елемента <select>.
У інпутах електронної пошти значенням може бути список електронних адрес, які розділені комами. Але це діє, лише якщо є вказаний атрибут multiple. Також будь-які пробіли видаляються з кожної адреси у списку.
У інпутах вибору файлів користувач може вибирати кілька файлів і без вказання атрибуту multiple (утримуючи Shift або Ctrl).
<input type="file" multiple>
2. Accept
Елемент <input> має атрибут accept, який вказує дозволені для вивантаження типи файлів.
Ви повинні передати йому рядок, в якому буде перелік унікальних специфікаторів для типів файлів; вони мають розділятися комами.
Також можете цим атрибутом дозволити лише формат аудіо, зображення або відео.
<input type="file" accept=".png, .jpg">
3. Contenteditable
contenteditable — глобальний атрибут (загальний для всіх HTML-елементів), який вказує, чи можуть користувачі редагувати вміст HTML. Однак будьте обережні зі змінами, щоб користувачі могли змінювати лише видимий вміст, але не вміст DOM.
<div contenteditable="true">Я веселий div, зміни мене ;)</div>
4. Spellcheck
Spellcheck — це ще один глобальний атрибут, він корисний для перевірки орфографії та граматики у HTML-елементах, наприклад, у полях введення та інших редагованих елементах.
Зауважте: зазвичай нередаговані елементи не перевіряються на орфографічні помилки, навіть якщо атрибут перевірки правопису має значення true і браузер підтримує перевірку правопису.
<p contenteditable="true" spellcheck="true">
Дякую за перевірку паравопису :)</p>
5. Translate
translate повідомляє браузеру, чи слід перекладати вміст.
Наприклад, з ним ви можете не дати Перекладачу Google автоматично перекласти назву вашої компанії або бренду.
<footer><p translate="no">LearnPine</p></footer>
6. Poster
Використовуйте атрибут poster, щоб вказати зображення, яке показуватиметься під час завантаження відео або поки користувач не натисне кнопку відтворення.
Якщо зображення не вказано, не буде показуватися нічого, поки перший кадр не стане доступним, тоді цей кадр і стане постером.
<video controls
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>
7. Download
Використовуйте атрибут download у поєднанні з теґом <a>, щоб браузери завантажували URL-адресу, а не переходили до неї. Так користувачам буде запропоновано зберегти її локальним файлом.
Також ви можете вказати назву файлу.
<a href="index.html" download="fileName">Завантаж мене :)</a>
Ще немає коментарів