: Element Input (Form Input)

accept

Dotyczy tylko typu wejściowego file, atrybut accept określa, które typy plików można wybrać w kontrolce przesyłania file. Zobacz typ danych wejściowych pliku.

alt

Dotyczy tylko przycisku image, zawiera alternatywny tekst dla obrazu, wyświetlając wartość atrybutu, jeśli brakuje obrazu src lub w inny sposób nie można go załadować. Zobacz typ danych wejściowych obrazu.

autocomplete

(To nie jest atrybut logiczny!) Atrybut autocomplete przyjmuje jako wartość ciąg oddzielony spacjami, który opisuje, jaki rodzaj funkcji autouzupełniania powinno zapewniać dane wejściowe. Typowa implementacja autouzupełniania przywołuje poprzednie wartości wprowadzone w tym samym polu wejściowym, ale mogą istnieć bardziej złożone formy autouzupełniania. Na przykład przeglądarka może zintegrować się z listą kontaktów urządzenia w celu autouzupełniania email adresów w polu wprowadzania adresu e-mail. Zobacz Wartości w atrybucie autouzupełniania HTML, aby uzyskać informacje na temat dozwolonych wartości.

Atrybut autocomplete jest prawidłowy na hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color i password. Ten atrybut nie ma wpływu na typy danych wejściowych, które nie zwracają danych liczbowych ani tekstowych, ponieważ jest ważny dla wszystkich typów danych wejściowych z wyjątkiem checkbox, radio, file lub dowolny z typów przycisków.

Zobacz atrybut autouzupełniania HTML f lub dodatkowe informacje, w tym informacje na temat bezpieczeństwa hasła i tego, jak autocomplete różni się nieco w przypadku hidden niż w przypadku innych typów danych wejściowych.

autofocus

Atrybut boolowski, który, jeśli jest obecny, wskazuje, że wejście powinno automatycznie mieć fokus po zakończeniu ładowania strony (lub gdy <dialog> zawierający element został wyświetlony).

Uwaga: element z atrybutem autofocus może uzyskać fokus przed DOMContentLoaded jest uruchamiane.

Nie więcej niż jeden element w dokumencie może mieć atrybut autofocus. Jeśli zostanie umieszczony na więcej niż jednym elemencie, pierwszy z atrybutem będzie aktywny.

Atrybut autofocus nie może być użyty na danych wejściowych typu hidden, ponieważ nie można skupić się na ukrytych danych wejściowych.

Ostrzeżenie: Automatyczne ustawianie ostrości kontrolki formularza może zmylić osoby niedowidzące korzystające z technologii czytania ekranu i osoby z zaburzeniami poznawczymi. Kiedy przypisane jest autofocus, programy do odczytywania ekranu „teleportują” użytkownika do kontrolki formularza bez wcześniejszego ostrzeżenia.

Uważnie rozważ dostępność, gdy stosując atrybut autofocus. Automatyczne skupienie się na kontrolce może spowodować przewijanie strony podczas ładowania. Fokus może również powodować wyświetlanie dynamicznych klawiatur na niektórych urządzeniach dotykowych. Podczas gdy czytnik ekranu poinformuje o etykiecie kontrolki formularza, na której fokus jest aktywny, czytnik ekranu nie będzie ogłaszał niczego przed etykietą, a widzący użytkownik na małym urządzeniu będzie równie omijał kontekst utworzony przez poprzednią zawartość.

capture

Wprowadzony w specyfikacji HTML Media Capture i ważny tylko dla typu wejściowego file, capture określa, które media – mikrofon, wideo lub kamera – powinny zostać użyte do przechwycenia nowego pliku do przesłania z file sterowaniem wysyłaniem w obsługiwanych scenariuszach. Zobacz typ danych wejściowych pliku.

checked

