HTML
Elementy sterowania wejściami

Wprowadzenie

Składnia

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

Parametry

Uwagi

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ć.

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:

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.

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

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

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

<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

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

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

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

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.

Kolor

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

URL

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

Data

<input type="date" />

DateTime-Local

<input type="datetime-local" />

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

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

Miesiąc

<input type="month" />

Czas

<input type="time" />

19:04:39
08:20:39.04

Tydzień

<input type="week" />

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

<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ść