Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

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ą typeatrybutu 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:

Imię:

Nazwisko:


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:

Imię:

Nazwisko:


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

Test Yourself With Exercises

Exercise:

In the form below, add an input field for text, with the name "username" .

<form action="/action_page.php">
<>
</form>


HTML Input Type Attribute

Tag Description
<input type=""> Specifies the input type to display