Різниця між якорями, входами та кнопками

1. Семантика
2. Якорі
3. Входи
4. Кнопки
5. Який?

Одна з речей, яку я люблю про CSS, - наскільки легко зробити один елемент схожим на інший. У наведеному вище прикладі перший елемент є якорем, другий - кнопкою, а третій - входом. Я змінив поведінку клацання всіх трьох, щоб вони зробили те ж саме.

Якщо всі три елементи виглядають і поводяться однаково, чи має значення який ви використовуєте? У цій статті я поясню різницю між якорями, входами та кнопками, і я покажу вам, коли потрібно використовувати кожну з них.

Семантика

Питання про те, який елемент використовувати, зводиться до семантика , яка використовує розмітку, що відображає значення змісту. Використання семантичного HTML робить ваш вміст явним, що дає кращу сумісність, доступність та SEO.

Якорі

Якорі (елемент <a>) являють собою гіперпосилання. Що таке гіперпосилання? A гіперпосилання є ресурсом, до якого людина може перейти або завантажити у веб-переглядачі. Якщо ви хочете дозволити користувачеві перейти на нову сторінку або завантажити файл, скористайтеся якорем.

Входи

An введення (<input>) являє собою поле даних. Атрибут type повідомляє браузеру, який тип даних керує входом. Існує п'ять типів вхідних даних, пов'язаних з кнопками.

• <input type = "submit">: Це найбільш поширений ввід кнопки. Це кнопка, яка, натиснувши, подає форму.
• <input type = "image">: Як <input type = "submit"> цей вхід подає форму. Однак він також приймає атрибут src і відображається як зображення.
• <input type = "file">: Цей елемент керування використовується для завантаження файлів і відображається як ярлик і кнопка. Немає хорошого крос-браузерного способу стилю вводу файлів, так що ви зазвичай виставляєте його дисплей на прихований і використовуйте другу кнопку, щоб викликати його.
• <input type = "reset">: Це кнопка, яка скидає форму.
• <input type = "button">: Це кнопка без поведінки за умовчанням. Ви можете використовувати для нього додавання нестандартної поведінки до форми за допомогою JavaScript.

Кнопки

The <button> елемент являє собою кнопку! Кнопки роблять те ж саме, що і вхідні дані, згадані вище. Кнопки були введені в HTML в якості альтернативи входам, які набагато простіше в стилі. На відміну від входів, мітка кнопки визначається її вмістом. Це означає, що ви можете вкладати елементи в кнопку, наприклад, зображення, абзаци або заголовки. Кнопки також можуть містити :: до і :: після псевдоелементів.

Як і вхід, кнопка має атрибут типу. Цей атрибут може бути налаштований на передачу, скидання або кнопку і робить те ж саме, що і тип введення. За умовчанням цей тип подається. Якщо ви помістите кнопку у форму і не встановите її тип, коли вона буде натиснута, вона подасть цю форму! Якщо вам не потрібна така поведінка, встановіть кнопку типу.

Одна з особливостей входів і кнопок - це підтримка атрибута disabled. Це полегшує їх включення та вимикання. На жаль, якорі не мають такої можливості.

Який?

Так що ви повинні використовувати якір, вхід або кнопку? Під час навігації користувачем на сторінку або ресурс використовуйте прив'язку. В іншому випадку діють обидва входи та кнопки. Особисто я вважаю за краще використовувати вхідні дані для подання та скидання форм і кнопок для поведінки користувача, тому що, на мою думку, ця ідея зрозуміла. Однак елемент, який ви використовуєте, повністю залежить від вас. Перейдіть гайки!