Typy danych wejściowych HTML
W tym rozdziale opisano różne typy <input>
elementu HTML.
Typy danych wejściowych HTML
Oto różne typy wprowadzania, których możesz używać w HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Wskazówka: domyślną wartością type
atrybutu jest „tekst”.
Typ wprowadzania Tekst
<input type="text">
definiuje
jednowierszowe pole wprowadzania tekstu :
Przykład
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Imię:Nazwisko:
Hasło typu wejściowego
<input type="password">
definiuje pole hasła :
Przykład
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Nazwa użytkownika:Hasło:
Znaki w polu hasła są zamaskowane (pokazane jako gwiazdki lub kółka).
Typ danych wejściowych Prześlij
<input type="submit">
definiuje przycisk do
przesyłania danych formularza do obsługi formularzy .
Procedura obsługi formularzy to zazwyczaj strona serwera ze skryptem do przetwarzania danych wejściowych.
Form-handler jest określony w action
atrybucie formularza:
Przykład
<form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Jeśli pominiesz atrybut wartości przycisku przesyłania, przycisk otrzyma domyślny tekst:
Przykład
<form action="/action_page.php">
<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"><br><br>
<input type="submit">
</form>
Resetowanie typu wejścia
<input type="reset">
definiuje przycisk resetowania,
który zresetuje wszystkie wartości formularzy do ich wartości domyślnych:
Przykład
<form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Jeśli zmienisz wartości wejściowe, a następnie klikniesz przycisk „Resetuj”, dane formularza zostaną zresetowane do wartości domyślnych.
Typ wejścia Radio
<input type="radio">
definiuje przycisk radiowy .
Przyciski radiowe pozwalają użytkownikowi wybrać TYLKO JEDNĄ z ograniczonej liczby opcji:
Przykład
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Pole wyboru typu wejścia
<input type="checkbox">
definiuje pole wyboru .
Pola wyboru pozwalają użytkownikowi wybrać ZERO lub WIĘCEJ opcji z ograniczonej liczby wyborów.
Przykład
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Przycisk typu wejścia
<input type="button">
definiuje przycisk :
Przykład
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Typ wejścia Kolor
Służy do <input type="color">
wprowadzania pól, które powinny zawierać kolor.
W zależności od obsługiwanych przeglądarek w polu wejściowym może pojawić się selektor kolorów.
Przykład
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Typ wejścia Data
Jest <input type="date">
używany do pól wejściowych, które powinny zawierać datę.
W zależności od obsługiwanych przeglądarek w polu wejściowym może pojawić się selektor dat.
Przykład
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Możesz także użyć atrybutów min
i max
, aby dodać ograniczenia do dat:
Przykład
<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">
</form>
Typ wejścia Data/godzina-lokalny
Określa pole wprowadzania daty i <input type="datetime-local">
godziny bez strefy czasowej.
W zależności od obsługiwanych przeglądarek w polu wejściowym może pojawić się selektor dat.
Przykład
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Wpisz e-mail
Służy do <input type="email">
wprowadzania pól, które powinny zawierać adres e-mail.
W zależności od obsługiwanych przeglądarek adres e-mail może być automatycznie sprawdzany po przesłaniu.
Niektóre smartfony rozpoznają typ wiadomości e-mail i dodają „.com” do klawiatury, aby dopasować wprowadzaną wiadomość e-mail.
Przykład
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Plik typu wejściowego
<input type="file">
Definiuje pole wyboru pliku i przycisk „Przeglądaj” do przesyłania plików .
Przykład
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Typ wejścia Ukryty
Definiuje ukryte pole wejściowe ( <input type="hidden">
niewidoczne dla użytkownika).
Ukryte pole umożliwia programistom internetowym dodawanie danych, których użytkownicy nie mogą przeglądać ani modyfikować podczas przesyłania formularza.
Ukryte pole często przechowuje rekord bazy danych, który należy zaktualizować po przesłaniu formularza.
Uwaga: chociaż wartość nie jest wyświetlana użytkownikowi w treści strony, jest widoczna (i można ją edytować) za pomocą narzędzi programistycznych dowolnej przeglądarki lub funkcji „Wyświetl źródło”. Nie używaj ukrytych danych wejściowych jako formy zabezpieczenia!
Przykład
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
Typ wejścia Miesiąc
<input type="month">
Pozwala użytkownikowi wybrać miesiąc i rok .
W zależności od obsługiwanych przeglądarek w polu wejściowym może pojawić się selektor dat.
Przykład
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Numer typu wejścia
<input type="number">
Definiuje
numeryczne pole wejściowe .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
Attribute | Description |
---|---|
checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
disabled | Specifies that an input field should be disabled |
max | Specifies the maximum value for an input field |
maxlength | Specifies the maximum number of character for an input field |
min | Specifies the minimum value for an input field |
pattern | Specifies a regular expression to check the input value against |
readonly | Specifies that an input field is read only (cannot be changed) |
required | Specifies that an input field is required (must be filled out) |
size | Specifies the width (in characters) of an input field |
step | Specifies the legal number intervals for an input field |
value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range">
defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min
, max
, and step
attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search">
is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel">
is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time">
allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url">
is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week">
allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
Tag | Description |
---|---|
<input type=""> | Specifies the input type to display |