input

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

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

Wybierz plik: zatwierdź

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

Wybierz plik: zatwierdź

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

Wybierz plik: zatwierdź

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

Wybierz plik: zatwierdź

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

Wybierz plik: zatwierdź

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

Wybierz plik: zatwierdź

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

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

Podaj imię:

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

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

Podaj imię: zatwierdź

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

Podaj imię: zatwierdź

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

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

Zobacz rezultat: przykład atrybutu autofocus - element input

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

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ć

Mężczyzna

Kobieta

zatwierdź

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

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

Podaj imię: zatwierdź

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

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

Podaj imię:

Podaj kod dostępu:

zatwierdź

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

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

Podaj imię: zatwierdź

Podaj kolor:

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

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

Podaj imię:

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 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ą)

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

Podaj imię:

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

Wybierz plik:

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 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ą)

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

Podaj imię:

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

Podaj imię:

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

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

Podaj czterocyfrową liczbę:

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 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ą)

_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

Podaj imię:

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

Podaj imię:

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

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

Podaj imię:

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

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

Podaj rodzaj muzyki: zatwierdź

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

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

Wybierz liczbę z zakresu od jeden do dziesięć: zatwierdź

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

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

Podaj dowolny maksymalnie składający się z dziesięciu znaków ciąg znaków: zatwierdź

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

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

Wybierz liczbę z zakresu od jeden do dziesięć: zatwierdź

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

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

Podaj dowolny minimum składający się z pięciu znaków ciąg znaków: zatwierdź

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

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

Wybierz pliki: zatwierdź

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

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

Podaj imię: zatwierdź

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

Podaj imię: zatwierdź

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

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

Podaj czterocyfrową liczbę: zatwierdź

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

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

Podaj czterocyfrową liczbę: zatwierdź

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

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

Podaj imię: zatwierdź

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

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

Podaj imię: zatwierdź

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

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

Podaj czterocyfrową liczbę: zatwierdź

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

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

Podaj imię:

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

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

Wybierz liczbę dziesiętną z zakresu od zera do jeden: zatwierdź

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

Wybierz liczbę z zakresu od zera do stu: zatwierdź

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

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

Podaj czterocyfrową liczbę: zatwierdź

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

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

Zgadzam się z zasadami regulaminu: zatwierdź

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

Określ wartość koloru: zatwierdź

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

Określ datę: zatwierdź

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

Określ datę: zatwierdź

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

Podaj adres email: zatwierdź

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

Wybierz plik: zatwierdź

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

Podaj imię: zatwierdź

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

Podaj imię:

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

Określ miesiąc: zatwierdź

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

Podaj dowolną liczbę: zatwierdź

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

Podaj hasło: zatwierdź

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ć

Mężczyzna

Kobieta

zatwierdź

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

Wybierz liczbę: zatwierdź

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

Podaj imię:

Podaj kolor:

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.

search

Wartość search oznacza, że dany element input reprezentuje pole na wartość w formie dowolnego ciągu znaków, który jest szukanym ciągiem znaków 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>
        Szukaj:
        <input type="search" name="szukany-ciag-znakow">
      </label>

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

  </body>
</html>

Rezultat

Szukaj: zatwierdź

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

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

Podaj imię:

Podaj kolor:

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

Podaj numer telefonu: zatwierdź

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

Podaj dowolny ciąg znaków: zatwierdź

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

Określ czas: zatwierdź

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

Podaj adres URL: zatwierdź

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

Określ tydzień: zatwierdź

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

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

Podaj imię: zatwierdź

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

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

Podaj imię:

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