Szukaj…


Wprowadzenie

Kluczowym składnikiem interaktywnych systemów sieciowych, tagi wejściowe są elementami HTML zaprojektowanymi tak, aby pobierać od użytkowników określoną formę wprowadzania danych. Różne typy elementów wejściowych mogą regulować wprowadzane dane, aby dopasować je do określonego formatu i zapewnić bezpieczeństwo wprowadzania hasła.

Składnia

  • <input type="" name="" value="">

Parametry

Parametr Detale
klasa Wskazuje klasę wejścia
ID Wskazuje identyfikator wejścia
rodzaj Określa typ kontroli wejścia do wyświetlenia. Dopuszczalne wartości to hidden , text , tel , url , url email , password , date , time , number , range , color , checkbox , radio , file , submit , image , reset i button . Domyślnie jest to text jeśli nie jest określony, jeśli wartość jest nieprawidłowa lub jeśli przeglądarka nie obsługuje określonego typu.
Nazwa Wskazuje nazwę wejścia
niepełnosprawny Wartość logiczna wskazująca, że dane wejściowe powinny być wyłączone. Wyłączone elementy sterujące nie mogą być edytowane, nie są wysyłane po przesłaniu formularza i nie mogą być aktywowane.
sprawdzone Gdy wartością atrybutu type jest radio lub pole wyboru, obecność tego atrybutu logicznego wskazuje, że formant jest domyślnie zaznaczony; w przeciwnym razie zostanie zignorowany.
wielokrotność HTML5 Wskazuje, że można przekazać wiele plików lub wartości (dotyczy tylko danych wejściowych typu file i email - email )
symbol zastępczy HTML5 Wskazówka dla użytkownika, co można wprowadzić do kontrolki. Tekst zastępczy nie może zawierać znaków powrotu karetki ani linii
autouzupełnienie HTML5 Wskazuje, czy wartość kontrolki może zostać automatycznie uzupełniona przez przeglądarkę.
tylko czytać Wartość logiczna wskazująca, że danych wejściowych nie można edytować. Kontrole tylko do odczytu są nadal wysyłane po przesłaniu formularza, ale nie zostaną zogniskowane. HTML5: Ten atrybut jest ignorowany, gdy wartość atrybutu type jest ustawiona na hidden , range , color , checkbox , radio , file lub button .
wymagany HTML5 Wskazuje, że wartość musi być obecna lub element musi zostać sprawdzony, aby formularz został przesłany
alt Alternatywny tekst dla obrazów, na wypadek, gdyby nie były wyświetlane.
autofocus Element <input> powinien uzyskać fokus podczas ładowania strony.
wartość Określa wartość elementu <input> .
krok Atrybut step określa przedziały liczby prawnej. Działa z następującymi typami danych wejściowych: number , range , date , date datetime-local time datetime-local , month , time i week .

Uwagi

Podobnie jak w przypadku innych pustych elementów HTML5, <input> jest samozamykające i może być zapisane <input /> . HTML5 nie wymaga tego ukośnika.

Poniżej przedstawiono poprawne typy danych wejściowych w HTML:

5

Poniżej przedstawiono nowo wprowadzone typy wprowadzania w ramach standardu HTML 5. Niektóre z tych typów nie są obsługiwane przez wszystkie przeglądarki internetowe. W przypadku, gdy typ nie jest obsługiwany, elementem wejściowym będzie domyślnie typ text .

Aby sprawdzić, które przeglądarki obsługują typy, możesz przejść do caniuse.com .

Pole wyboru i przyciski radiowe

Przegląd

Pola wyboru i przyciski opcji są zapisywane za pomocą znacznika HTML <input> , a ich zachowanie jest zdefiniowane w specyfikacji HTML .

Najprostszym przycisk checkbox lub radio jest <input> element z type atrybutu checkbox lub radio , odpowiednio:

<input type="checkbox">
<input type="radio">

Pojedynczy samodzielny element pola wyboru jest używany dla pojedynczej opcji binarnej, takiej jak pytanie typu „tak lub nie”. Pola wyboru są niezależne, co oznacza, że użytkownik może wybrać dowolną liczbę opcji w grupie pól wyboru. Innymi słowy, sprawdzając jedno pole wyboru nie usuń zaznaczenie pól wyboru w inne grupy wyboru.

Przyciski radiowe zwykle występują w grupach (jeśli nie są zgrupowane z innym przyciskiem radiowym, prawdopodobnie zamiast tego chciałeś użyć pola wyboru), identyfikowane za pomocą tego samego atrybutu name na wszystkich przyciskach w tej grupie. Wybór przycisków opcji wzajemnie się wyklucza , co oznacza, że użytkownik może wybrać tylko jedną opcję z grupy przycisków opcji. Po zaznaczeniu przycisku opcji każdy inny przycisk o tej samej name który został wcześniej zaznaczony, nie jest zaznaczony.

Przykład:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

Podczas przeglądania przyciski opcji pojawiają się jako koło (niezaznaczone) lub wypełnione koło (zaznaczone). Pola wyboru pojawiają się jako kwadrat (niezaznaczone) lub wypełniony kwadrat (zaznaczone). W zależności od przeglądarki i systemu operacyjnego kwadrat ma czasami zaokrąglone rogi.

Atrybuty

pola wyboru i przyciski opcji mają wiele atrybutów kontrolujących ich zachowanie:

value

Jak każdy inny element wejściowy, atrybut value określa wartość ciągu, którą należy skojarzyć z przyciskiem w przypadku przesłania formularza. Jednak pola wyboru i przyciski opcji są wyjątkowe, ponieważ gdy wartość jest pomijana, domyślnie jest on po przesłaniu, zamiast wysyłania pustej wartości. Atrybut value nie jest odzwierciedlany w wyglądzie przycisku.

checked

checked atrybut określa stan początkowy pola wyboru lub przycisku opcji. Jest to atrybut logiczny i można go pominąć.

Każdy z nich jest prawidłowym, równoważnym sposobem zdefiniowania zaznaczonego przycisku opcji:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

Brak checked atrybutu to jedyna poprawna składnia niezaznaczonego przycisku:

<input type="radio">
<input type="checkbox">

Podczas resetowania <form> pola wyboru i przyciski opcji wracają do stanu checked atrybutu.

Dostępność

Etykiety

Aby nadać kontekst przyciskom i pokazać użytkownikom, do czego służy każdy przycisk, każdy z nich powinien mieć etykietę. Można to zrobić za pomocą elementu <label> , aby owinąć przycisk. Dzięki temu etykieta jest klikalna, dlatego wybierasz odpowiedni przycisk.

Przykład:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

lub z elementem <label> z atrybutem for ustawionym na atrybut id przycisku:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Grupy przycisków

Ponieważ każdy przycisk opcji wpływa na pozostałe w grupie, często podaje się etykietę lub kontekst dla całej grupy przycisków opcji.

Aby zapewnić etykietę dla całej grupy, przyciski opcji powinny być zawarte w elemencie <fieldset> z elementem <legend> .

Przykład:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

Pola wyboru można również grupować w podobny sposób, z zestawem pól i legendą identyfikującymi grupę powiązanych pól wyboru. Należy jednak pamiętać, że pola wyboru nie powinny mieć tej samej nazwy, ponieważ nie wykluczają się wzajemnie. Spowoduje to, że formularz poda wiele wartości dla tego samego klucza, a nie wszystkie języki po stronie serwera obsługują to w ten sam sposób (zachowanie niezdefiniowane). Każde pole wyboru powinno mieć unikalną nazwę lub użyć zestawu nawiasów kwadratowych ( [] ), aby wskazać, że formularz powinien przesłać tablicę wartości dla tego klucza. Wybór metody powinien zależeć od sposobu obsługi danych formularza po stronie klienta lub po stronie serwera. Powinieneś także skrócić legendę, ponieważ niektóre kombinacje przeglądarek i czytników ekranu odczytują legendę przed każdym polem wejściowym w zestawie pól.

Ukryty

<input type="hidden" name="inputName" value="inputValue">  

Ukryte dane wejściowe nie będą widoczne dla użytkownika, ale jego wartość zostanie przesłana do serwera po przesłaniu formularza.

Hasło

<input type="password" name="password">

Element wejściowy z atrybutem typu, którego wartością jest password tworzy jednowierszowe pole tekstowe podobne do type=text wejściowego type=text , z tym wyjątkiem, że tekst nie jest wyświetlany, gdy użytkownik go wprowadza.

<input type="password" name="password" placeholder="Password">

Tekst zastępczy jest wyświetlany jako zwykły tekst i jest automatycznie zastępowany, gdy użytkownik zaczyna pisać.

Przykładowe pole wprowadzania hasła

Uwaga: niektóre przeglądarki i systemy modyfikują domyślne zachowanie pola hasła, aby wyświetlać również ostatnio wprowadzony znak przez krótki czas, na przykład:

Przykład pokazanego ostatniego znaku

Zatwierdź

<input type="submit" value="Submit">

