HTML Input Atrybuty

value Atrybut

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

readonly Atrybut

readonly atrybut określa, że pole wejściowe jest tylko do odczytu (cannot be changed) :

readonly atrybut nie potrzebuje wartości. To jest taki sam jak pisanie readonly = „readonly”.

disabled Atrybut

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

Niepełnosprawny elementem jest un-un-użyteczny i klikalny.

Elementy niepełnosprawnych nie zostanie przedstawiony.

disabled atrybut nie potrzebuje wartości. To jest taki sam jak pisanie disabled = „disabled”.

size Atrybut

size atrybut określa rozmiar (in characters) dla pola wejściowego:

maxlength Atrybut

maxlength atrybut określa maksymalną dozwoloną długość dla pola wejściowego:

Z maxlength atrybut, kontrola wejścia nie przyjmie więcej niż dozwolona liczba znaków.

Atrybut ten nie dostarcza żadnych informacji zwrotnych. Jeśli chcesz, aby ostrzec użytkownika, należy napisać kod JavaScript.

Atrybuty HTML5

HTML5 dodać following atrybuty <input> :

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

oraz following atrybuty <form> :

• autocomplete
• novalidate

autocomplete Atrybut

autocomplete atrybut określa, czy pole formularza lub wejściowy powinien mieć autocomplete włączyć lub wyłączyć.

Gdy autocomplete jest włączone, przeglądarka automatycznie kompletne wartości w oparciu o wartości, które użytkownik wprowadził wcześniej.

Tip: Jest możliwe, aby mieć autocomplete "on" na formularzu, a "off" dla konkretnych pól wejściowych, lub odwrotnie.

autocomplete atrybut współpracuje z <form> i następującym <input> typów: text, search, url, tel, email, password, datepickers, range, and color .

Przykład

Formularz HTML z autocomplete w sprawie (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<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 trzeba włączyć autocomplete funkcji dla tej pracy.

novalidate Atrybut

novalidate atrybut jest <form> atrybutu.

Gdy występuje, novalidate określa, że dane formularza nie powinno być zatwierdzone, gdy złożone.

Przykład

Wskazuje, że forma nie może być zatwierdzony do przedstawienia:

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

Spróbuj sam "

autofocus Atrybut

autofocus atrybut jest atrybutem logiczna.

Gdy występuje, to wskazuje, że <input> element powinien skupić się automatycznie po załadowaniu strony.

Przykład

Niech "First name" pole wprowadzania automatycznie się skupić podczas wczytywania strony:

First name:<input type="text" name="fname" autofocus>

Spróbuj sam "

form Atrybut

form cecha określa jedną lub więcej, tworzy <input> elementem należy.

Tip: Aby odnosić się do więcej niż jednej postaci, użyj listę oddzielonych spacjami form ids .

Przykład

input field znajduje się poza formularza HTML (but still a part of the form) :

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Spróbuj sam "

formaction Atrybut

formaction atrybut określa URL pliku, który będzie przetwarzać kontroli wejściowej, gdy formularz jest składany.

formaction atrybut zastępuje action atrybutu <form> elementu.

formaction atrybut jest używany z type = „submit” i type = „obraz”.

Przykład

Formularz HTML z dwóch przedłożyć przyciski, z różnych działań:

<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"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

Spróbuj sam "

formenctype Atrybut

formenctype atrybut określa, w jaki sposób form-data powinny być kodowane przy składaniu go do serwera (only for forms with method="post" ) .

formenctype atrybut zastępuje enctype atrybut <form> elementu.

formenctype atrybut jest używany z type="submit" i type="image" .

Przykład

Wyślij form-data , która jest domyślną zakodowany (the first submit button) i zakodowany jako "multipart/form-data" (the second submit button) :

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

Spróbuj sam "

formmethod Atrybut

formmethod atrybut definiuje metodę HTTP przesyłania form-data do adresu URL akcji.

formmethod atrybut przesłania method atrybut <form> elementu.

formmethod atrybut może być używany z type="submit" i type="image" .

Przykład

Przycisk sekund złożyć przesłania metodę HTTP w postaci:

<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="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

Spróbuj sam "

formnovalidate Atrybut

novalidate atrybut jest atrybutem logiczna.

Gdy występuje, to określa, że <input> element nie powinien być zatwierdzone, gdy złożone.

formnovalidate atrybut zastępuje novalidate atrybut <form> elementu.

formnovalidate atrybut może być używany z type="submit" .

Przykład

Formularz z dwóch przedłożyć przyciski (with and without validation) :

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Spróbuj sam "

formtarget Atrybut

formtarget atrybut określa nazwę lub słowa kluczowego, który wskazuje, gdzie, aby wyświetlić odpowiedź, która jest odbierana po wysłaniu formularza.

formtarget atrybut zastępuje target atrybut <form> elementu.

formtarget atrybut może być używany z type = „submit” i type = „obraz”.

Przykład

Formularz z dwoma przedłożyć przyciski, z różnych okien docelowych:

<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 "

Na height i width Atrybuty

Na height i szerokość atrybuty określić wysokość i szerokość na <input> elementu.

Na height i width atrybuty używane tylko <input type="image"> .

Przykład

Definiowanie obrazu jako przycisk Prześlij, z atrybutów wysokości i szerokości:

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

Spróbuj sam "

list Atrybut

list atrybutów oznacza <datalist> elementu, który posiada wstępnie zdefiniowane dla opcji <input> elementu.

Przykład

<input> element o predefiniowanych wartości w <datalist> :

<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 "

Na min i max Atrybuty

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

min i max atrybuty pracy z następujących typów wejść: number, range, date, datetime, datetime-local, month, time and week .

Przykład

<Input> o wartości minimalne i maksymalne:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Spróbuj sam "

multiple Attribute

multiple atrybut jest atrybutem logiczna.

Gdy występuje, to określa, że użytkownik może wprowadzić więcej niż jedną wartość w <input> elementu.

multiple atrybut współpracuje z następującymi typami wejściowe: email i file .

Przykład

Pole przesyłanie plików, który akceptuje wiele wartości:

Select images: <input type="file" name="img" multiple>

Spróbuj sam "

pattern Atrybut

pattern atrybut określa wyrażenie regularne, że <input> Wartość elementu jest porównywane.

pattern atrybut współpracuje z następującymi typami wejściowe: text, search, url, tel, email, and password .

Wskazówka: Użyj globalnego tytuł atrybut opisać wzór, aby pomóc użytkownikowi.

Tip: Więcej informacji na temat wyrażeń regularnych w naszym poradniku JavaScript.

Przykład

Pole wejściowe, które mogą zawierać tylko trzy litery (no numbers or special characters) :

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

Spróbuj sam "

placeholder Atrybut

placeholder atrybut określa wskazówkę opisujący oczekiwaną wartość pola wejściowego (a sample value or a short description of the format) .

Podpowiedź jest wyświetlana w polu tekstowym, zanim użytkownik wprowadzi wartość.

placeholder atrybut współpracuje z następującymi typami wejściowe: text, search, url, tel, email, and password .

Przykład

Pole wejściowe z tekstu zastępczego:

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

Spróbuj sam "

required Atrybut

required atrybut jest atrybutem logiczna.

Gdy występuje, to wskazuje, że pole wejściowe muszą zostać wypełnione przed wysłaniem formularza.

required atrybut współpracuje z następującymi typami wejściowe: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

Przykład

Wymagane pola wejściowe:

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

Spróbuj sam "

step Atrybut

step atrybut określa prawne interwałów numerycznych na <input> elementu.

Przykładowo: jeśli krok = "3", cyfry prawne mogą być -3, 0, 3, 6, etc.

Tip: step Atrybut może być używany razem z max i min cechy, aby utworzyć szereg wartości prawnych.

step atrybut współpracuje z następującymi typami wejściowych: number, range, date, datetime, datetime-local, month, time and week .

Przykład

Pole wejściowe z określonych przedziałów liczbowych prawnych:

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

Spróbuj sam "

Sprawdź się z ćwiczeniami!

Ćwiczenie 1 » ćwiczenie 2» ćwiczenie 3 » ćwiczenie 4»