Atrybuty wejściowe HTML
Ten rozdział opisuje różne atrybuty <input>elementu HTML.
Wartość Atrybut
Atrybut input valueokreś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 readonlyokreś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 disabledokreś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 sizeokreśla widoczną szerokość (w znakach) pola wejściowego.
Domyślna wartość sizeto 20.
Uwaga: Atrybut sizedział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 maxlengthokreśla maksymalną liczbę znaków dozwoloną w polu wejściowym.
Uwaga: Gdy maxlengthustawione 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 mini maxatrybuty określają minimalną i maksymalną wartość pola wejściowego.
Atrybuty mini maxdział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 multipleokreśla, że użytkownik może wprowadzić więcej niż jedną wartość w polu wejściowym.
Atrybut działa z multiplenastę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 patternokreśla wyrażenie regularne, z którym sprawdzana jest wartość pola wejściowego podczas przesyłania formularza.
Atrybut działa z patternnastę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 placeholderokreś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 placeholdernastę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 requiredokreśla, że przed przesłaniem formularza należy wypełnić pole wejściowe.
Atrybut działa z requirednastę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 stepokreś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 stepnastę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 autofocusokreś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 heighti widthatrybuty 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 listodnosi 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 autocompleteokreś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.
autocompleteAtrybut 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 .