Różnica między kotwicami, wejściami i przyciskami

1. Semantyka
2. Kotwice
3. Wejścia
4. guziki
5. Który?

Jedną z rzeczy, które kocham w CSS, jest to, jak łatwo można sprawić, by jeden element wyglądał jak inny. W powyższym przykładzie pierwszy element jest kotwicą, drugi jest przyciskiem, a trzeci jest wejściem. Przesłoniłem zachowanie kliknięcia wszystkich trzech, więc robią to samo.

Jeśli wszystkie trzy elementy wyglądają i zachowują się tak samo, czy ma to znaczenie, z którego korzystasz? W tym artykule wyjaśnię różnicę między kotwicami, wejściami i przyciskami, a pokażę ci, kiedy używać każdego z nich.

Semantyka

Pytanie, którego elementu użyć sprowadza się do semantyka , który używa znaczników odzwierciedlających znaczenie treści. Korzystanie z semantycznego kodu HTML sprawia, że ​​treść jest jawna, co zapewnia lepszą kompatybilność przeglądarki, dostępność i SEO.

Kotwice

Kotwice (element <a>) reprezentuje hiperłącza. Co to jest hiperłącze? ZA hiperłącze to zasób, do którego osoba może przejść lub pobrać w przeglądarce. Jeśli chcesz zezwolić użytkownikowi na przejście do nowej strony lub pobranie pliku, użyj kotwicy.

Wejścia

Na wkład (<wejście>) reprezentuje pole danych. Atrybut type informuje przeglądarkę, jakiego rodzaju dane kontrolki wejściowe. Istnieje pięć typów wejść związanych z przyciskami.

• <input type = "submit">: Jest to najbardziej popularne wejście przycisku. Jest to przycisk, który po kliknięciu przesyła formularz.
• <input type = "image">: Podobnie jak <input type = "submit"> to wejście przesyła formularz. Jednak pobiera również atrybut src i jest wyświetlany jako obraz.
• <input type = "file">: Ta kontrolka służy do przesyłania plików i jest wyświetlana jako etykieta i przycisk. Nie ma dobrego sposobu na wprowadzanie plików za pomocą różnych przeglądarek, więc zazwyczaj ustawiasz jego wyświetlacz na ukryty i używasz drugiego przycisku, aby go uruchomić.
• <input type = "reset">: Jest to przycisk, który resetuje formularz.
• <input type = "button">: jest to przycisk bez zachowania domyślnego. Możesz użyć do dodania niestandardowego zachowania do formularza za pomocą JavaScript.

guziki

The <przycisk> element reprezentuje przycisk! Przyciski robią to samo, co wejścia wymienione powyżej. Przyciski zostały wprowadzone do HTML jako alternatywa dla wejść, które są znacznie łatwiejsze do stylizacji. W przeciwieństwie do danych wejściowych etykieta przycisku jest określana na podstawie jego zawartości. Oznacza to, że możesz zagnieżdżać elementy w przycisku, takie jak obrazy, akapity lub nagłówki. Przyciski mogą również zawierać pseudoelementy :: before i :: after.

Podobnie jak wejście, przycisk ma atrybut typu. Ten atrybut można ustawić na przesyłanie, resetowanie lub przycisk i robi to samo, co typ wejścia. Domyślnie typ jest przesyłany. Jeśli umieścisz przycisk w formularzu i nie ustawisz jego typu, po jego kliknięciu prześle ten formularz! Jeśli nie chcesz tego zachowania, ustaw typ na przycisk.

Jedną fajną cechą wejść i przycisków jest to, że obsługują wyłączony atrybut. Ułatwia to włączanie i wyłączanie. Niestety, kotwice nie mają takiej możliwości.

Który?

Czy więc powinieneś użyć kotwicy, wejścia lub przycisku? Podczas nawigacji użytkownika do strony lub zasobu użyj kotwicy. W przeciwnym razie oba wejścia i przyciski są ważne. Osobiście wolę używać danych wejściowych do przesyłania i resetowania formularzy i przycisków do niestandardowych zachowań, ponieważ uważam, że czyni to intencję jaśniejszym. Jednak element, którego używasz, zależy wyłącznie od ciebie. Idź idź!