Autor publikacji
Virtual Patriot - Administrator

input

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu input

Element input reprezentuje określonego typu element formularza HTML.

Element formularza HTML zazwyczaj stanowi pole na daną w postaci wartości, która może zostać samodzielnie wybrana lub wprowadzona przez użytkownika.

Dodatkowe artykuły związane z elementem input

Informacje techniczne o elemencie input

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<form>
  <label>Wybierz Twój ulubiony kolor: <input type="color"></label>
  <button type="submit">zatwierdź</button>
</form>

Kontekstem zewnętrznym przykładowego elementu "input" jest element "label". Wspomniany element "label" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "label", jest prawidłowym kontekstem zewnętrznym dla elementu "input".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty

  • atrybut alt, lecz tylko wtedy gdy dany element input posiada atrybut type o wartości image

  • atrybut value, lecz tylko wtedy gdy dany element input posiada atrybut type o wartości button

zdolność fallback

nie dotyczy

składnia HTML

<input>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

inline-block

Przypuszczalnie domyślne reguły CSS elementu input

input {
  display:inline-block;
  font-size:13px;
  font-family:sans-serif;
  background-color:white;
  color:black;
  padding:2px;
  border-width:1px;
  border-style:inset;
  border-color:black;
  box-shadow:0 0 2px 1px red;
  /*
    właściwość "box-shadow" w tym wypadku uaktywnia się,
    w momencie gdy zasada,
    którą określa atrybut "required" danego elementu "input",
    nie została spełniona przez użytkownika
  */
}

input:focus {
  border-color:blue;
  outline-color:blue;
}

input:hover {
  border-color:blue;
}

input:disabled {
  cursor:default;
  background-color:#DDD;
  color:#888;
  border-color:#888;
  outline-color:#888;
}

Interpretacja elementu input

Firefox

tak

Nie interpretuje atrybutu dirname.

Nie interpretuje wartości datetime-local, month oraz week atrybutu type.

Google Chrome

tak

Safari

tak

Nie interpretuje wartości date, datetime-local, month, time oraz week atrybutu type.

Opera

tak

Internet Explorer

tak

Interpretuje atrybut accept, autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, list, max, min, multiple, pattern, placeholder, required oraz step, lecz od wersji "10".

Interpretuje wartość email, range, tel oraz url atrybutu type, lecz od wersji "10".

Nie interpretuje atrybutu dirname, form oraz minlength.

Nie interpretuje wartości color, date, datetime-local, month, number, time oraz week atrybutu type.

Edge

tak

Opis atrybutów elementu input

Atrybut Lokalny

accept

Przeznaczenie atrybutu accept

Atrybut accept wykorzystany wraz z elementem input pozwala nam określić akceptowalny przez przeglądarkę internetową typ pliku, który może zostać wybrany przez użytkownika za pośrednictwem danego elementu input.

Atrybut "accept" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość file.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu accept

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik" accept="text/html">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest plik typu HTML, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "text/html".

rozszerzenie pliku

Należy podać rozszerzenie pliku bezpośrednio po znaku . (kropka).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik" accept=".html">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest plik typu HTML, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością ".html".

image/*

Wartość image/* oznacza, że każdy plik reprezentujący obrazek jest akceptowalny.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik" accept="image/*">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest dowolny plik reprezentujący obrazek, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "image/*".

audio/*

Wartość audio/* oznacza, że każdy plik reprezentujący dźwięk jest akceptowalny.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik" accept="audio/*">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest dowolny plik reprezentujący dźwięk, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "audio/*".

video/*

Wartość video/* oznacza, że każdy plik reprezentujący wideo jest akceptowalny.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik" accept="video/*">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest dowolny plik reprezentujący wideo, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "video/*".

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie jednym znakiem przecinka oraz ewentualnie przynajmniej jednym znakiem spacji, dzięki czemu za pośrednictwem danego elementu input będzie mógł zostać wybrany plik różnego określonego typu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik" accept=".html, .css, .js, image/*">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest plik typu HTML, plik typu CSS, plik typu JS oraz dowolny plik reprezentujący obrazek, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z następującą kombinacją wartości ".html, .css, .js, image/*".

Atrybut Lokalny

alt

Przeznaczenie atrybutu alt

Atrybut alt wykorzystany wraz z elementem input pozwala nam określić treść alternatywną (zamienną) w postaci tekstu, który powinien pojawić się w miejsce obrazka reprezentowanego przez dany element input, w sytuacji gdy z jakiegoś powodu docelowy obrazek nie będzie mógł zostać obsłużony przez przeglądarkę internetową.

Atrybut "alt" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.

Atrybut "alt" jest atrybutem wymaganym elementu "input", lecz tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu alt

tekst

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas treści alternatywnej w postaci tekstu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="image" src="https://webkod.pl/files/html/przycisk-1.png" alt="zatwierdź">
    </form>

  </body>
</html>

Rezultat

Treścią alternatywną nieistniejącego obrazka "przycisk-1.png" reprezentowanego przez przykładowy element "input" posiadający atrybut "type" o wartości "image" jest treść alternatywna w postaci tekstu "zatwierdź", ponieważ do wspomnianego elementu "input" został dodany atrybut "alt" wraz z wartością "zatwierdź".

Atrybut Lokalny

autocomplete

Przeznaczenie atrybutu autocomplete

Atrybut autocomplete wykorzystany wraz z elementem input pozwala nam określić czy w momencie wprowadzania wartości do danego elementu input (przez użytkownika) mechanizm automatycznych podpowiedzi powinien być włączony, czy też nie.

Atrybut "autocomplete" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: color, date, datetime-local, email, month, number, password, range, search, tel, text, time, url lub week.

Atrybut "autocomplete" elementu "input" ma pierwszeństwo przed atrybutem autocomplete elementu form, z którym został powiązany dany element "input", jeżeli takie powiązanie istnieje.

Wartość domyślna

on (w każdej sytuacji)

Wartości atrybutu autocomplete

on

Wartość on oznacza, że mechanizm automatycznych podpowiedzi ma być włączony.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie" autocomplete="on">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W momencie wprowadzania wartości do przykładowego elementu "input" (przez użytkownika) mechanizm automatycznych podpowiedzi jest włączony, ponieważ do wspomnianego elementu "input" został dodany atrybut "autocomplete" wraz z wartością "on".

off

Wartość off oznacza, że mechanizm automatycznych podpowiedzi ma być wyłączony.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie" autocomplete="off">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W momencie wprowadzania wartości do przykładowego elementu "input" (przez użytkownika) mechanizm automatycznych podpowiedzi jest wyłączony, ponieważ do wspomnianego elementu "input" został dodany atrybut "autocomplete" wraz z wartością "off".

Atrybut Lokalny

autofocus

Przeznaczenie atrybutu autofocus

Atrybut autofocus wykorzystany wraz z elementem input pozwala nam określić czy dany element input powinien być traktowany przez przeglądarkę internetową jako element HTML, na którym w pierwszej kolejności powinien skupić się użytkownik.

Atrybut "autofocus" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość inna niż wartość hidden.

Maksymalnie tylko jeden element HTML znajdujący się w zawartości tego samego dokumentu HTML może posiadać atrybut "autofocus".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu autofocus

autofocus

Atrybut autofocus jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie" autofocus>
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

      <p>
        <button type="submit">zatwierdź</button>
      </p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "name" o wartości "imie" jest aktywny, gdyż przykładowy element "input" jest traktowany przez przeglądarkę internetową jako element HTML, na którym w pierwszej kolejności powinien skupić się użytkownik, ponieważ do wspomnianego elementu "input" został dodany atrybut "autofocus".

Atrybut Lokalny

checked

Przeznaczenie atrybutu checked

Atrybut checked wykorzystany wraz z elementem input pozwala nam określić czy pole wyboru reprezentowane przez dany element input domyślnie powinno być wybranym polem wyboru w grupie pól wyboru, do której należy dany element input.

Atrybut "checked" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: checkbox lub radio.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu checked

checked

Atrybut checked jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <fieldset>
        <legend>Płeć</legend>

        <p>
          <label>
            <input type="radio" name="plec" value="mezczyzna" checked>
            Mężczyzna
          </label>
        </p>

        <p>
          <label>
            <input type="radio" name="plec" value="kobieta">
            Kobieta
          </label>
        </p>
      </fieldset>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Płeć

W grupie pól wyboru typu "radio" o nazwie "plec" domyślnie wybranym polem wyboru jest pole wyboru reprezentowane przez przykładowy element "input" posiadający atrybut "value" o wartości "mezczyzna", ponieważ do wspomnianego elementu "input" został dodany atrybut "checked".

Atrybut Lokalny

dirname

Przeznaczenie atrybutu dirname

Atrybut dirname wykorzystany wraz z elementem input pozwala nam określić dodatkową nazwę, jaka powinna zostać przypisana do danego elementu input oraz jaką powinna posiadać dodatkowa dana reprezentowana przez dany element input, czyli dana przechowująca informację o kierunku tekstu, jaki posiada dany element input.

Informacja w postaci wartości ltr przechowywana przez daną oznacza kierunek od lewej do prawej, natomiast informacja w postaci wartości rtl przechowywana przez daną oznacza kierunek od prawej do lewej.

Ponadto docelowa dana może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input.

Atrybut "dirname" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: search lub text.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu dirname

dodatkowa nazwa

Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas dodatkowej nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie" dirname="kierunek">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Dodatkową nazwą, jaka została przypisana do przykładowego elementu "input", jest nazwa "kierunek", dlatego dodatkowa dana reprezentowana przez przykładowy element "input" będzie posiadała nazwę "kierunek", ponieważ do wspomnianego elementu "input" został dodany atrybut "dirname" wraz z wartością "kierunek".

Atrybut Lokalny

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem input pozwala nam określić czy dany element input powinien zostać wyłączony z interakcji z użytkownikiem.

Dana reprezentowana przez element "input", który jest wyłączony z interakcji z użytkownikiem, nie jest brana pod uwagę przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany wyłączony z interakcji element "input".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu disabled

disabled

Atrybut disabled jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kod dostępu:
          <input type="text" name="kod" value="opcja wyłączona" disabled>
        </label>
      </p>

      <p>
        <button type="submit">zatwierdź</button>
      <p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "name" o wartości "kod" został wyłączony z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "input" został dodany atrybut "disabled".

Atrybut Lokalny

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem input pozwala nam określić informację o tym, z którym elementem form powinien zostać powiązany dany element input.

Domyślnie element "input" jest powiązany z najbliższym elementem przodkiem będącym elementem form, jeżeli taki istnieje.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu form

form id

Należy podać wartość atrybutu id interesującego nas elementu form.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" id="formularz-1">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

    <label>
      Podaj kolor:
      <input type="text" name="kolor" form="formularz-1">
    </label>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "name" o wartości "kolor" został powiązany z elementem "form" posiadającym atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "input" został dodany atrybut "form" wraz z wartością "formularz-1".

Atrybut Lokalny

formaction

Przeznaczenie atrybutu formaction

Atrybut formaction wykorzystany wraz z elementem input pozwala nam określić adres zasobu internetowego, do którego powinny zostać przekazane dane formularza HTML podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input) przez użytkownika.

Atrybut "formaction" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.

Atrybut "formaction" ma pierwszeństwo przed atrybutem action elementu form, z którym został powiązany dany element "input".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

adres dokumentu HTML, w którego zawartości znajduje się dany element input (gdy nie podaliśmy wartości)

Wartości atrybutu formaction

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form>
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="submit" formaction="https://webkod.pl/php/submit-result.php" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", ponieważ do wspomnianego elementu "input" został dodany atrybut "formaction" wraz z wartością "https://webkod.pl/php/submit-result.php".

Atrybut Lokalny

formenctype

Przeznaczenie atrybutu formenctype

Atrybut formenctype wykorzystany wraz z elementem input pozwala nam określić informację o tym, jaki sposób kodowania danych powinien być właściwy dla danych formularza HTML podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input) przez użytkownika.

Atrybut "formenctype" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.

Atrybut "formenctype" ma pierwszeństwo przed atrybutem enctype elementu form, z którym został powiązany dany element "input".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

application/x-www-form-urlencoded (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu formenctype

application/x-www-form-urlencoded

Wartość application/x-www-form-urlencoded oznacza sposób kodowania danych, który jest właściwy dla danych formularza HTML, z którym nie został powiązany żaden element HTML, za pośrednictwem którego użytkownik może wybrać plik.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="submit" formenctype="application/x-www-form-urlencoded" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "application/x-www-form-urlencoded", ponieważ do wspomnianego elementu "input" został dodany atrybut "formenctype" wraz z wartością "application/x-www-form-urlencoded".

multipart/form-data

Wartość multipart/form-data oznacza sposób kodowania danych, który jest właściwy dla danych formularza HTML, z którym został powiązany przynajmniej jeden element HTML, za pośrednictwem którego użytkownik może wybrać plik.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post">
      <label>
        Wybierz plik:
        <input type="file" name="plik">
      </label>

      <input type="submit" formenctype="multipart/form-data" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "multipart/form-data", ponieważ do wspomnianego elementu "input" został dodany atrybut "formenctype" wraz z wartością "multipart/form-data".

text/plain

Wartość text/plain oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementu input, nie zostaną poddane żadnemu specyficznemu sposobowi kodowania.

Atrybut Lokalny

formmethod

Przeznaczenie atrybutu formmethod

Atrybut formmethod wykorzystany wraz z elementem input pozwala nam określić informację o tym, jaka metoda przekazania danych formularza HTML powinna być właściwa podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input) przez użytkownika.

Atrybut "formmethod" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.

Atrybut "formmethod" ma pierwszeństwo przed atrybutem method elementu form, z którym został powiązany dany element "input".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

get (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu formmethod

get

Wartość get oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementu input, zostaną przekazane do określonego zasobu internetowego za pomocą metody GET.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="submit" formmethod="get" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody GET, ponieważ do wspomnianego elementu "input" został dodany atrybut "formmethod" wraz z wartością "get".

post

Wartość post oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementu input, zostaną przekazane do określonego zasobu internetowego za pomocą metody POST.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="submit" formmethod="post" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody POST, ponieważ do wspomnianego elementu "input" został dodany atrybut "formmethod" wraz z wartością "post".

Atrybut Lokalny

formnovalidate

Przeznaczenie atrybutu formnovalidate

Atrybut formnovalidate wykorzystany wraz z elementem input pozwala nam określić czy mechanizm przeglądarki internetowej odpowiedzialny za ustaloną przez nas walidację wartości danych formularza HTML powinien pozostać nieaktywny w momencie próby zatwierdzenia formularza HTML (za pomocą danego elementu input) przez użytkownika.

Atrybut "formnovalidate" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.

Atrybut "formnovalidate" ma pierwszeństwo przed atrybutem novalidate elementu form, z którym został powiązany dany element "input".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu formnovalidate

formnovalidate

Atrybut formnovalidate jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}" required>
      </label>

      <input type="submit" value="zatwierdź" formnovalidate>
    </form>

  </body>
</html>

Rezultat

Mimo tego, że pierwszy przykładowy element "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", posiada atrybut "pattern" oraz atrybut "required", dana reprezentowana przez pierwszy przykładowy element "input" może posiadać dowolną wartość w momencie próby zatwierdzenia formularza HTML przez użytkownika, za pomocą drugiego przykładowego elementu "input", gdyż mechanizm przeglądarki internetowej odpowiedzialny za ustaloną przez nas walidację wartości danych formularza HTML jest nieaktywny, ponieważ do wspomnianego drugiego elementu "input" został dodany atrybut "formnovalidate".

Atrybut Lokalny

formtarget

Przeznaczenie atrybutu formtarget

Atrybut formtarget wykorzystany wraz z elementem input pozwala nam określić docelowy kontekst (miejsce), gdzie powinien zostać wczytany zasób internetowy, którego adres określa wartość atrybutu formaction danego elementu input lub którego adres określa wartość atrybutu action formularza HTML, z którym został powiązany dany element input.

Docelowe wczytanie się zasobu internetowego nastąpi w momencie gdy formularz HTML, z którym został powiązany dany element input, zostanie zatwierdzony przez użytkownika za pomocą danego elementu input.

Atrybut "formtarget" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.

Atrybut "formtarget" ma pierwszeństwo przed atrybutem target elementu form, z którym został powiązany dany element "input".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

_blank (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu formtarget

_blank

Wartość _blank wskazuje na nowy kontekst przeglądarki internetowej, na nowe miejsce, np. na nowe okno przeglądarki internetowej (nową zakładkę).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="submit" formtarget="_blank" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_blank".

_parent

Wartość _parent wskazuje na kontekst rodzica kontekstu przeglądarki internetowej, do którego należy dany element input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/input-formtarget-parent.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: input-formtarget-parent.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut formtarget - wartość _parent</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj imię:
            <input type="text" name="imie">
          </label>

          <input type="submit" formtarget="_parent" value="zatwierdź">
        </form>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "input" posiadający atrybut "type" o wartości "submit", jest element "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_parent".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "input", nie posiada kontekstu rodzica, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

_self

Wartość _self wskazuje na kontekst przeglądarki internetowej, do którego należy dany element input, np. na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub na aktualny element iframe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/input-formtarget-self.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: input-formtarget-self.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut formtarget - wartość _self</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj imię:
            <input type="text" name="imie">
          </label>

          <input type="submit" formtarget="_self" value="zatwierdź">
        </form>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "input" posiadający atrybut "type" o wartości "submit", jest element "iframe", dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_self".

_top

Wartość _top wskazuje na kontekst najdalszego przodka kontekstu przeglądarki internetowej, do którego należy dany element input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/input-formtarget-top.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: input-formtarget-top.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut formtarget - wartość _top</title>
      </head>
      <body>

        <form action="https://webkod.pl/php/submit-result.php">
          <label>
            Podaj imię:
            <input type="text" name="imie">
          </label>

          <input type="submit" formtarget="_top" value="zatwierdź">
        </form>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "input" posiadający atrybut "type" o wartości "submit", jest element "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_top".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "input", nie posiada kontekstu najdalszego przodka, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

iframe name

Należy podać wartość atrybutu name interesującego nas elementu iframe, dzięki czemu interesujący nas element iframe stanie się docelowym kontekstem.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe name="ramka-1"></iframe>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="submit" formtarget="ramka-1" value="zatwierdź">
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe" posiadającego atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "ramka-1".

Jeżeli w kontekście przeglądarki internetowej, do którego należy dany element "input" lub w kontekście rodzicu lub w kontekście przodku, nie znajduje się element iframe o wartości atrybutu name, którą podaliśmy, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _blank.

Możemy podać również wartość atrybutu name interesującego nas elementu object, lecz tylko wtedy gdy interesujący nas element object reprezentuje zasób internetowy pochodzący z technologii HTML.

Atrybut Lokalny

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem input pozwala nam określić wartość wysokości, jaką powinien posiadać dany element input.

Atrybut "height" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" height="30" alt="zatwierdź">
    </form>

  </body>
</html>

Rezultat

Wartość wysokości przykładowego elementu "input" posiadającego atrybut "type" o wartości "image" wynosi "30" pikseli, ponieważ do wspomnianego elementu "input" został dodany atrybut "height" wraz z wartością "30".

Atrybut Lokalny

list

Przeznaczenie atrybutu list

Atrybut list wykorzystany wraz z elementem input pozwala nam określić informację o tym, z którą predefiniowaną listą opcji wyboru reprezentowaną przez element datalist powinien zostać powiązany dany element input.

Atrybut "list" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: color, date, datetime-local, email, month, number, range, search, tel, text, time, url lub week.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu list

datalist id

Należy podać wartość atrybutu id interesującego nas elementu datalist.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj rodzaj muzyki:
        <input type="text" name="rodzaj-muzyki" list="lista-1">
      </label>

      <datalist id="lista-1">
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
        <option>classical</option>
      </datalist>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" został powiązany z predefiniowaną listą opcji wyboru reprezentowaną przez element "datalist" posiadający atrybut "id" o wartości "lista-1", ponieważ do wspomnianego elementu "input" został dodany atrybut "list" wraz z wartością "lista-1".

Atrybut Lokalny

max

Przeznaczenie atrybutu max

Atrybut max wykorzystany wraz z elementem input pozwala nam określić maksymalną wartość, jaka może zostać przypisana do danego elementu input oraz jaką może posiadać dana reprezentowana przez dany element input.

Atrybut "max" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, month, number, range, time lub week.

Wartość domyślna

BRAK (w każdej sytuacji), lecz tylko wtedy gdy dany element input nie posiada atrybutu type o wartości range, w przeciwnym przypadku wartość 100

Wartości atrybutu max

ciąg znaków

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Wybierz liczbę z zakresu od jeden do dziesięć:
        <input type="number" name="liczba" min="1" max="10" value="5">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Maksymalną wartością, jaka może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", jest wartość "10", ponieważ do wspomnianego elementu "input" został dodany atrybut "max" wraz z wartością "10".

Gdy dany element "input" posiada atrybut type o wartości week, o wartości month lub o wartości date, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie odpowiedniego zapisu daty (Standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości time, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie zapisu czasu (Standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości datetime-local, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie zapisu daty oraz czasu (Standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej lub w formie liczby całkowitej.

Atrybut Lokalny

maxlength

Przeznaczenie atrybutu maxlength

Atrybut maxlength wykorzystany wraz z elementem input pozwala nam określić maksymalną liczbę znaków, z jakich może składać się wartość, która może zostać przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input.

Atrybut "maxlength" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu maxlength

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj dowolny maksymalnie składający się z dziesięciu znaków ciąg znaków:
        <input type="text" name="ciag-znakow" maxlength="10">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", maksymalnie może składać się z dziesięciu znaków, ponieważ do wspomnianego elementu "input" został dodany atrybut "maxlength" wraz z wartością "10".

Docelowa wartość nie może być mniejsza niż wartość atrybutu minlength danego elementu "input".

Atrybut Lokalny

min

Przeznaczenie atrybutu min

Atrybut min wykorzystany wraz z elementem input pozwala nam określić minimalną wartość, jaka może zostać przypisana do danego elementu input oraz jaką może posiadać dana reprezentowana przez dany element input.

Atrybut "min" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, month, number, range, time lub week.

Wartość domyślna

BRAK (w każdej sytuacji), lecz tylko wtedy gdy dany element input nie posiada atrybutu type o wartości range, w przeciwnym przypadku wartość 0

Wartości atrybutu min

ciąg znaków

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Wybierz liczbę z zakresu od jeden do dziesięć:
        <input type="number" name="liczba" min="1" max="10" value="5">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Minimalną wartością, jaka może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", jest wartość "1", ponieważ do wspomnianego elementu "input" został dodany atrybut "min" wraz z wartością "1".

Gdy dany element "input" posiada atrybut type o wartości week, o wartości month lub o wartości date, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie odpowiedniego zapisu daty (Standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości time, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie zapisu czasu (Standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości datetime-local, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie zapisu daty oraz czasu (Standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej lub w formie liczby całkowitej.

Atrybut Lokalny

minlength

Przeznaczenie atrybutu minlength

Atrybut minlength wykorzystany wraz z elementem input pozwala nam określić minimalną liczbę znaków, z jakich powinna składać się wartość, która może zostać przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input.

Mowa tu o wartości, która nie jest wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input.

Atrybut "minlength" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu minlength

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj dowolny minimum składający się z pięciu znaków ciąg znaków:
        <input type="text" name="ciag-znakow" minlength="5">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W sytuacji gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", nie będzie wartością pustą, w momencie próby zatwierdzenia formularza HTML przez użytkownika, wtedy wspomniana wartość musi składać się przynajmniej z pięciu znaków, ponieważ do wspomnianego elementu "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", został dodany atrybut "minlength" wraz z wartością "5".

Docelowa wartość nie może być większa niż wartość atrybutu maxlength danego elementu "input".

Atrybut Lokalny

multiple

Przeznaczenie atrybutu multiple

Atrybut multiple wykorzystany wraz z elementem input pozwala nam określić czy wartość, jaka może zostać przypisana do danego elementu input oraz jaką może posiadać dana reprezentowana przez dany element input, może posiadać kilka osobnych wartości tego samego typu jednocześnie.

Atrybut "multiple" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email lub file.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu multiple

multiple

Atrybut multiple jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz pliki:
        <input type="file" name="pliki[]" multiple>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Za pośrednictwem przykładowego elementu "input" użytkownik może wybrać więcej niż jeden plik, ponieważ do wspomnianego elementu "input" został dodany atrybut "multiple" (wymagane przytrzymanie przycisku "LEWY ALT" lub przycisku "LEWY CTRL" podczas wyboru kolejnego pliku).

Atrybut Lokalny

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem input pozwala nam określić nazwę, jaka powinna zostać przypisana do danego elementu input oraz jaką powinna posiadać dana reprezentowana przez dany element input.

Docelowa nazwa między innymi może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input) przez użytkownika.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

nazwa

Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Nazwą, jaka została przypisana do przykładowego elementu "input", jest nazwa "imie", dlatego dana reprezentowana przez przykładowy element "input" będzie posiadała nazwę "imie", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "imie".

_charset_

Wartość _charset_ oznacza, że podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input, wartość posiadana przez daną, którą reprezentuje dany element input, będzie wartością wskazującą na system kodowania znaków, jaki został wykorzystany przez przeglądarkę internetową podczas docelowego procesu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="hidden" name="_charset_">
      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Nazwą, jaka została przypisana do przykładowego elementu "input" posiadającego atrybut "type" o wartości "hidden", jest nazwa "_charset_", dlatego dana reprezentowana przez przykładowy element "input" będzie posiadała nazwę "_charset_", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "_charset_".

Wartość "_charset_" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości hidden oraz nie posiada atrybutu value.

Atrybut Lokalny

pattern

Przeznaczenie atrybutu pattern

Atrybut pattern wykorzystany wraz z elementem input pozwala nam określić wzorzec dla wartości, jaka może zostać przypisana do danego elementu input oraz jaką może posiadać dana reprezentowana przez dany element input.

Mowa tu o wartości, która nie jest wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input.

Atrybut "pattern" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu pattern

RegExp

Należy podać ciąg znaków w formie wyrażenia regularnego języka programowania JavaScript.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W sytuacji gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", nie będzie wartością pustą, w momencie próby zatwierdzenia formularza HTML przez użytkownika, wtedy wspomniana wartość musi składać się dokładnie z czterech znaków mieszczących się w przedziale od "0" do "9", ponieważ do wspomnianego elementu "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", został dodany atrybut "pattern" wraz z wartością "[0-9]{4}".

Atrybut Lokalny

placeholder

Przeznaczenie atrybutu placeholder

Atrybut placeholder wykorzystany wraz z elementem input pozwala nam określić treść w postaci tekstu pełniącego rolę podpowiedzi dla użytkownika, jaka powinna pojawić się w widocznym obszarze danego elementu input w momencie gdy wartość, która może zostać przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input, jest wartością pustą.

Atrybut "placeholder" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, number, password, search, tel, text lub url.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu placeholder

tekst

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tekstu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}" placeholder="np. 1410" required>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W momencie gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", będzie wartością pustą, wtedy w widocznym obszarze przykładowego elementu "input" będzie widoczna treść w postaci ciągu znaków "np. 1410", ponieważ do wspomnianego elementu "input" został dodany atrybut "placeholder" wraz z wartością "np. 1410".

Atrybut Lokalny

readonly

Przeznaczenie atrybutu readonly

Atrybut readonly wykorzystany wraz z elementem input pozwala nam określić czy wartość, jaka została przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input, powinna pełnić rolę wartości tylko do odczytu, czyli takiej wartości, która nie może zostać zmieniona przez użytkownika.

Atrybut "readonly" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, email, month, number, password, search, tel, text, time, url lub week.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu readonly

readonly

Atrybut readonly jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <label>
        <input type="text" value="np. Jan" readonly>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartość, jaka została przypisana do przykładowego elementu "input" posiadającego atrybut "value" o wartości "np. Jan" oraz którą posiada dana reprezentowana przez przykładowy element "input" posiadający atrybut "value" o wartości "np. Jan", pełni rolę wartości tylko do odczytu, czyli takiej wartości, która nie może zostać zmieniona przez użytkownika, ponieważ do wspomnianego elementu "input" został dodany atrybut "readonly".

Atrybut Lokalny

required

Przeznaczenie atrybutu required

Atrybut required wykorzystany wraz z elementem input pozwala nam określić czy wartość, jaka może zostać przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input, powinna posiadać cechy wartości wymaganej, czyli takiej wartości, która nie może być wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input.

Atrybut "required" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: checkbox, date, datetime-local, email, file, month, number, password, radio, search, tel, text, time, url lub week.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu required

required

Atrybut required jest atrybutem logicznym elementu input.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie" required>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartość, jaka może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", jest wartością posiadającą cechy wartości wymaganej, ponieważ do wspomnianego elementu "input" został dodany atrybut "required".

Atrybut Lokalny

size

Przeznaczenie atrybutu size

Atrybut size wykorzystany wraz z elementem input pozwala nam określić domyślną liczbę znaków, które mogą być widoczne w obszarze szerokości danego elementu input.

Atrybut "size" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.

Wartość domyślna

20 (w każdej sytuacji)

Wartości atrybutu size

liczba

Należy podać liczbę całkowitą większą od zera.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}" size="4">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Domyślną liczbą znaków, które mogą być widoczne w obszarze szerokości przykładowego elementu "input", jest liczba "4", ponieważ do wspomnianego elementu "input" został dodany atrybut "size" wraz z wartością "4".

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem input pozwala nam określić adres obrazka, który chcemy, aby był reprezentowany przez dany element input.

Atrybut "src" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" height="30" alt="zatwierdź">
    </form>

  </body>
</html>

Rezultat

Obrazkiem reprezentowanym przez przykładowy element "input" posiadający atrybut "type" o wartości "image" jest obrazek "przycisk-01.png" znajdujący się pod adresem "https://webkod.pl/files/html/przycisk-01.png", ponieważ do wspomnianego elementu "input" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/przycisk-01.png".

Atrybut Lokalny

step

Przeznaczenie atrybutu step

Atrybut step wykorzystany wraz z elementem input pozwala nam określić informację o tym, o jaki zakres może zmieniać się wartość, która może zostać przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input.

Atrybut "step" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, month, number, range, time lub week.

Wartość domyślna

1 (w każdej sytuacji), lecz tylko wtedy gdy dany element input posiada atrybut type o wartości number lub o wartości range

1 (w każdej sytuacji), lecz tylko wtedy gdy dany element input posiada atrybut type o wartości date, o wartości week lub o wartości month, wartość 1 w tym wypadku oznacza jeden dzień (dla wartości date), jeden tydzień (dla wartości week) oraz jeden miesiąc (dla wartości month)

60 (w każdej sytuacji), lecz tylko wtedy gdy dany element input posiada atrybut type o wartości time lub o wartości datetime-local, wartość 60 w tym wypadku oznacza sześćdziesiąt sekund

Wartości atrybutu step

liczba

Należy podać liczbę większą od zera.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Wybierz liczbę dziesiętną z zakresu od zera do jeden:
        <input type="number" name="liczba" min="0" max="1" step="0.1" value="0.5">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", podczas próby wyboru przez użytkownika może zmieniać się o zakres "0.1", ponieważ do wspomnianego elementu "input" został dodany atrybut "step" wraz z wartością "0.1".

Gdy dany element "input" posiada atrybut type o wartości week, o wartości month, o wartości date, o wartości time lub o wartości datetime-local, wtedy wartością atrybutu "step" danego elementu "input" musi być ciąg znaków w formie liczby całkowitej.

Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "step" danego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej lub w formie liczby całkowitej.

any

Wartość any oznacza, że zakres, o jaki może zmieniać się wartość, która może zostać przypisana do danego elementu input oraz którą może posiadać dana reprezentowana przez dany element input, jest dowolnym (zazwyczaj najmniejszym możliwym) zakresem określonym przez przeglądarkę internetową.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Wybierz liczbę z zakresu od zera do stu:
        <input type="number" name="liczba" min="0" max="100" step="any" value="50">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", podczas próby wyboru przez użytkownika może zmieniać się o dowolny określony przez przeglądarkę internetową zakres, ponieważ do wspomnianego elementu "input" został dodany atrybut "step" wraz z wartością "any".

Atrybut Globalny

title

Przeznaczenie atrybutu title

Atrybut title wykorzystany wraz z elementem input pozwala nam określić treść w postaci tekstu pełniącego rolę wiadomości dla użytkownika, jaka powinna zostać wyświetlona w oknie przeglądarki internetowej w sytuacji gdy wprowadzona do danego elementu input wartość, przez użytkownika, nie zgadza się ze wzorcem, który został określony za pomocą wartości atrybutu pattern danego elementu input.

Atrybut "title" ma sens tylko wtedy gdy dany element "input" posiada atrybut pattern.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu title

tekst

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tekstu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}" title="wymaganym formatem jest czterocyfrowa liczba">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W sytuacji gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", nie będzie wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika oraz nie będzie zgadzać się ze wzorcem wartości określonym przez wartość atrybutu "pattern" przykładowego elementu "input", wtedy dla użytkownika w oknie przeglądarki internetowej zostanie wyświetlona treść w postaci tekstu "wymaganym formatem jest czterocyfrowa liczba", ponieważ do wspomnianego elementu "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", został dodany atrybut "title" wraz z wartością "wymaganym formatem jest czterocyfrowa liczba".

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem input pozwala nam określić informację o typie elementu formularza HTML, jaki powinien reprezentować dany element input.

Wartość domyślna

text (w każdej sytuacji)

Wartości atrybutu type

button

Wartość button oznacza, że dany element input reprezentuje klikalny przycisk, który domyślnie nie jest przeznaczony do żadnego konkretnego celu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <input type="button" value="przycisk">

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "button", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "button".

checkbox

Wartość checkbox oznacza, że dany element input reprezentuje pole wyboru typu checkbox, które może zostać zaznaczone przez użytkownika.

W sytuacji gdy do jednej grupy pól wyboru należy kilka pól wyboru typu checkbox, wtedy kilka pól wyboru typu checkbox może zostać zaznaczonych przez użytkownika.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Zgadzam się z zasadami regulaminu:
        <input type="checkbox" name="regulamin" value="true">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "checkbox", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "checkbox".

color

Wartość color oznacza, że dany element input reprezentuje paletę kolorów, z której użytkownik może wybrać interesujący go kolor.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Określ wartość koloru:
        <input type="color" name="kolor">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "color", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "color".

date

Wartość date oznacza, że dany element input reprezentuje kalendarz, z którego użytkownik może wybrać interesującą go datę (bez wskazania strefy czasowej).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Określ datę:
        <input type="date" name="data">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "date", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "date".

datetime-local

Wartość datetime-local oznacza, że dany element input reprezentuje kalendarz, z którego użytkownik może wybrać interesującą go datę oraz interesujący go czas (bez wskazania strefy czasowej).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Określ datę:
        <input type="datetime-local" name="data">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "datetime-local", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "datetime-local".

email

Wartość email oznacza, że dany element input reprezentuje pole na wartość w formie adresu email.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj adres email:
        <input type="email" name="adres-email">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "email", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "email".

file

Wartość file oznacza, że dany element input reprezentuje element formularza HTML, za pośrednictwem którego użytkownik może wybrać interesujący go plik.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "file", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "file".

hidden

Wartość hidden oznacza, że dany element input reprezentuje ukryte pole na wartość.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="hidden" name="kod" value="289382732">
      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "name" o wartości "kod" reprezentuje element formularza HTML typu "hidden", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "hidden".

image

Wartość image oznacza, że dany element input reprezentuje przycisk w formie obrazka służący do zatwierdzenia formularza HTML.

W sytuacji gdy formularz HTML zostanie zatwierdzony przez użytkownika za pomocą danego elementu input, wtedy do danych formularza HTML zostaną automatycznie dodane dwie dodatkowe dane. Docelowe dane będą posiadały informację o współrzędnych kliknięcia na obrazek reprezentowany przez dany element input.

Pierwsza z docelowych danych będzie posiadała nazwę x, natomiast druga z docelowych danych będzie posiadała nazwę y, jednak jeżeli dany element input posiada atrybut name, wtedy pierwsza z docelowych danych będzie posiadała nazwę składającą się z wartości atrybutu name danego elementu input oraz z ciągu znaków _x, a druga z docelowych danych będzie posiadała nazwę składającą się z wartości atrybutu name danego elementu input oraz z ciągu znaków _y.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" height="30" alt="zatwierdź">
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "alt" o wartości "zatwierdź" reprezentuje element formularza HTML typu "image", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "image".

Wartość "image" ma sens tylko wtedy gdy dany element "input" został powiązany z jakimkolwiek istniejącym formularzem HTML.

month

Wartość month oznacza, że dany element input reprezentuje kalendarz, z którego użytkownik może wybrać dowolny miesiąc interesującego go roku (bez wskazania strefy czasowej).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Określ miesiąc:
        <input type="month" name="miesiac">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "month", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "month".

number

Wartość number oznacza, że dany element input reprezentuje pole na wartość w formie liczby.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj dowolną liczbę:
        <input type="number" name="liczba">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "number", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "number".

password

Wartość password oznacza, że dany element input reprezentuje pole na wartość w formie dowolnego ciągu znaków, którego znaki podczas wprowadzania nie są widoczne dla wzroku użytkownika.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php" method="post">
      <label>
        Podaj hasło:
        <input type="password" name="haslo">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "password", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "password".

radio

Wartość radio oznacza, że dany element input reprezentuje pole wyboru typu radio, które może zostać zaznaczone przez użytkownika.

W sytuacji gdy do jednej grupy pól wyboru należy kilka pól wyboru typu radio, wtedy wyłącznie jedno pole wyboru typu radio może zostać zaznaczone przez użytkownika.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <fieldset>
        <legend>Płeć</legend>

        <p>
          <label>
            <input type="radio" name="plec" value="mezczyzna" checked>
            Mężczyzna
          </label>
        </p>

        <p>
          <label>
            <input type="radio" name="plec" value="kobieta">
            Kobieta
          </label>
        </p>
      </fieldset>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Płeć

Przykładowy element "input" posiadający atrybut "value" o wartości "mezczyzna" reprezentuje element formularza HTML typu "radio", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "radio".

range

Wartość range oznacza, że dany element input reprezentuje pole na wartość, która może zostać wybrana przez użytkownika z określonego zakresu wartości za pomocą suwaka.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Wybierz liczbę:
        <input type="range" name="liczba">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "range", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "range".

reset

Wartość reset oznacza, że dany element input reprezentuje przycisk służący do zresetowania do wartości domyślnych wartości posiadanych przez dane reprezentowane przez poszczególne elementy HTML formularza HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

      <p>
        <input type="reset" value="zresetuj">
        <input type="submit" value="zatwierdź">
      </p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "value" o wartości "zresetuj" reprezentuje element formularza HTML typu "reset", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "reset".

Wartość "reset" ma sens tylko wtedy gdy dany element "input" został powiązany z jakimkolwiek istniejącym formularzem HTML.

submit

Wartość submit oznacza, że dany element input reprezentuje przycisk służący do zatwierdzenia formularza HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

      <p>
        <input type="reset" value="zresetuj">
        <input type="submit" value="zatwierdź">
      </p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "value" o wartości "zatwierdź" reprezentuje element formularza HTML typu "submit", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "submit".

Wartość "submit" ma sens tylko wtedy gdy dany element "input" został powiązany z jakimkolwiek istniejącym formularzem HTML.

tel

Wartość tel oznacza, że dany element input reprezentuje pole na wartość w formie numeru telefonu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj numer telefonu:
        <input type="tel" name="numer-telefonu">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "tel", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "tel".

text

Wartość text oznacza, że dany element input reprezentuje pole na wartość w formie dowolnego ciągu znaków.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj dowolny ciąg znaków:
        <input type="text" name="ciag-znakow">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "text", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "text".

time

Wartość time oznacza, że dany element input reprezentuje pole na wartość w formie czasu (bez wskazania strefy czasowej).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Określ czas:
        <input type="time" name="czas">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "time", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "time".

url

Wartość url oznacza, że dany element input reprezentuje pole na wartość w formie pełnego adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj adres URL:
        <input type="url" name="adres-url">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "url", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "url".

week

Wartość week oznacza, że dany element input reprezentuje kalendarz, z którego użytkownik może wybrać dowolny tydzień interesującego go roku (bez wskazania strefy czasowej).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Określ tydzień:
        <input type="week" name="tydzien">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "input" reprezentuje element formularza HTML typu "week", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "week".

Atrybut Lokalny

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem input pozwala nam określić wartość domyślną, jaka powinna zostać przypisana do danego elementu input oraz jaką domyślnie powinna posiadać dana reprezentowana przez dany element input.

Docelowa wartość domyślna między innymi może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input.

Gdy dany element "input" posiada atrybut type o wartości submit, wtedy docelowa wartość domyślna jest brana pod uwagę przez przeglądarkę internetową podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, lecz tylko wtedy gdy formularz HTML został zatwierdzony za pomocą danego elementu "input".

Gdy dany element "input" posiada atrybut type o wartości button, o wartości image lub o wartości reset, wtedy docelowa wartość domyślna nie jest brana pod uwagę przez przeglądarkę internetową podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika.

Atrybut "value" jest atrybutem wymaganym elementu "input", lecz tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość button.

Wartość domyślna

wartość pusta (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu value

ciąg znaków

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości domyślnej.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie" value="Jan">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartością domyślną, jaka została przypisana do przykładowego elementu "input", jest wartość "Jan", dlatego dana o nazwie "imie", która jest reprezentowana przez przykładowy element "input", domyślnie będzie posiadała wartość "Jan", ponieważ do wspomnianego elementu "input" został dodany atrybut "value" wraz z wartością "Jan".

Forma docelowej wartości domyślnej uzależniona jest od posiadanej przez dany element "input" wartości atrybutu type.

Atrybut Lokalny

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem input pozwala nam określić wartość szerokości, jaką powinien posiadać dany element input.

Atrybut "width" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" width="150" alt="zatwierdź">
    </form>

  </body>
</html>

Rezultat

Wartość szerokości przykładowego elementu "input" posiadającego atrybut "type" o wartości "image" wynosi "150" pikseli, ponieważ do wspomnianego elementu "input" został dodany atrybut "width" wraz z wartością "150".