Html <input> atrybuty tagów | Wyjaśnione
- Typ atrybut
- Atrybut nazwy
- Atrybut Min i Max
- Atrybut autofocus
- Atrybut wyłączony
- Atrybut zastępczy
- Atrybut Readonly
- Wymagany atrybut
- Wiele atrybutów
- Atrybut rozmiaru
- Atrybut autocomplete
Ten zapis przedstawi kompleksowy przegląd wszystkich wyżej wymienionych atrybutów. Kontynuujmy!
Typ atrybut
Jak sama nazwa sugeruje atrybut typu w znaczniku, określa typ wejściowy, wartość określa atrybutu typu to tekst. Możemy przypisać różne wartości do atrybutu typu, takie jak hasło, e -mail itp. Podstawowa składnia atrybutu typu pokazano na poniższym rysunku:
Dla tagu określono różne wartości dla atrybutu typu. Zachowanie atrybutu typu będzie różne dla różnych wartości.
Atrybut nazwy
Określa nazwę elementu wejściowego, następujące będzie podstawową składnię atrybutu nazwy:
Zamiast tego nie wpłynęłoby to na dane wyjściowe atrybut nazwy o polu wejściowym.
Atrybut Min i Max
Te atrybuty są używane do określania minimalnych i maksymalnych wartości elementu wejściowego. Poniższy fragment pokazuje składnię atrybutów MIN i MAX:
Atrybut autofocus
Atrybut Autofocus określa, że element powinien uzyskać Autofocus, gdy strona ładuje się, a poniższy rysunek pokazuje składnię atrybutu autofocus:
Atrybut wyłączony
Atrybut wyłączony pozwala nam wyłączyć element, w takim przypadku użytkownik nie byłby w stanie użyć ani kliknąć tego pola:
Przykład
Rozważmy poniższy kod, który implementuje wszystkie wyżej wymienione atrybuty dla różnych pól:
Powyższy fragment tworzy wiele pól wejściowych, atrybut autofocus jest włączony w pierwszym polu, więc za każdym razem, gdy ładujemy stronę, kursor wskazuje na to pole. Nie bylibyśmy w stanie kliknąć drugiego pola, ponieważ zawiera atrybut wyłączony. Trzecie pole wejściowe to pole typu liczbowego i określamy w nim atrybuty MIN i MAX, więc weźmie wartość tylko od 20 do 60:
Wyjście weryfikuje, że wszystkie atrybuty działają poprawnie.
Atrybut zastępczy
Zapewnia wskazówkę na temat oczekiwanej wartości pola wejściowego. Podstawowa składnia atrybutu zastępczego będzie następująco:
Wszystko, co określamy w symbolice zastępczej, zostanie wyświetlone jako wskazówka, jak pokazano poniżej:
Atrybut Readonly
Określa, że pole jest tylko odczytu, co oznacza, że pola nie można zmodyfikować. Składnia atrybutu tylko do odczytu jest pokazana na poniższym rysunku:
Określamy wartość = „Michael” i włączamy atrybut tylko do odczytu. W rezultacie nie bylibyśmy w stanie zmienić wartości tego pola wejściowego:
Wymagany atrybut
Wymagany atrybut określa, że formularza nie można przesłać, jeśli pole wejściowe nie jest wypełnione. Podstawowa składnia wymaganego atrybutu pokazano na poniższym fragmencie:
Jeśli klikniemy przycisk Prześlij bez wypełnienia pola wejściowego, otrzymamy następujący wynik:
Wiele atrybutów
Pozwala nam wprowadzić wiele wartości i jest najczęściej używany z typem wejściowym „pliku”, w którym umożliwia użytkownikowi wybierać wiele plików. Poniższy kod fragment pokazuje składnię atrybutu „wielokrotnego”:
Powyżej fragment generuje następujące dane wyjściowe:
Atrybut rozmiaru
Służy do ustawiania rozmiaru (szerokości) pola wejściowego, składnia atrybutu rozmiaru jest pokazana w fragmencie poniżej podanego:
Domyślny rozmiar pól wejściowych to 20 znaków i zmodyfikowaliśmy rozmiar pierwszego pola wejściowego jako 35, więc wygeneruje następujące dane wyjściowe:
Atrybut autocomplete
Włączenie atrybutu autookomplet umożliwia przeglądarce przewidywanie i automatycznie kompletne pole wejściowe. Poniższy fragment dany pokazuje, jak używać atrybutu autoComplete w znaczniku wejściowym:
Powyżej kod-snippet pokazuje następujące dane wyjściowe:
Wyjście zweryfikowało, że jeśli AutoComplete = „ON”, przeglądarka sugeruje już wprowadzone dane.
Wniosek
Atrybuty znacznika są używane do kontrolowania zachowania pól wejściowych formularza E.G. Atrybut typu określa typ wejściowy, atrybut autofocus służy do skupienia się na określonym elemencie na obciążeniu strony. Włączenie atrybutu autocomplete zapewnia już wprowadzone dane, ponieważ sugestie i wiele atrybutów pozwala nam dodawać wiele plików. Ten zapis wykazał szczegółowy przewodnik dla głębokiego zrozumienia atrybutów znacznika HTML.