Przyciski w HTML
Przyciski HTML są jak każdy inny przycisk na ekranie i mogą wykonywać różne funkcje. Przyciski HTML mogą być używane do przesyłania lub zresetowania danych formularza, aby pokazać dowolny znak sukcesu lub niebezpieczeństwa, aby utworzyć przycisk łącza i tak dalej.
W HTML przyciski można tworzyć za pomocą i elementów. Jednak przycisk utworzony z elementami dotyczy tylko danych tekstowych, podczas gdy przycisk utworzony z elementem obsługuje przesyłanie obrazu, obszerna lista stylizacji atrybutów i wiele więcej. W tym artykule zawiera szczegółowy przewodnik po przyciskach HTML z następującymi wynikami uczenia się.
- Jak tworzyć przyciski HTML
- Przyciski HTML z frameworkiem bootstrap
- Przyciski HTML z W3.Framework CSS
Jak utworzyć przycisk HTML
Jak omówiono wcześniej, można utworzyć przycisk HTML za pomocą elementu. Tag przycisku obsługuje wiele atrybutów, których można użyć do korzystania z różnych funkcji znacznika przycisku. Na przykład może przekazać funkcję lub skrypt na swoim wydarzeniu na kliknięciu. Ponadto atrybut typu określa funkcjonalność przycisku, że albo byłby to przycisk przesyłania lub przycisk resetowania. Rzućmy okiem na atrybuty obsługiwane przez element przycisku HTML.
Poniższa tabela zawiera listę atrybutów obsługiwanych przez znacznik przycisku.
| Atrybut | Wartość | Opis |
|---|---|---|
| autofokus | prawda fałsz | Przycisk byłby skupiony na załadowaniu strony |
| wyłączony | prawda fałsz | Konkretny przycisk byłby wyłączony |
| formularz | form_id | Ten atrybut pokazuje, że przycisk jest powiązany z jedną z bardziej formularzy |
| formacja | URL | Ten atrybut określa, gdzie zostaną wysłane dane formularza. |
| FormMethod | Zdobądź, post | Określa metodę HTTP dla tej konkretnej formy |
| FormNovalidate | FormNovalidate | Dane formularza nie zostaną zatwierdzone po przesłaniu |
| FormTarget | _blank, _self, _parent, _top, frameName | Określa lokalizację, w której odpowiedź byłaby wyświetlana |
| nazwa | nazwa | Ten atrybut określa nazwę przycisku |
| typ | Zresetuj, prześlij, przycisk | Typ przycisku jest określony |
| wartość | tekst | Początkowa wartość przycisku jest ustawiona |
| na kliknięcie | scenariusz | Wykonuje skrypt po kliknięciu przycisku |
Ćwiczmy te atrybuty za pomocą następujących przykładów.
Przykład 1: Prześlij i zresetuj przyciski
Ten przykład pokazuje tworzenie przycisków HTML z type = ”prześlij” I type = ”reset” atrybuty tagu. Wartości typ atrybut pokaż, że dane zostaną przesłane/odpoczywają po kliknięciu przycisku.
Kod podany poniżej tworzy przyciski przesyłania i resetowania na znaczniku formularza.
Html
Powyższy kod tworzy formularz, który zawiera dwa przyciski z type = ”prześlij” i type = ”reset”. Zdarzenie OnClick obu przycisków jest wykonywane, a funkcja JavaScript zostanie wykonana na każdym przycisku.
JavaScript
funkcja sub ()Alert („Store to udane”);
funkcja res ()
alert („resetowanie danych”);
Tworzone są dwie funkcje JS, które mają być wywoływane po kliknięciu przycisków.
Wyjście
Ze wyjścia obserwuje się, że po przyciskach przesłania i resetowania alert jest inicjowany przy każdym kliknięciu. Ponadto dane są przesyłane i z powodzeniem resetowane.
Przykład 2: przyciski HTML z bootstrap
Przyciski HTML można powiązać z właściwościami CSS, aby je stylizować w celu lepszej prezentacji. Bootstrap to powszechnie używany framework CSS, który ma wbudowaną klasę dla przycisków. Poniższy kod HTML ćwiczy sukces, niebezpieczeństwo i klasa linków Bootstrap, aby dodać pewne efekty do przycisków.
Aby dodać klasy bootstrap, musisz dodać następujący link CDN do dokumentu HTML.
Wyjście
Dane wyjściowe pokazuje, że „BTN-Success„Klasa ma zielony kolor, podczas gdy„Niebezpieczeństwo BTN„Klasa zamieniła kolor przycisku w czerwony. Z drugiej strony „BTN-LINK„Klasa utworzyła przycisk łącza.
Przykład 3: przyciski HTML z W3.Framework CSS
W3.Framework CSS był szeroko stosowany ze względu na jego wbudowane klasy. Poniższy kod tworzy przyciski z W3.Zajęcia CSS.
Powyższy kod ćwiczy W3-Omange, W3-Rund-Large, W3-Border i W3-Hover Class of W3.Framework CSS. Klasy te zmieniają kolor, kształt, granicę i dodają efekty unoszące się do przycisków.
Wyjście
Z wyjścia obserwuje się, że pierwszy przycisk jest zaokrąglony i w kolorze pomarańczowym. Podczas gdy drugi przycisk ma na nim efekt zawisowywania i przeniesienie kursora do niego sprawi, że przycisk czerwony.
Wniosek
Przyciski HTML można tworzyć za pomocą elementu i elementu za pomocą type = ”prześlij” atrybut. Jednak przycisk utworzony z elementem oferuje więcej funkcjonalności i stylizacji w porównaniu z przyciskiem utworzonym przez tag. Ten artykuł zawiera opisowy przewodnik dla przycisków HTML. Ponadto ten post serwuje również styl przycisków HTML przy użyciu dwóch powszechnie używanych ram CSS, w tym W3.CSS i bootstrap.