Розніца паміж анкерамі Уваходы і кнопкі

Адна з рэчаў, якія я люблю пра CSS, як лёгка гэта зрабіць адзін элемент выглядаць іншы. У прыведзеным вышэй прыкладзе, першы элемент ўяўляе сабой якар, другая кнопка і трэці ўваход. Я перавызначаць паводзіны пстрычкі усіх тры так яны робяць тое ж самае.

Калі ўсе тры элемента выглядаюць і паводзяць сябе так жа, гэта важна, які вы выкарыстоўваеце? У гэтым артыкуле я растлумачу розніцу паміж якарамі, ўваходамі і кнопкамі, і я пакажу вам, калі выкарыстоўваць кожны з іх.

семантыка

Пытанне пра тое, які элемент выкарыстоўваць зводзіцца да семантыка , Які выкарыстоўвае разметку , якая адлюстроўвае сэнс зместу. Выкарыстанне семантычнага HTML робіць ваша ўтрыманне яўнага, што дае вам лепшую сумяшчальнасць браўзэра, даступнасць і SEO.

якара

якара (Элемент <a>) уяўляе сабой гіперспасылка. Што такое гіперспасылка? гіперспасылка з'яўляецца рэсурсам чалавек можа перамяшчацца або спампаваць у браўзэры. Калі вы хочаце, каб дазволіць карыстачу перайсці на новую старонку або спампаваць файл, а затым выкарыстоўваць якар.

ўваходныя

уваход (<Уваход>) уяўляе сабой поле дадзеных. Атрыбут тыпу паказвае браўзэру, які тып дадзеных элементаў кіравання ўводу. Ёсць пяць тыпаў ўводу, звязаныя з кнопкамі.

• <Уваходны тып = "Адправіць»>: Гэта самы распаўсюджаны ўваход кнопкі. Гэта кнопка, якая пры націску адпраўляе форму.
• <Уваходны тып = "Малюнак»>: Падобна <ўваходных тып = «Submit»>, гэты ўваход ўяўляе форму. Тым не менш, ён таксама прымае атрыбут Src і адлюстроўваецца ў выглядзе малюнка.
• <Уваходны тып = "Файл»>: Гэты элемент кіравання выкарыстоўваецца для загрузкі файлаў і адлюстроўваецца ў выглядзе пазнакі і кнопкі. Там няма добрага спосабу кроса-браўзэра для ўваходу файлаў стылю, так што вы звычайна будзеце ўсталёўваць яго адлюстраванне схаваных і выкарыстоўваць другую кнопку, каб выклікаць яго.
• <Тып уваходнага = «Скід»>: Гэта кнопка, якая скідае форму.
• <Уваходны тып = "кнопка»>: Гэта кнопка з паводзінамі па змаўчанні. Вы можаце выкарыстоўваць для яго дадаць нестандартнае паводзіны ў форме з выкарыстаннем JavaScript.

кнопкі

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

Як уваход, кнопка мае атрыбут тыпу. Гэты атрыбут можа быць усталяваны прадставіць, скід або кнопку, і робіць тое ж самае, як тып бакоў зыходнага. Па змаўчанні, тып ўявіць. Калі змясціць кнопку ў форме і не ўсталяваць яго тып, калі ён пстрыкнуў будзе прадставіць гэтую форму! Калі вы не жадаеце гэтага, усталюйце тып на кнопку.

Адна вытанчаная асаблівасць уваходаў і кнопак яны падтрымліваюць адключаны атрыбут. Гэта дазваляе лёгка ператварыць іх ўключэння і выключэнні. На жаль, якара не маюць такой магчымасці.

Каторы?

Такім чынам, вы павінны выкарыстоўваць якар, уваход або кнопку? Калі вы навігацыі карыстальніка на старонку ці рэсурс, выкарыстоўваць якар. У адваротным выпадку, абодва ўваходу і кнопкі з'яўляюцца сапраўднымі. Асабіста я аддаю перавагу выкарыстоўваць ўваходы для падачы і скіду формы і кнопак для карыстацкага паводзін, таму што я думаю, што гэта робіць мэта больш ясным. Тым не менш, элемент, які вы выкарыстоўваеце, цалкам залежыць ад вас. Кранты!