Atrybuty wejściowe HTML
Ten rozdział opisuje różne atrybuty <input>
elementu HTML.
Wartość Atrybut
Atrybut input value
określa wartość początkową pola wejściowego:
Przykład
Pola wejściowe z wartościami początkowymi (domyślnymi):
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atrybut tylko do odczytu
Atrybut input readonly
określa, że pole wejściowe jest tylko do odczytu.
Pole wejściowe tylko do odczytu nie może być modyfikowane (jednak użytkownik może do niego przejść tabulatorem, podświetlić je i skopiować z niego tekst).
Wartość pola wejściowego tylko do odczytu zostanie wysłana podczas przesyłania formularza!
Przykład
Pole wejściowe tylko do odczytu:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atrybut wyłączony
Atrybut input disabled
określa, że pole wejściowe powinno być wyłączone.
Wyłączone pole wejściowe jest bezużyteczne i nie można go kliknąć.
Wartość wyłączonego pola wejściowego nie zostanie wysłana podczas przesyłania formularza!
Przykład
Nieaktywne pole wejściowe:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atrybut rozmiaru
Atrybut input size
określa widoczną szerokość (w znakach) pola wejściowego.
Domyślna wartość size
to 20.
Uwaga: Atrybut size
działa z następującymi typami danych wejściowych: tekst, wyszukiwanie, tel, url, e-mail i hasło.
Przykład
Ustaw szerokość pola wejściowego:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
Atrybut maxlength
Atrybut input maxlength
określa maksymalną liczbę znaków dozwoloną w polu wejściowym.
Uwaga: Gdy maxlength
ustawione jest a, pole wejściowe nie będzie akceptować więcej niż określona liczba znaków. Jednak ten atrybut nie zapewnia żadnej opinii. Tak więc, jeśli chcesz ostrzec użytkownika, musisz napisać kod JavaScript.
Przykład
Ustaw maksymalną długość pola wejściowego:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Atrybuty min i max
Dane wejściowe min
i max
atrybuty określają minimalną i maksymalną wartość pola wejściowego.
Atrybuty min
i max
działają z następującymi typami danych wejściowych: liczba, zakres, data, data-godzina-lokalna, miesiąc, godzina i tydzień.
Wskazówka: użyj jednocześnie atrybutów max i min, aby utworzyć zakres dopuszczalnych wartości.
Przykład
Ustaw datę maksymalną, datę minimalną i zakres dopuszczalnych wartości:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Wiele atrybutów
Atrybut input multiple
określa, że użytkownik może wprowadzić więcej niż jedną wartość w polu wejściowym.
Atrybut działa z multiple
następującymi typami danych wejściowych: e-mail i plik.
Przykład
Pole przesyłania pliku, które akceptuje wiele wartości:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Atrybut wzoru
Atrybut input pattern
określa wyrażenie regularne, z którym sprawdzana jest wartość pola wejściowego podczas przesyłania formularza.
Atrybut działa z pattern
następującymi typami danych wejściowych: tekst, data, wyszukiwanie, adres URL, tel, e-mail i hasło.
Wskazówka: Użyj globalnego atrybutu tytułu , aby opisać wzorzec, aby pomóc użytkownikowi.
Wskazówka: Dowiedz się więcej o wyrażeniach regularnych w naszym samouczku JavaScript.
Przykład
Pole wejściowe, które może zawierać tylko trzy litery (bez cyfr i znaków specjalnych):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Atrybut zastępczy
Atrybut input placeholder
określa krótką wskazówkę, która opisuje oczekiwaną wartość pola wejściowego (wartość przykładowa lub krótki opis oczekiwanego formatu).
Krótka wskazówka jest wyświetlana w polu wejściowym, zanim użytkownik wprowadzi wartość.
Atrybut działa z placeholder
następującymi typami danych wejściowych: tekst, wyszukiwanie, url, tel, e-mail i hasło.
Przykład
Pole wejściowe z tekstem zastępczym:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Wymagany atrybut
Atrybut input required
określa, że przed przesłaniem formularza należy wypełnić pole wejściowe.
Atrybut działa z required
następującymi typami danych wejściowych: tekst, wyszukiwanie, adres URL, tel, e-mail, hasło, selektory dat, numer, pole wyboru, radio i plik.
Przykład
Wymagane pole wejściowe:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Atrybut kroku
Atrybut input step
określa dopuszczalne przedziały liczbowe dla pola wejściowego.
Przykład: jeśli step="3", dopuszczalne liczby mogą wynosić -3, 0, 3, 6 itd.
Wskazówka: tego atrybutu można używać razem z atrybutami max i min, aby utworzyć zakres dopuszczalnych wartości.
Atrybut działa z step
następującymi typami danych wejściowych: liczba, zakres, data, data-godzina-lokalna, miesiąc, godzina i tydzień.
Przykład
Pole wejściowe z określonymi prawnymi interwałami liczbowymi:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Uwaga: Ograniczenia danych wejściowych nie są niezawodne, a JavaScript zapewnia wiele sposobów dodawania niedozwolonych danych wejściowych. Aby bezpiecznie ograniczyć wprowadzanie danych, musi to również zostać sprawdzone przez odbiorcę (serwer)!
Atrybut autofokusa
Atrybut input autofocus
określa, że pole wejściowe powinno automatycznie uzyskać fokus podczas wczytywania strony.
Przykład
Pozwól, aby pole wejściowe „Imię” automatycznie stało się aktywne podczas wczytywania strony:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Atrybuty wysokości i szerokości
Dane wejściowe height
i width
atrybuty określają wysokość i szerokość <input
type="image">
elementu.
Wskazówka: zawsze określaj zarówno atrybuty wysokości, jak i szerokości obrazów. Jeśli ustawiono wysokość i szerokość, miejsce wymagane na obraz jest zarezerwowane podczas ładowania strony. Bez tych atrybutów przeglądarka nie zna rozmiaru obrazu i nie może zarezerwować dla niego odpowiedniej przestrzeni. Efektem będzie zmiana układu strony podczas ładowania (podczas ładowania obrazów).
Przykład
Zdefiniuj obraz jako przycisk przesyłania z atrybutami wysokości i szerokości:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Lista Atrybut
Atrybut input list
odnosi się do <datalist>
elementu, który zawiera wstępnie zdefiniowane opcje dla elementu <input>.
Przykład
Element <input> z predefiniowanymi wartościami w <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Atrybut autouzupełniania
Atrybut input autocomplete
określa, czy formularz lub pole wejściowe powinny mieć włączone lub wyłączone autouzupełnianie.
Autouzupełnianie pozwala przeglądarce przewidzieć wartość. Gdy użytkownik zacznie pisać w polu, przeglądarka powinna wyświetlić opcje wypełniania pola na podstawie wcześniej wpisanych wartości.
autocomplete
Atrybut działa z następującymi <form>
typami <input>
: tekst, wyszukiwanie, adres URL, tel, e-mail, hasło, selektory dat, zakres i kolor.
Przykład
Formularz HTML z włączonym i wyłączonym autouzupełnianiem dla jednego pola wejściowego:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Wskazówka: w niektórych przeglądarkach może być konieczne aktywowanie funkcji autouzupełniania, aby to zadziałało (patrz „Preferencje” w menu przeglądarki).
Ćwiczenia HTML
Formularz HTML i elementy wejściowe
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .