Atrybuty HTML Input

Atrybut value

value Atrybut określa wartość początkową pola wejściowego:

Przykład

<form action="">
 Imię:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

Atrybut readonly

readonly Atrybut określa, że pole wejściowe jest tylko do odczytu (nie można go zmienić):

Przykład

<form action="">
 Imię:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

Atrybut readonly nie wymaga wartości. Jest to równoważne readonly="readonly".

Atrybut disabled

disabled Atrybut określa, że pole wejściowe jest wyłączone.

Elementy wyłączone są niedostępne i nieaktywne.

Elementy wyłączone nie są wysyłane.

Przykład

<form action="">
 Imię:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

Atrybut disabled nie wymaga wartości. Jest to równoważne disabled="disabled".

Atrybut size

size Atrybut określa rozmiar pola wejściowego (w znakach):

Przykład

<form action="">
 Imię:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

Atrybut maxlength

maxlength Atrybut określa maksymalną długość pola wejściowego:

Przykład

<form action="">
 Imię:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

Jeśli ustawisz atrybut maxlength, kontrolka wejścia nie przyjmie więcej znaków niż pozwala na to liczba dozwolona.

Ten atrybut nie dostarcza żadnych informacji zwrotnych. Jeśli potrzebujesz powiadomień użytkownika, musisz napisać kod JavaScript.

Uwaga:Ograniczenia wejścia nie są nieomylne. JavaScript oferuje wiele metod do zwiększenia nielegalnych wejść. Aby bezpiecznie ograniczyć wejścia, odbiorca (serwer) musi jednocześnie sprawdzać ograniczenia.

Atrybuty HTML5

HTML5 dodał następujące atrybuty dla <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height i width
  • list
  • min i max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

i dodaj następujące atrybuty dla <form>:

  • autocomplete
  • novalidate

Atrybut autocomplete

Atrybut autocomplete określa, czy formularz lub pole wejściowe powinien być automatycznie wypełniany.

Gdy automatyczne wypełnianie jest włączone, przeglądarka automatycznie wypełnia wartości na podstawie wcześniejszych wartości wprowadzonych przez użytkownika.

Wskazówka:Możesz ustawić automatyczne wypełnianie formularza na włączone, a dla konkretnego pola wejściowego wyłączone, i vice versa.

Atrybut autocomplete dotyczy <form> oraz następujących typów <input>: text, search, url, tel, email, password, datepickers, range oraz color.

Przykład

Automatyczne wypełnianie włączone w formularzach HTML (pole wejściowe jako off):

<form action="action_page.php" autocomplete="on">
   Imię:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Spróbuj sam

Wskazówka:W niektórych przeglądarkach może być konieczne ręczne włączenie funkcji automatycznego uzupełniania.

Atrybut "novalidate"

Atrybut "novalidate" należy do atrybutów <form>.

Jeśli ustawiona, atrybut "novalidate" określa, że dane formularza nie są sprawdzane podczas wysyłania formularza.

Przykład

Wskazuje, że formularz nie jest sprawdzany pod względem poprawności przed wysłaniem:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Spróbuj sam

Atrybut "autofocus"

Atrybut "autofocus" jest atrybutem logicznym.

Jeśli ustawiona, określa, że element <input> powinien automatycznie uzyskać fokus podczas ładowania strony.

Przykład

Pozwala na automatyczne uaktywnienie pola wejściowego "Imię" podczas ładowania strony:

Imię:<input type="text" name="fname" autofocus>

Spróbuj sam

Atrybut "form"

Atrybut "form" określa jedno lub więcej formularzy, do których należy element <input>.

Wskazówka:Aby odnosić się do więcej niż jednego formularza, użyj listy id formularzy oddzielonych spacjami.

Przykład

Pole wejściowe znajduje się poza formularzem HTML (ale wciąż należy do formularza):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Zatwierdź">
</form>
 Imię: <input type="text" name="lname" form="form1">

Spróbuj sam

Atrybut "formaction"

Atrybut "formaction" określa URL pliku, który jest przetwarzany podczas wysyłania formularza.

Atrybut "formaction" pokrywa atrybut "action" elementu <form>.

Atrybut "formaction" jest stosowany dla typów "submit" oraz "image".

Przykład

HTML formularz z dwoma przyciskami submit o różnych działaniach:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Zatwierdź"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Spróbuj sam

Atrybut "formenctype"

Atrybut "formenctype" określa, jak koderować dane formularza (form-data) podczas ich wysyłania do serwera (tylko dla formularzy z metodą "post").

Atrysta "formenctype" pokrywa atrybut "enctype" elementu <form>.

Atrybut formenctype ma zastosowanie do type="submit" oraz type="image".

Przykład

Wysyłanie danych formularza (form-data) z domyślnym kodowaniem oraz kodowaniem "multipart/form-data" (drugi przycisk zatwierdzający):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Zatwierdź">
   <input type="submit" formenctype="multipart/form-data">
   value="Zatwierdź jako Multipart/form-data">
</form>

Spróbuj sam

Atrybut formmethod

Atrybut formmethod definiuje metodę HTTP używaną do wysyłania danych formularza (form-data) do URL akcji.