Prześlij dane wejściowe tworzy przycisk, który przesyła formularz, który jest w środku po kliknięciu.

Możesz również użyć elementu <button> , jeśli potrzebujesz przycisku przesyłania, który można łatwiej stylizować lub zawierać inne elementy:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

Plik

<input type="file" name="fileSubmission">

Dane wejściowe plików pozwalają użytkownikom wybrać plik ze swojego lokalnego systemu plików do użytku z bieżącą stroną. W połączeniu z elementem form można ich użyć, aby umożliwić użytkownikom przesyłanie plików na serwer (więcej informacji znajduje się w części Przesyłanie plików ).

Poniższy przykład pozwala użytkownikom użyć file wejściowych file do wybrania pliku ze swojego systemu plików i przesłania go do skryptu na serwerze o nazwie upload_file.php .

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

Wiele plików

Dodając atrybut multiple użytkownik będzie mógł wybrać więcej niż jeden plik:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Akceptuj pliki

Atrybut Akceptuj określa typy plików, które użytkownik może wybrać. Np. .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

Sprawdzanie poprawności danych wejściowych

Sprawdzanie poprawności danych wejściowych HTML odbywa się automatycznie przez przeglądarkę w oparciu o specjalne atrybuty elementu wejściowego. Może częściowo lub całkowicie zastąpić sprawdzanie poprawności danych wejściowych JavaScript. Ten rodzaj sprawdzania poprawności może być obchodzony przez użytkownika poprzez specjalnie spreparowane żądania HTTP, więc nie zastępuje on sprawdzania poprawności danych wejściowych po stronie serwera. Sprawdzanie poprawności następuje tylko podczas próby przesłania formularza, więc wszystkie ograniczone dane wejściowe muszą znajdować się w formularzu, aby można było sprawdzić poprawność (chyba że używasz JavaScript). Należy pamiętać, że dane wejściowe, które są wyłączone lub tylko do odczytu, nie spowodują sprawdzenia poprawności.

Niektóre nowsze typy danych wejściowych (takie jak email , url , tel , date i wiele innych) są automatycznie sprawdzane i nie wymagają własnych ograniczeń sprawdzania poprawności.

5

wymagany

Użyj required atrybutu, aby wskazać, że pole musi zostać wypełnione, aby przejść walidację.

<input required>

Minimalna / maksymalna długość

Użyj minlength i maxlength aby wskazać wymagania dotyczące długości. Większość przeglądarek zapobiegnie wpisywaniu w polu więcej niż maks. Znaków, uniemożliwiając unieważnienie wpisu nawet przed próbą przesłania.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Określanie zakresu

Użyj atrybutów min i max aby ograniczyć zakres liczb, które użytkownik może wprowadzić do wejścia typu number lub range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />
5

Dopasuj wzór

Aby uzyskać większą kontrolę, użyj atrybutu pattern aby określić dowolne wyrażenie regularne, które należy dopasować, aby przejść sprawdzanie poprawności. Możesz także określić title , który jest zawarty w komunikacie sprawdzania poprawności, jeśli pole nie przejdzie.

<input pattern="\d*" title="Numbers only, please.">

Oto komunikat wyświetlany w przeglądarce Google Chrome w wersji 51 podczas próby przesłania formularza z niepoprawną wartością w tym polu:

Proszę dopasować żądany format. Proszę tylko o liczby.

Nie wszystkie przeglądarki wyświetlają komunikat o nieprawidłowych wzorcach, chociaż większość współczesnych przeglądarek zapewnia pełne wsparcie.

Sprawdź najnowszą obsługę CanIUse i odpowiednio ją zaimplementuj.

5

Zaakceptuj typ pliku

W przypadku pól wejściowych file typu można akceptować tylko niektóre typy plików, takie jak filmy, obrazy, pliki audio, określone rozszerzenia plików lub niektóre typy multimediów . Na przykład:

<input type="file" accept="image/*" title="Only images are allowed">

Wiele wartości można określić przecinkiem, np .:

<input type="file" accept="image/*,.rar,application/zip">

Uwaga: Dodanie atrybutu novalidate do elementu form lub atrybutu formnovalidate do przycisku przesyłania uniemożliwia sprawdzenie poprawności elementów formularza. Na przykład:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Formularz zawiera pola, które są wymagane do „opublikowania” wersji roboczej, ale nie są wymagane do „zapisania” wersji roboczej.

Resetowanie

<input type="reset" value="Reset">

Dane wejściowe reset typu tworzą przycisk, który po kliknięciu resetuje wszystkie dane wejściowe w postaci, w jakiej są zawarte, do stanu domyślnego.

  • Tekst w polu wejściowym zostanie zresetowany do wartości pustej lub do wartości domyślnej (określonej za pomocą atrybutu value ).
  • Wszelkie opcje w menu wyboru zostaną odznaczone, chyba że mają selected atrybut.
  • Wszystkie pola wyboru i pola wyboru zostaną odznaczone, chyba że mają atrybut checked .

Uwaga: przycisk resetowania musi znajdować się wewnątrz lub być dołączony (za pomocą atrybutu form ) do elementu <form> , aby mieć jakikolwiek efekt. Przycisk zresetuje tylko elementy w tym formularzu.

Numer

5
<input type="number" value="0" name="quantity">

Element Input z atrybutem typu, którego wartością jest number reprezentuje precyzyjną kontrolę ustawiania wartości elementu na ciąg znaków reprezentujący liczbę.

Pamiętaj, że to pole nie gwarantuje poprawności numeru. Pozwala to tylko na użycie wszystkich symboli, które mogą być użyte w dowolnej liczbie rzeczywistej, na przykład użytkownik będzie mógł wprowadzić wartość taką jak e1e-,0 .

Tel

<input type="tel" value="+8400000000">

Element wejściowy z atrybutem typu, którego wartość to tel reprezentuje tel zwykły tekstowy element sterujący do wprowadzania numeru telefonu.

E-mail

5

<input type="email"> służy do wprowadzania danych, które powinny zawierać adres e-mail.

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

Adres e-mail może być automatycznie sprawdzany po przesłaniu, w zależności od obsługi przeglądarki.

Przycisk

<input type="button" value="Button Text">

Przyciski mogą służyć do wyzwalania akcji na stronie bez przesyłania formularza. Możesz także użyć elementu <button> , jeśli potrzebujesz przycisku, który można łatwiej stylizować lub zawierać inne elementy:

<button type="button">Button Text</button>

Przyciski są zwykle używane ze zdarzeniem „onclick”:

<input type="button" onclick="alert('hello world!')" value="Click Me">

lub

<button type="button" onclick="alert('hello world!')">Click Me</button>

Atrybuty

[name]

name przycisku przesłanego z danymi formularza.

[type]

type przycisku.

Możliwe wartości to:

submit : przycisk przesyła dane formularza na serwer. Jest to ustawienie domyślne, jeśli atrybut nie jest określony lub jeśli atrybut jest dynamicznie zmieniany na pustą lub niepoprawną wartość.

reset : przycisk resetuje wszystkie elementy sterujące do ich wartości początkowych.

button : przycisk nie ma domyślnego działania. Może mieć skrypty po stronie klienta powiązane ze zdarzeniami elementu, które są uruchamiane w momencie wystąpienia zdarzeń.

menu : Przycisk otwiera menu podręczne zdefiniowane za pomocą wyznaczonego elementu.

[value]

Początkowa wartość przycisku.

5

Dodatkowe atrybuty przycisków przesyłania

Atrybut Opis
form Określa identyfikator formularza, do którego należy przycisk.
Jeśli nie zostanie podany, będzie należeć do elementu formy przodka (jeśli taki istnieje).
formaction Określa, gdzie wysłać dane formularza
po przesłaniu formularza za pomocą tego przycisku.
formenctype Określa sposób kodowania danych formularza
podczas przesyłania go na serwer za pomocą tego przycisku.
Można używać tylko z formmethod="post" .
formmethod Określa używaną metodę HTTP (POST lub GET)
podczas wysyłania danych formularza za pomocą tego przycisku.
formnovalidate Określa, że dane formularza nie powinny być sprawdzane przy składaniu.
formtarget Określa, gdzie wyświetlić otrzymaną odpowiedź
po przesłaniu formularza za pomocą tego przycisku.

Kolor

5
<input type="color" name="favcolor" value="#ff0000">

W obsługiwanych przeglądarkach element wejściowy z atrybutem typu, którego wartością jest color tworzy kontrolkę podobną do przycisku, z kolorem równym wartości atrybutu color (domyślnie czarny, jeśli wartość nie jest określona lub jest nieprawidłowym formatem szesnastkowym).

wprowadź opis zdjęcia tutaj

Kliknięcie tego przycisku otwiera widżet kolorów systemu operacyjnego, który pozwala użytkownikowi wybrać kolor.

wprowadź opis zdjęcia tutaj

Alternatywą dla przeglądarek, które nie obsługują tego typu wprowadzania, jest zwykły type=text wprowadzania type=text .

wprowadź opis zdjęcia tutaj

URL

5
<input type="url" name="Homepage">

Służy do wprowadzania danych, które powinny zawierać adres URL.

W zależności od obsługi przeglądarki pole url może być automatycznie sprawdzane po przesłaniu.

Niektóre smartfony rozpoznają typ url i dodają „.com” do klawiatury, aby dopasować wprowadzony adres URL.

Data

5
<input type="date" />

Wybór daty pojawi się na ekranie, aby wybrać datę. To nie jest obsługiwane w Firefox ani Internet Explorer.

DateTime-Local

5
<input type="datetime-local" />

W zależności od obsługi przeglądarki na ekranie pojawi się okno wyboru daty i godziny, w którym możesz wybrać datę i godzinę.

Wizerunek

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

Obraz. Musisz użyć atrybutu src, aby zdefiniować źródło obrazu, oraz atrybutu alt, aby zdefiniować tekst alternatywny. Możesz użyć atrybutów wysokości i szerokości, aby zdefiniować rozmiar obrazu w pikselach.

Zasięg

5
<input type="range" min="" max="" step="" />

Kontrolka do wprowadzania liczby, której dokładna wartość nie jest ważna.

Atrybut Opis Domyślna wartość
min Minimalna wartość dla zakresu 0
max Maksymalna wartość dla zakresu 100
krok Kwota do zwiększenia o każdy przyrost. 1

Miesiąc

5
<input type="month" />

W zależności od obsługi przeglądarki formant pokaże, aby wybrać miesiąc.

Czas

5
<input type="time" />

Wprowadzony time oznacza ten element jako przyjęcie ciągu reprezentującego czas. Format jest zdefiniowany w RFC 3339 i powinien być czasem częściowym, takim jak

19:04:39
08:20:39.04

Obecnie wszystkie wersje Edge, Chrome, Opera i Chrome na Androida mają typ wsparcia = „czas”. Obsługują go nowsze wersje przeglądarki Android, w szczególności 4.4 i nowsze. Safari na iOS oferuje częściową obsługę, brak obsługi atrybutów min, max i step.

Tydzień

5
<input type="week" />

W zależności od obsługi przeglądarki pojawi się kontrolka umożliwiająca wprowadzenie numeru tygodnia i roku bez strefy czasowej.

Tekst

Najbardziej podstawowy typ danych wejściowych i domyślny, jeśli nie określono żadnego type . Ten typ danych wejściowych definiuje jedno tekstowe pole tekstowe z podziałami linii automatycznie usuwanymi z wartości wejściowej. Wszystkie inne znaki mogą być w to wpisane. Elementy <input> są używane w elemencie <form> do deklarowania kontrolek wejściowych, które umożliwiają użytkownikom wprowadzanie danych.

Składnia

<input type="text">

lub (bez określania type , używając domyślnego atrybutu):

<input>

Domyślna szerokość pola tekstowego wynosi 20 znaków. Można to zmienić, określając wartość atrybutu size następujący sposób:

<input type="text" size="50">

Atrybut size różni się wyraźnie od ustawiania szerokości za pomocą CSS. Użycie szerokości definiuje określoną wartość (liczbę pikseli, procent elementu macierzystego itp.), Że wejście musi być zawsze szerokie. Użycie size oblicza wielkość szerokości do przydzielenia na podstawie użytej czcionki i szerokości znaków.

Uwaga: użycie atrybutu size nie ogranicza z natury liczby znaków, które można wprowadzić w polu, a jedynie szerokość wyświetlanego pola. Aby ograniczyć długość, zobacz Sprawdzanie poprawności danych wejściowych .

Pole wejściowe pozwala tylko na jeden wiersz tekstu. Jeśli potrzebujesz wieloliniowego wprowadzania tekstu dla znacznej ilości tekstu, użyj zamiast tego elementu <textarea> .

Szukaj

5

Wyszukiwanie typu wejścia służy do wyszukiwania tekstowego. W większości przeglądarek doda symbol lupy obok miejsca na tekst

<input type="search" name="googlesearch">

DateTime (Global)

Element wejściowy z atrybutem typu, którego wartość to „ datetime ”, reprezentuje kontrolkę do ustawiania wartości elementu na ciąg znaków reprezentujący globalną datę i godzinę (z informacją o strefie czasowej).

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Dozwolone atrybuty:

  • globalne atrybuty
  • Nazwa
  • niepełnosprawny
  • Formularz
  • rodzaj
  • autouzupełnienie
  • autofocus
  • lista
  • minimum maksimum
  • krok (pływak)
  • tylko czytać
  • wymagana wartość


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow