1. Семантика
2. Якоря
3. входные
4. Кнопки
5. Который из?

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

Если все три элемента выглядят и ведут себя одинаково, имеет ли значение, какой из них вы используете? В этой статье я объясню разницу между якорями, входами и кнопками и покажу, когда использовать каждый из них.

Семантика

Вопрос о том, какой элемент использовать сводится к семантика , который использует разметку, которая отражает смысл содержимого. Использование семантического HTML делает ваш контент явным, что обеспечивает лучшую совместимость браузера, доступность и SEO.

Якоря

Якоря (элемент <a>) представляет гиперссылки. Что за гиперссылка? гиперссылка ресурс, на который человек может перейти или скачать в браузере. Если вы хотите, чтобы ваш пользователь мог перейти на новую страницу или загрузить файл, используйте привязку.

входные

вход (<input>) представляет поле данных. Атрибут type сообщает браузеру, какой тип данных контролирует ввод. Существует пять типов ввода, связанных с кнопками.

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

Кнопки

Кнопка <> элемент представляет собой кнопку! Кнопки выполняют те же действия, что и входы, упомянутые выше. Кнопки были введены в HTML в качестве альтернативы входным данным, которые намного легче стилизовать. В отличие от входных данных, метка кнопки определяется ее содержимым. Это означает, что вы можете вкладывать элементы внутри кнопки, такие как изображения, абзацы или заголовки. Кнопки также могут содержать псевдоэлементы :: before и :: after.

Как и вход, кнопка имеет атрибут типа. Этот атрибут может быть установлен для отправки, сброса или нажатия кнопки и делает то же самое, что и тип ввода. По умолчанию тип отправки. Если вы поместите кнопку в форму и не установите ее тип, при нажатии она отправит эту форму! Если вы не хотите такого поведения, установите тип на кнопку.

Отличная особенность входов и кнопок - они поддерживают атрибут disabled. Это позволяет легко включать и выключать их. К сожалению, якоря не имеют такой возможности.

Который из?

Так что вы должны использовать якорь, вход или кнопку? Когда вы переходите пользователя на страницу или ресурс, используйте привязку. В противном случае, оба входа и кнопки действительны. Лично я предпочитаю использовать входные данные для отправки и сброса форм и кнопок для пользовательского поведения, потому что я думаю, что это делает намерение более ясным. Тем не менее, элемент, который вы используете, полностью зависит от вас. Сходить с ума!