Atrybut formmethod nadpisuje atrybut method elementu <form>.

Atrybut formmethod ma zastosowanie do type="submit" oraz type="image".

Przykład

Drugi przycisk zatwierdzający nadpisuje metodę HTTP formularza:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Zatwierdź">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Zatwierdź za pomocą POST">
</form>

Spróbuj sam

Atrybut formnovalidate

Atrybut novalidate jest atrybutem logicznym.

Jeśli ustawiony, określa, że podczas wysyłania formularza elementy <input> nie będą walidowane.

Atrybut formnovalidate nadpisuje atrybut novalidate elementu <form>.

Atrybut formnovalidate może być użyty z type="submit".

Przykład

Formularz z dwoma przyciskami zatwierdzającymi (walidacja i brak walidacji):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Zatwierdź"><br>
   <input type="submit" formnovalidate value="Zatwierdź bez walidacji">
</form>

Spróbuj sam

Atrybut formtarget

Atrybut formtarget określa nazwę lub słowo kluczowe, które wskazuje, gdzie wyświetlić odpowiedź po wysłaniu formularza.

Atrybut formtarget nadpisuje atrybut target elementu <form>.

Atrybut formtarget można używać z type="submit" i type="image".

Przykład

Ten formularz ma dwa przyciski submit, które odpowiadają różnym oknom docelowym:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Spróbuj sam

Atrybuty height i width

Atrybuty height i width określają wysokość i szerokość elementu <input>.

Atrybuty height i width są używane tylko dla <input type="image">.

Uwaga:Zawsze określ rozmiar obrazu. Jeśli przeglądarka nie wie, jakie są rozmiary obrazu, strona może migotać podczas ładowania obrazu.

Przykład

Zdefiniuj obraz jako przycisk submit i ustaw atrybuty height i width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Spróbuj sam

Atrybut listy

Atrybut listy odnosi się do elementu <datalist>, który zawiera预先定义的选项 dla elementu <input>.

Przykład

Użyj <datalist> do ustawienia elementu <input> z预先 zdefiniowanymi wartościami:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Spróbuj sam

Atrybuty min i max

Atrybuty min i max określają minimalną i maksymalną wartość elementu <input>.

Atrybuty min i max są stosowane do takich typów wprowadzania jak: number, range, date, datetime, datetime-local, month, time oraz week.

Przykład

Element <input> z wartościami minimalną i maksymalną:

Wprowadź datę przed 1980-01-01:
Wprowadź datę przed 1980-01-01:
 Wprowadź datę przed 1980-01-01:
Wprowadź datę po 2000-01-01:
 Ilość (od 1 do 5):
<input type="number" name="quantity" min="1" max="5">

Spróbuj sam

Atrybut multiple

Atrybut multiple jest atrybutem logicznym.

Jeśli ustawiony, określa, że użytkownik może wprowadzić więcej niż jedną wartość w elemencie <input>.

Atrybut multiple jest stosowany do następujących typów wprowadzania: email i file.

Przykład

Pole wprowadzania pliku akceptującego wiele wartości:

Wybierz obraz: <input type="file" name="img" multiple>

Spróbuj sam

Atrybut pattern

Atrybut pattern określa wyrażenie regularne używane do sprawdzania wartości elementu <input>.

Atrybut pattern jest stosowany do następujących typów wprowadzania: text, search, url, tel, email oraz password.

Wskazówka:Użyj globalnego atrybutu title, aby opisać wzorzec, co pomoże użytkownikowi.

Wskazówka:Dowiedz się więcej o wyrażeniach regularnych w naszym tutorialu JavaScript.

Przykład

Pole wprowadzania może zawierać tylko trzy litery (brak cyfr lub znaków specjalnych):

Kod kraju: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Spróbuj sam

Atrybut placeholder

Atrybut placeholder określa wskazówkę (przykładową wartość lub krótki opis formatu) dla oczekiwanej wartości pola wprowadzania.

Ten komunikat zostanie wyświetlony w polu wprowadzania przed wprowadzeniem wartości przez użytkownika.

Atrybut placeholder适用于以下输入类型：text、search、url、tel、email oraz password.

Przykład

Pole wejściowe z tekstem占位符:

<input type="text" name="fname" placeholder="First name">

Spróbuj sam

Atrybut required

Atrybut required jest atrybutem logicznym.

Jeśli ustawiony, określa, że pole wejściowe musi być wypełnione przed wysłaniem formularza.

Atrybut required适用于以下输入类型：text、search、url、tel、email oraz password.

Przykład

Pole wejściowe wymagane:

Username: <input type="text" name="usrname" required>

Spróbuj sam

Atrybut step

Atrybut step określa prawną间隔 liczbową elementu <input>.

Przykład: Jeśli step="3", to prawnymi liczbami są -3、0、3、6、itd.

Wskazówka:Atrybut step może być używany razem z atrybutami max oraz min, aby utworzyć zakres prawnych wartości.

Atrybut step适用于以下输入类型：number、range、date、datetime、datetime-local、month、time oraz week。

Przykład

Pole wejściowe z konkretnymi prawnymi间隔ami liczbowymi:

<input type="number" name="points" step="3">

Spróbuj sam