Jak tworzyć przyciski w HTML

Przyciski w HTML są kluczowymi elementami interfejsu użytkownika, które umożliwiają wykonywanie różnorodnych akcji, takich jak wysyłanie formularzy, nawigacja po stronie czy wykonywanie skryptów. W HTML przyciski są tworzone za pomocą elementu <button> lub <input> z odpowiednim atrybutem type. Poniżej omówimy różne rodzaje przycisków, przykłady ich użycia oraz atrybuty, które mogą posiadać.

Rodzaje przycisków w HTML

• <button> - Element do tworzenia przycisków tekstowych, ikon lub bardziej złożonych przycisków, które mogą zawierać inne elementy HTML.
• <input type="button"> - Przycisk, który można powiązać z akcją JavaScript. Nie ma domyślnego działania.
• <input type="submit"> - Przycisk wysyłający formularz na serwer.
• <input type="reset"> - Przycisk resetujący wszystkie pola formularza do ich wartości domyślnych.
• <input type="checkbox"> - Przycisk wyboru wielokrotnego, który pozwala użytkownikowi zaznaczyć lub odznaczyć jedną lub więcej opcji.
• <input type="radio"> - Przycisk opcji jednokrotnego wyboru, pozwalający użytkownikowi wybrać jedną opcję z grupy.

Przyciski mogą być tworzone zarówno za pomocą elementu <button>, jak i <input>. Oba sposoby mają swoje zastosowania, a wybór zależy od potrzeb projektowych.

<input type="button" value="Kliknij mnie">
<input type="submit" value="Wyślij formularz">
<input type="reset" value="Resetuj formularz">

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Atrybuty przycisków

• type - Określa typ przycisku:
  • button - Przycisk bez domyślnej akcji.
  • submit - Przycisk wysyłający formularz.
  • reset - Przycisk resetujący formularz.
  • checkbox - Pole wyboru.
  • radio - Przycisk opcji jednokrotnego wyboru.
• value - Definiuje tekst wyświetlany na przycisku <input>. Dla <button>, tekst jest zawarty bezpośrednio w elemencie.
• name - Określa nazwę przycisku lub pola, która jest przesyłana na serwer wraz z danymi formularza. Jest także używana do grupowania przycisków opcji (radio).
• disabled - Wyłącza przycisk lub pole, uniemożliwiając jego użycie. Wyłączony przycisk jest wyświetlany jako wyszarzony.
• autofocus - Ustawia automatycznie fokus na przycisku lub polu po załadowaniu strony, dzięki czemu użytkownik może od razu rozpocząć interakcję.

Podsumowanie

Przyciski w HTML oferują szeroką gamę opcji interakcji z użytkownikiem, od prostych kliknięć po złożone wybory opcji. Przy pomocy elementów takich jak <button>, <input> oraz atrybutów, takich jak type, value, name, id, disabled i autofocus, można łatwo dostosować przyciski do potrzeb użytkownika i specyfiki aplikacji.