Prawidłowe zarówno dla radio, jak i checkbox types, checked jest atrybutem logicznym. Jeśli występuje w typie radio, oznacza to, że przycisk radiowy jest aktualnie wybrany w grupie przycisków radiowych o tej samej nazwie. Jeśli występuje w typie checkbox, oznacza to, że pole wyboru jest domyślnie zaznaczone (podczas ładowania strony). Nie wskazuje, czy to pole wyboru jest aktualnie zaznaczone: jeśli stan pola wyboru zostanie zmieniony, ten atrybut zawartości nie odzwierciedla zmiany. (Tylko atrybut HTMLInputElement checked IDL jest aktualizowany.)

Uwaga: W przeciwieństwie do innych kontrolek wprowadzania danych, pola wyboru i wartości przycisków opcji są uwzględniane w przesłanych danych tylko wtedy, gdy są one obecnie checked. Jeśli tak, zostanie przesłana nazwa i wartości zaznaczonych elementów sterujących.

Na przykład, jeśli pole wyboru, którego name to fruit ma value z cherry, a pole wyboru jest zaznaczone, przesłane dane formularza będą zawierać fruit=cherry. Jeśli pole wyboru nie jest aktywne, to nie jest w ogóle wyświetlane w danych formularza. Domyślne value dla pól wyboru i przycisków opcji to on.

dirname

Dotyczy tylko typów wejściowych text i search, czyli dirname atrybut umożliwia podanie kierunkowości elementu. Po uwzględnieniu formant formularza przesyła dwie pary nazwa / wartość: pierwsza to name i value, a druga to wartość dirname jako nazwę o wartości ltr lub rtl ustawianej przez przeglądarkę.

Po przesłaniu powyższego formularza dane wejściowe powodują, że zarówno name / value para fruit=cherry i dirname / direction pary fruit.dir=ltr do wysłania.

disabled

Wartość logiczna, która, jeśli jest obecna, wskazuje, że użytkownik nie powinien mieć możliwości interakcji z wejściem. Wyłączone wejścia są zwykle renderowane z ciemniejszym kolorem lub przy użyciu innej formy wskazania, że pole nie jest dostępne do użytku.

W szczególności wyłączone wejścia nie otrzymują click, a wyłączone dane wejściowe nie są przesyłane w formularzu.

Uwaga: chociaż nie jest to wymagane w specyfikacji, Firefox domyślnie zachowuje dynamiczny stan wyłączony elementu <input> podczas wczytywania stron. Użyj atrybutu autocomplete, aby sterować tą funkcją.

form

Ciąg określający <form> element, z którym skojarzone jest wejście (czyli jego właściciel formularza). Wartość tego ciągu „jeśli jest obecna” musi być zgodna z id elementu <form> w tym samym dokumencie. Jeśli ten atrybut nie jest określony element <input> jest powiązany z najbliższym formularzem zawierającym, jeśli taki istnieje.

Atrybut form umożliwia umieść dane wejściowe w dowolnym miejscu w dokumencie, ale dołącz je do formularza w innym miejscu w dokumencie.

Uwaga: dane wejściowe można powiązać tylko z jednym formularzem.

formaction

Dotyczy tylko typów danych wejściowych image i submit. Zobacz typ danych wejściowych przesyłania, aby uzyskać więcej informacji.

formenctype

Prawidłowe dla image i submit tylko typy wejściowe. Zobacz typ danych wejściowych przesyłania, aby uzyskać więcej informacji.

formmethod

Obowiązuje dla image i submit tylko typy wejściowe. Zobacz typ danych wejściowych przesyłania, aby uzyskać więcej informacji.

formnovalidate

Prawidłowe dla image i submit tylko typy wejściowe. Aby uzyskać więcej informacji, zobacz typ danych wejściowych przesyłania.

formtarget

Obowiązuje dla image i submit tylko typy wejściowe. Aby uzyskać więcej informacji, zobacz typ danych wejściowych przesyłania.

height

Dotyczy tylko przycisku wprowadzania image, height to wysokość pliku obrazu, który ma być wyświetlany w celu przedstawienia graficznego przycisku przesyłania. Zobacz typ danych wejściowych obrazu.

id

Globalny atrybut ważny dla wszystkich elementów, w tym wszystkich typów wejściowych, definiuje unikalny identyfikator (ID), który musi być unikalny w całym dokumencie. Jego celem jest identyfikacja elementu podczas łączenia. Wartość jest używana jako wartość atrybutu <label> „s for, aby połączyć etykietę z kontrolką formularza. Patrz <label>.

inputmode

Globalna wartość ważna dla wszystkich elementów, zawiera wskazówkę dla przeglądarek co do typu konfiguracji wirtualnej klawiatury użyj podczas edycji tego elementu lub jego zawartości. Wartości to none, text, tel, url, email, numeric, decimal i search.

list

Wartość nadana atrybutowi list powinna być id elementu <datalist> znajdującego się w tym samym dokumencie. <datalist> zawiera listę wstępnie zdefiniowanych wartości, które należy zasugerować użytkownikowi w przypadku wprowadzenia danych. Żadne wartości na liście, które nie są zgodne z type, nie są uwzględniane w sugerowanych opcjach. Podane wartości to sugestie, a nie wymagania: użytkownicy mogą wybrać z tej predefiniowanej listy lub podać inną wartość.

Obowiązuje ona na text, search, url, tel, email, date, month, week, time, datetime-local, number, range i color.

Zgodnie ze specyfikacjami atrybut list nie jest obsługiwany przez hidden, password, checkbox, radio, file lub dowolne typów przycisków.

W zależności od przeglądarki, użytkownik może zobaczyć sugerowaną niestandardową paletę kolorów, znaczniki w zakresie, a nawet wejście, które otwiera się jak <select>, ale zezwala na niewymienione va lues. Sprawdź tabelę zgodności przeglądarki dla innych typów danych wejściowych.

Zobacz element <datalist>.

max

Obowiązuje dla date, month, week, time, datetime-local, number i range – definiuje największa wartość w zakresie dopuszczalnych wartości. Jeśli wartość value wprowadzona do elementu przekracza tę wartość, element nie przechodzi weryfikacji ograniczenia. Jeśli wartością atrybutu max nie jest „ta liczba”, element nie ma wartości maksymalnej.

Jest specjalny przypadek: jeśli typ danych jest okresowy (np. dat lub godzin), wartość max może być niższa niż wartość min, co oznacza, że zakres może zawiń; na przykład umożliwia określenie zakresu czasu od 22:00 do 4:00.

maxlength

Obowiązuje dla text, search, url, tel, i password, określa maksymalną liczbę znaków (jako jednostki kodu UTF-16), które użytkownik może wprowadzić w polu. Musi to być liczba całkowita 0 lub nowszy. Jeśli nie określono maxlength lub określono nieprawidłową wartość, pole nie ma maksymalnej długości. Ta wartość również musi być większe lub równe wartości .

Dane wejściowe nie przejdą weryfikacji ograniczenia, jeśli długość tekstu wprowadzonego w polu jest większa niż maxlength Długość jednostek kodu UTF-16. Domyślnie przeglądarki uniemożliwiają użytkownikom wprowadzenie większej liczby znaków, niż zezwala na to atrybut maxlength. Aby uzyskać więcej informacji, zobacz Walidacja po stronie klienta.

min

Obowiązuje dla date, month, week, time, datetime-local, number i range, definiuje najbardziej ujemną wartość z zakresu dozwolonych wartości. Jeśli value wpisane do elementu jest mniejsze niż to, element nie przejdzie weryfikacji ograniczenia. Jeśli wartością atrybutu min nie jest „ta liczba”, element nie ma wartości minimalnej.

Ta wartość musi być mniejsza lub równa wartości atrybut max. Jeśli atrybut min istnieje, ale nie jest określony lub jest nieprawidłowy, nie min jest stosowana. Jeśli atrybut min jest prawidłowy, a niepusta wartość jest mniejsza niż minimum dozwolone przez min atrybut, walidacja ograniczenia uniemożliwi przesłanie formularza. Aby uzyskać więcej informacji, zobacz Walidacja po stronie klienta.

Istnieje specjalny przypadek: jeśli typ danych jest okresowy (na przykład dla dat lub godzin), wartość max może być niższa niż wartość min, co oznacza, że zakres może się zawijać; na przykład pozwala to określić czas zakres od 22:00 do 4:00.

minlength

Obowiązuje dla text, search, url, tel, email i password, określa minimalną liczbę znaków (jako jednostki kodu UTF-16), jaką użytkownik może wprowadzić w polu wprowadzania. Musi to być nieujemna liczba całkowita mniejsza lub równa wartości określonej przez maxlength. Jeśli nie określono minlength lub określono nieprawidłową wartość, dane wejściowe nie mają minimalnej długości.

Dane wejściowe nie przejdą weryfikacji ograniczenia, jeśli długość tekstu wpisany w polu jest mniejszy niż minlength jednostki kodu UTF-16, co uniemożliwia przesłanie formularza. Aby uzyskać więcej informacji, zobacz Walidacja po stronie klienta.

multiple

Boolean multiple atrybut, jeśli jest ustawiony, oznacza użytkownika może wprowadzić adresy e-mail oddzielone przecinkami w widżecie poczty e-mail lub wybrać więcej niż jeden plik za pomocą danych wejściowych file. Zobacz e-mail i typ danych wejściowych w pliku.

name

Ciąg określający nazwę kontrolki wejściowej. Ta nazwa jest przesyłana wraz z wartością kontrolki podczas przesyłania danych formularza.

Co zawiera nazwa

Rozważmy name wymagany atrybut (nawet jeśli nie jest). Jeśli wejście nie ma określonego elementu name lub name jest puste, wartość wejściowa nie została przesłana w formularzu! (Wyłączone elementy sterujące, niezaznaczone przyciski opcji, niezaznaczone pola wyboru i przyciski resetowania również nie są wysyłane).

Istnieją dwa specjalne przypadki:

  1. _charset_: jeśli jest używany jako nazwa elementu <input> typu ukrytego, wartość wejściowa „s value jest automatycznie ustawiana przez klienta użytkownika na kodowanie znaków używane do przesyłania formularza.
  2. isindex: Ze względów historycznych nazwa isindex jest niedozwolone.
nazwa i przyciski opcji

Atrybut name tworzy unikalne zachowanie dla przycisków radiowych.

Tylko jeden przycisk opcji w grupie przycisków o tej samej nazwie może być zaznaczony naraz. Zaznaczenie dowolnego przycisku w tej grupie powoduje automatyczne odznaczenie dowolnego aktualnie wybranego przycisku w tej samej grupie. Wartość parametru że jeden zaznaczony przycisk opcji jest wysyłany wraz z nazwą, jeśli formularz zostanie przesłany,

Podczas przechodzenia do serii takich samych -named grupa przycisków radiowych, jeśli jest zaznaczona, to otrzyma fokus. Jeśli nie są zgrupowane razem w kolejności źródłowej, jeśli jedna z grup jest zaznaczona, przechodzenie do grupy rozpoczyna się po napotkaniu pierwszej z grupy, pomijając te, które nie są zaznaczone. Innymi słowy, jeśli jeden jest zaznaczony, tabulacja pomija niezaznaczone przyciski opcji w grupie. Jeśli żaden nie jest zaznaczony, grupa przycisków radiowych otrzyma fokus, gdy osiągnięty zostanie pierwszy przycisk w grupie o tej samej nazwie.

Gdy jeden z przycisków radiowych w grupie stanie się aktywny, użycie klawiszy strzałek spowoduje nawigację po wszystkich przyciski opcji o tej samej nazwie, nawet jeśli przyciski opcji nie są zgrupowane razem w kolejności źródłowej.

HTMLFormElement.elements

Gdy element wejściowy otrzyma , ta nazwa staje się właściwością elementu formularza będącego właścicielem właściwości „s HTMLFormElement.elements. Jeśli masz dane wejściowe, których name ma wartość guest, a inny, którego name to hat-size, następujący kod można użyć:

Po uruchomieniu tego kodu guestName będzie HTMLInputElement dla pola guest i hatSize dla obiektu hat-size pole.

Ostrzeżenie: Unikaj nadawania elementom formularza name, które odpowiada wbudowanej właściwości formularza, ponieważ wówczas nadpisałbyś predefiniowaną właściwość lub metodę tym odniesieniem do odpowiedniego wejścia.

pattern

Atrybut pattern, jeśli jest określony, jest wyrażeniem regularnym, które input „s value musi być zgodny, aby wartość przeszła walidację ograniczenia. Musi to być prawidłowe wyrażenie regularne JavaScript używane przez typ RegExp i zgodnie z opisem w naszym przewodniku po wyrażeniach regularnych; flaga "u" jest określana podczas kompilowania wyrażenia regularnego, dzięki czemu wzorzec jest traktowany jako sekwencja punktów kodowych Unicode, a nie ASCII. Nie należy podawać żadnych ukośników dookoła tekstu wzoru.

Jeśli atrybut pattern jest obecny, ale nie jest określony lub jest nieprawidłowy, nie jest stosowane żadne wyrażenie regularne. atrybut jest całkowicie ignorowany.Jeśli atrybut wzorca jest prawidłowy, a niepusta wartość nie pasuje do wzorca, walidacja ograniczenia uniemożliwi przesłanie formularza.

Wskazówka: jeśli używasz pattern, informuje użytkownika o oczekiwanym formacie, dołączając obok tekst wyjaśniający. Możesz również dołączyć atrybut title, aby wyjaśnić, jakie wymagania mają być zgodne z wzorcem; większość przeglądarek wyświetli ten tytuł jako podpowiedź. Widoczne wyjaśnienie jest wymagane dla dostępności. Podpowiedź jest ulepszeniem.

Więcej informacji można znaleźć w sekcji Walidacja po stronie klienta.

placeholder

Atrybut placeholder to ciąg znaków, który zawiera krótką wskazówkę dla użytkownika, jakiego rodzaju informacji oczekuje się w polu. Powinno to być słowo lub krótka fraza, która zawiera wskazówkę dotyczącą oczekiwanego rodzaju danych, a nie wyjaśnienie lub podpowiedź. Tekst nie może zawierać powrotu karetki ani nowych wierszy. Na przykład, jeśli pole ma przechwytywać imię użytkownika, a jego etykieta to „Imię”, odpowiednim symbolem zastępczym może być „np. Mustafa ”.

Uwaga: atrybut placeholder nie jest tak przydatny semantycznie, jak inne sposoby wyjaśniania formularza i może powodować nieoczekiwane problemy techniczne z content. Zobacz Etykiety w < input >: Element Input (Form Input), aby uzyskać więcej informacji.

readonly

Atrybut logiczny, który, jeśli jest obecny, wskazuje, że użytkownik nie powinien mieć możliwości edytowania wartości wejścia. readonly jest obsługiwany text, search, url, tel, email, date, month, week, time, datetime-local, number i password typy danych wejściowych.

Aby uzyskać więcej informacji, zobacz atrybut HTML: readonly.

required to atrybut logiczny, który, jeśli jest obecny, wskazuje, że użytkownik musi określić wartość dla danych wejściowych, zanim będzie można przesłać formularz będący właścicielem. Atrybut required jest obsługiwany przez text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio i file dane wejściowe.

Aby uzyskać więcej informacji, zobacz Walidacja po stronie klienta i atrybut HTML: required.

sizeObowiązuje naemail,password,telitextinputtylko typy. Określa, jaka część danych wejściowych jest wyświetlana. Zasadniczo daje taki sam wynik, jak ustawienie właściwości CSSwidthz kilkoma specjalnościami. Rzeczywista jednostka wartości zależy od typu wejścia. W przypadkupassworditextjest to liczba znaków (lub jednostekem) z domyślną wartością jest20, a dla innych jest topixels. Szerokość CSS ma pierwszeństwo przed atrybutem rozmiaru.src

Dotyczy tylko przycisku wprowadzania image, src określa ciąg znaków adres URL pliku obrazu, który ma być wyświetlany w celu przedstawienia graficznego przycisku przesyłania. Zobacz typ wejścia obrazu.

step

Prawidłowe dla liczbowych typów danych wejściowych, w tym number, data / time, a range, atrybut step to liczba określająca szczegółowość, z jaką wartość musi być zgodna.

Jeśli nie zostanie podane jawnie:

  • step domyślnie 1 dla number i range.
  • W przypadku typów danych typu data / czas step jest wyrażane w sekundach, przy czym domyślny krok to 60 sekund . Współczynnik skali kroku to 1000 (co konwertuje sekundy na milisekundy, jak jest to używane w innych algorytmach).

Wartość musi być liczbą dodatnią – całkowitą lub zmiennoprzecinkową – albo wartością specjalną any, co oznacza, że żaden krok nie jest domniemany i każda wartość jest dozwolona (z wyjątkiem innych ograniczeń, takich jak min i max).

Jeśli any nie jest ustawione wprost, prawidłowe wartości dla number, typów danych wejściowych daty / godziny i range typy danych wejściowych są równe podstawie stopniowania – min wartość i przyrosty wartości kroku, aż do max, jeśli została określona.

Na przykład, jeśli masz <input type="number" min="10" step="2">, to dowolna parzysta liczba całkowita, 10 lub nowszy, jest prawidłowy. Jeśli zostanie pominięty, <input type="number">, każda liczba całkowita jest prawidłowa, ale liczby zmiennoprzecinkowe (takie jak 4.2) są nieprawidłowe, ponieważ step domyślnie 1. Aby 4.2 było prawidłowe, step musiałoby być ustawione na any, 0,1 , 0.2 lub dowolna wartość min musiałaby być liczbą kończącą się na .2, na przykład <input type="number" min="-5.2">

Uwaga: jeśli dane wprowadzone przez użytkownika nie są zgodne z konfiguracją krokową, wartość jest uznawana za nieprawidłową w walidacji przeciwstawnej i będzie pasować do :invalid pseudoklasa.

Aby uzyskać więcej informacji, zobacz Walidacja po stronie klienta.

tabindex

Atrybut globalny ważny dla wszystkich elementów, w tym wszystkich typów wejściowych, atrybut liczby całkowitej wskazujący, czy element może mieć fokus wejściowy (jest aktywny), czy powinien uczestniczyć w sekwencyjnej nawigacji klawiaturowej. Jak wszystkie typy danych wejściowych z wyjątkiem danych wejściowych typu ukrytego można się skupić, ten atrybut nie powinien być używany w kontrolkach formularza, ponieważ wymagałoby to zarządzania foc zamawiamy wszystkie elementy w dokumencie, co grozi pogorszeniem użyteczności i dostępności w przypadku nieprawidłowego wykonania.

title

Globalny atrybut ważny dla wszystkich elementów, w tym wszystkich typów danych wejściowych zawierający tekst przedstawiający informacje doradcze związane z elementem, do którego należy. Takie informacje mogą zazwyczaj, ale nie muszą, być prezentowane użytkownikowi jako podpowiedź. Tytuł NIE powinien być używany jako podstawowe wyjaśnienie celu kontrolki formularza. Zamiast tego użyj elementu <label> z atrybutem for ustawionym na kontrolkę formularza „s id. Zobacz Etykiety poniżej.

type

Ciąg określający typ kontrolki do renderowania. Na przykład, aby utworzyć pole wyboru, wartość checkbox. Jeśli pominięto (lub określono nieznaną wartość), używany jest typ wejściowy text, tworząc pole wejściowe w postaci zwykłego tekstu.

Dozwolone wartości są wymienione w typach <input> powyżej.

value

Wartość kontrolki wejściowej. Podana w kodzie HTML jest to wartość początkowa i od tej pory można ją zmienić lub pobrać w dowolnym momencie za pomocą JavaScript w celu uzyskania dostępu do odpowiedniego HTMLInputElement obiektu „s value. Atrybut value jest zawsze opcjonalny, chociaż powinien być uważany za obowiązkowy w przypadku checkbox, radio i hidden.

width

Dotyczy image tylko przycisk wejściowy, width to szerokość pliku obrazu, który ma być wyświetlany w celu przedstawienia graficznego przycisku przesyłania. Zobacz typ wejścia obrazu.

Leave a Reply

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *