7 корисних атрибутів HTML, про які ви могли не знати

2 хв. читання

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>
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація