atrybuty formularza wejściowego w HTML
Jak działają atrybuty wejściowe w HTML
Funkcjonalność atrybutów zależy od wartości przenoszonych przez te atrybuty. Atrybuty i ich obsługiwane wartości są tutaj opisane.
Typ atrybut
Podobnie jak element wejściowy jest podstawową częścią form HTML, atrybut typu jest kluczowym składnikiem elementu wejściowego. Definiuje typ wejściowy, który ma jedną z następujących wartości.
- tekst: używany do opisania pola tekstowego
- numer: używane do utworzenia pola, które akceptuje wartości liczbowe
- e-mail: używany do wprowadzenia adresu e -mail
- kolor: Zdefiniuj kolor pola wejściowego
- pole wyboru: Aby utworzyć pole wyboru
- radio: Aby utworzyć przycisk opcji
- teren: tworzy pole, które akceptuje numery telefonów
- obraz: Służy do uzyskania pliku obrazu od użytkownika
- ukryty: pole, które nie będzie wyświetlane na ekranie użytkownika
- data: tworzy pole, które akceptuje datę
- miesiąc: tworzy pole, które zawiera miesiąc i rok do wyboru
- składać: przycisk, który przesłałby dane formularza
- Resetowanie: To tworzy przycisk, który resetuje wszystkie dane formy
Wyżej wymienione są najczęściej używanymi wartościami atrybutu typu, a poniżej stadowany przykład wykorzystuje kilka z nich.
Przykład
Kod napisany poniżej wykonuje kilka wartości typ atrybut.
W powyższym kodzie używane są cztery różne typy wejściowe, który używa tekstu, e -maila, przesyłania i resetowania.
Wyjście
Atrybut wartości
Ilekroć definiuje się formularz HTML, zaleca się przypisanie wartości początkowej dla każdego elementu. Aby to zrobić, musisz użyć atrybutu wartości. Typ wejściowy należy zdefiniować, aby użyć tego atrybutu.
Przykład
Kod podany poniżej praktykuje atrybut wartości na wpis typu = tekst i wejście typu = prześlij.
Wyjście
Atrybut tylko do odczytu
Ten atrybut nie pozwoliłby na pisanie w polu wejściowym.
Przykład
Kod HTML dostarczył praktyki tylko czytać atrybut w polu wejściowym.
Wyjście
Pole tekstowe pokazane na wyjściu nie pozwoli ci pisać, ani kliknięcie myszy podejmie żadne działanie.
Atrybut wyłączony
Typ wejściowy, który przenosi ten atrybut, wyświetliby tylko obszar objęty polem wejściowym. Jednak nie można wykonywać żadnego działania w tym elemencie wejściowym.
Przykład
wyłączony Atrybut elementu wejściowego jest praktykowany w następującym kodzie
Wyjście
Notatka: Atrybut tylko do odczytu jest przesyłany w formularzu, podczas gdy atrybut wyłączony pozwala na wartość przesyłania.
Atrybut wzorca
Ten atrybut akceptuje wyrażenia regularne, dla których wartość tego pola zostanie sprawdzona. Jest używany z kilkoma typami wejściowymi, takimi jak tekst, e -mail, tel, URL, hasło i data.
Przykład
W poniższym kodzie wzór Atrybut jest używany na polu tekstowym, które zaakceptuje tylko małe alfabety.
Wyjście
W celu weryfikacji atrybutu wzorca próbowaliśmy wejść do alfabetów kapitałowych. Jednak błąd wywołany z prośbą o dopasowanie żądanego formatu.
Atrybut zastępczy
Ten atrybut dodaje fikcyjne znaki, które pomagają użytkownikowi w zaniżaniu celu tego pola.
Przykład
Kod wspomniany poniżej ma zastosowanie symbol zastępczy Pole atrybutu, aby opisać, że pole tekstowe ma zaakceptować twoje imię i nazwisko.
Wyjście
Ze wyjścia obserwuje się, że pola tekstowe kieruje użytkownika do wprowadzenia jego nazwy.
Wymagany atrybut
Typy wejściowe, które wykorzystują wymagane atrybuty, są obowiązkowe do wypełnienia.
Przykład
Kod napisany poniżej ustawia wymagany atrybut dla pola tekstowego.
Wyjście
Ponieważ pole jest obowiązkowe do wypełnienia, w ten sposób zgłoszenie nie zostanie wykonane, dopóki jakiś tekst nie zostanie zapisany w polu tekstowym.
Atrybut autofocus
Jeśli strona internetowa zostanie ponownie załadowana, pole wejściowe zostanie skoncentrowane, w którym używany jest atrybut autofocus.
Przykład
Poniższy kod ustawia autofokus atrybut elementu wejściowego.
Wyjście
Jak użyliśmy autofokus atrybut na polu tekstowym, dlatego za każdym razem, gdy strona jest załadowana, kursor będzie siękał.
Wiele atrybutów
Ten atrybut pozwala na dodanie wielu wartości (dołączanie wielu plików jest głównym użyciem tego atrybutu).
Przykład
Kod podany poniżej wymaga plik jako typ wejściowy i wiele atrybut jest stosowany w typu wejściowym.
Wyjście
Wyjście pokazuje, że dołączone są trzy pliki, które opisują działanie wielu atrybutów.
Atrybut wysokości i szerokości
Ten atrybut jest używany z typem obrazu i ustawia wysokość i szerokość obrazu.
Przykład
Typ wejścia jest ustawiony na obraz i wysokość szerokość Atrybuty są na nim stosowane.
Wyjście
Obraz w wyjściu byłby dostosowany do wartości szerokości i wysokości.
Atrybut min/max
Minimalne/maksymalne wartości dla różnych typów wejściowych są określone przez te atrybuty. Typy wejściowe mogą obejmować tekst, liczbę, datę, zakres, miesiąc, godzinę i tydzień.
Przykład
Kod podany poniżej używa min I Max atrybut, w którym typ wejściowy jest ustawiony numer.
Wyjście
Jak pokazano na wyjściu, pole liczby nie akceptuje 21, ponieważ limit został ustawiony na 20.
Atrybut maxlength
Liczbę znaków dla typu wejściowego można określić za pomocą atrybutu MaxLength.
Przykład
Poniższy kod ogranicza numer znaków do 5 w polu tekstowym.
Wyjście
Powyższe wyjście zawiera 5 znaków w polu tekstowym, pola tekstowa nie pozwoli na 6. znak z powodu maksymalna długość atrybut.
Wniosek
Element wejściowy ma obszerną listę atrybutów do utworzenia funkcjonalnego formularza HTML. Ten informacyjny post wymienia atrybuty elementu wejściowego formularzy HTML. Atrybuty obsługiwane przez element wejściowy to, typ, wartość, wyłączone, tylko odczyt, autofocus, wielokrotność, wysokość i szerokość, długość maksymalna itp,. Ponadto każdy atrybut jest praktykowany przy użyciu przykładu, który pomoże w rozumieniu funkcjonalności.