Autor publikacji
Virtual Patriot - Administrator

input

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu input

Element input reprezentuje określony przez nas typ elementu formularza HTML. Wspomniany element formularza HTML reprezentuje zazwyczaj pole na daną w postaci wartości, która może zostać samodzielnie wybrana lub wprowadzona przez użytkownika.

Dodatkowe techniczne informacje 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
składnia HTML

<input>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

inline-block

Dodatkowe domyślne reguły CSS elementu input

input {
  display:inline-block;
}

Interpretacja elementu input

Firefox

tak

Nie interpretuje atrybutu dirname.

Nie interpretuje wartości isindex atrybutu name.

Google Chrome

tak

Nie interpretuje wartości isindex atrybutu name.

Safari

tak

Nie interpretuje wartości isindex atrybutu name.

Nie interpretuje wartości date oraz time atrybutu type.

Opera

tak

Nie interpretuje wartości isindex atrybutu name.

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

Nie interpretuje atrybutu dirname, form oraz minlength.

Nie interpretuje wartości color, date, number oraz time atrybutu type.

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

Edge

tak

Nie interpretuje wartości isindex atrybutu name.

Opis atrybutów elementu input

accept

Przeznaczenie atrybutu accept

Atrybut accept wykorzystany wraz z elementem input określa 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 dany element "input" posiada atrybut type o wartości file.

Możemy podać kilka wartości oddzielonych od siebie dokładnie jednym znakiem przecinka.

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, text/css">
      </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 oraz plik typu CSS, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "text/html, text/css".

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, .css">
      </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 oraz plik typu CSS, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością ".html, .css".

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

alt

Przeznaczenie atrybutu alt

Atrybut alt wykorzystany wraz z elementem input określa treść alternatywną (zamienną) w postaci tekstu, który powinien pojawić się w oknie przeglądarki internetowej w sytuacji gdy obrazek reprezentowany przez dany element input nie może (z jakiegoś powodu) zostać obsłużony przez przeglądarkę internetową.

Atrybut "alt" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości image.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu alt

tekst alternatywny

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

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

Zasobem internetowym reprezentowanym przez przykładowy element "input" posiadający atrybut "type" o wartości "image" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/html/przycisk-1.png", jednak wspomniany adres obrazka jest nieprawidłowy, dlatego przeglądarka internetowa nie mogła wyświetlić w swoim oknie wspomnianego obrazka, lecz przeglądarka internetowa wyświetliła w swoim oknie treść alternatywną w postaci ciągu znaków "zatwierdź", ponieważ do wspomnianego elementu "input" został dodany atrybut "alt" wraz z wartością "zatwierdź".

autocomplete

Przeznaczenie atrybutu autocomplete

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

Atrybut "autocomplete" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email, password, date, time, number, range lub color.

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 przez użytkownika wartości do przykładowego elementu "input" 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 przez użytkownika wartości do przykładowego elementu "input" mechanizm automatycznych podpowiedzi jest wyłączony, ponieważ do wspomnianego elementu "input" został dodany atrybut "autocomplete" wraz z wartością "off".

autofocus

Przeznaczenie atrybutu autofocus

Atrybut autofocus wykorzystany wraz z elementem input określa 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.

Maksymalnie tylko jeden element HTML występujący 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">
      <label>
        Podaj imię:
        <input type="text" name="imie" autofocus>
      </label>

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

      <button type="submit">zatwierdź</button>
    </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ż wspomniany 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".

checked

Przeznaczenie atrybutu checked

Atrybut checked wykorzystany wraz z elementem input określa domyślnie wybrane pole wyboru reprezentowane przez dany element input.

Atrybut "checked" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: 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ć

Domyślnie wybranym polem wyboru w grupie pól wyboru reprezentowanej przez przykładowe elementy "input" posiadające atrybut "type" o wartości "radio" oraz posiadające atrybut "name" o wartości "plec" jest pole wyboru reprezentowane przez element "input" posiadający atrybut "value" o wartości "mezczyzna", ponieważ do wspomnianego elementu "input" został dodany atrybut "checked".

dirname

Przeznaczenie atrybutu dirname

Atrybut dirname wykorzystany wraz z elementem input określa nazwę dodatkowej danej, którą ma reprezentować dany element input oraz która ma przechowywać informację o kierunku tekstu, który posiada wspomniany element input. Wartość ltr oznacza kierunek od lewej do prawej. Wartość rtl oznacza kierunek od prawej do lewej. Ponadto wspomniana 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 wspomniany element input.

Atrybut "dirname" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text lub search.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu dirname

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" dirname="kierunek">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML zostanie zatwierdzony przez użytkownika przeglądarka internetowa otrzyma dodatkową daną posiadającą wartość określającą informację o kierunku tekstu, jaki posiadał przykładowy element "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", ponadto wspomniana dana zostanie przekazana przeglądarce internetowej jako dana o nazwie "kierunek", ponieważ do wspomnianego elementu "input" został dodany atrybut "dirname" wraz z wartością "kierunek".

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem input określa 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, z którym 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".

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem input określa, z którym elementem form powinien zostać powiązany dany element input.

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

Mimo że przykładowy element "input" posiadający atrybut "name" o wartości "kolor" nie znajduje się w zawartości elementu "form", wspomniany element "input" został powiązany z formularzem HTML reprezentowanym przez wspomniany element "form" posiadający atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "input" został dodany atrybut "form" wraz z wartością "formularz-1".

formaction

Przeznaczenie atrybutu formaction

Atrybut formaction wykorzystany wraz z elementem input określa adres zasobu internetowego, który powinien zostać wykorzystany przez przeglądarkę internetową podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, za pomocą danego elementu input.

Atrybut "formaction" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: submit lub image.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu formaction

URI

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

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", wspomniane dane 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", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formaction" wraz z wartością "https://webkod.pl/php/submit-result.php".

formenctype

Przeznaczenie atrybutu formenctype

Atrybut formenctype wykorzystany wraz z elementem input określa sposób kodowania danych, który powinien być właściwy podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, za pomocą danego elementu input.

Atrybut "formenctype" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: submit lub image.

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 przeznaczony jest dla 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", wspomniane dane zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "application/x-www-form-urlencoded", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", 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 przeznaczony jest dla 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", wspomniane dane zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "multipart/form-data", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", 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 pomocą formularza HTML, z którym został powiązany dany element input nie zostaną poddane żadnemu specyficznemu sposobowi kodowania.

formmethod

Przeznaczenie atrybutu formmethod

Atrybut formmethod wykorzystany wraz z elementem input określa metodę przekazania danych, która powinna być właściwa podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, za pomocą danego elementu input.

Atrybut "formmethod" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: submit lub image.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu formmethod

get

Wartość get sprawia, że dane uzyskane przez przeglądarkę internetową za pomocą formularza HTML, z którym został powiązany dany element 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", wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniane przekazanie danych zostanie dokonane za pomocą metody GET, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formmethod" wraz z wartością "get".

post

Wartość post sprawia, że dane uzyskane przez przeglądarkę internetową za pomocą formularza HTML, z którym został powiązany dany element 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", wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniane przekazanie danych zostanie dokonane za pomocą metody POST, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formmethod" wraz z wartością "post".

formnovalidate

Przeznaczenie atrybutu formnovalidate

Atrybut formnovalidate wykorzystany wraz z elementem input określa czy mechanizm przeglądarki internetowej odpowiedzialny za domyślną walidację wartości danych powinien pozostać nieaktywny w momencie próby zatwierdzenia formularza HTML przez użytkownika, za pomocą danego elementu input.

Atrybut "formnovalidate" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: submit lub image.

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

Ponieważ do elementu "input" posiadającego atrybut "name" o wartości "liczba" został dodany atrybut "pattern" oraz atrybut "required" wartość posiadana przez daną (którą reprezentuje wspomniany element "input") musi posiadać określony format oraz nie powinna być wartością pustą przed próbą zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element "input", jednak w momencie próby zatwierdzenia przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit" wspomnianego formularza HTML, domyślna walidacja wartości danych jest wyłączona, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formnovalidate".

formtarget

Przeznaczenie atrybutu formtarget

Atrybut formtarget wykorzystany wraz z elementem input określa kontekst (miejsce) wczytania się zasobu internetowego, którego adres został określony przez wartość atrybutu action formularza HTML, z którym został powiązany dany element input. Wspomniane wczytanie zasobu internetowego nastąpi w momencie gdy wspomniany formularz HTML zostanie zatwierdzony przez użytkownika za pomocą wspomnianego elementu input.

Atrybut "formtarget" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: submit lub image.

Wartość domyślna

_self (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. Na przykład 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", wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniany zasób internetowy "submit-result.php" 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 HTML PLIKU - input-formtarget-parent.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <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

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" oraz znajdującego się w elemencie "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniany zasób internetowy "submit-result.php" zostanie wczytany do kontekstu rodzica wspomnianego 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ą "_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 aktualny kontekst przeglądarki internetowej, do którego należy dany element input. Na przykład na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub 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 HTML PLIKU - input-formtarget-self.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <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

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" oraz którego aktualnym kontekstem jest element "iframe", w którym to elemencie "iframe" znajduje się wspomniany element "input", wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniany zasób internetowy "submit-result.php" zostanie wczytany do wspomnianego 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 HTML PLIKU - input-formtarget-top.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <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

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" oraz znajdującego się w elemencie "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniany zasób internetowy "submit-result.php" zostanie wczytany do kontekstu najdalszego przodka wspomnianego 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ą "_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", wspomniane dane zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się na serwerze o nazwie "webkod.pl", ponadto wspomniany zasób internetowy "submit-result.php" zostanie wczytany do elementu "iframe", który posiada 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 danym 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 wspomniany element object reprezentuje zasób internetowy w postaci dokumentu HTML.

height

Przeznaczenie atrybutu height

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

Atrybut "height" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości 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".

list

Przeznaczenie atrybutu list

Atrybut list wykorzystany wraz z elementem input określa, z którą predefiniowaną listą opcji wyboru powinien zostać powiązany dany element input.

Atrybut "list" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email, date, time, number, range lub color.

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

Ponieważ do przykładowego elementu "input" został dodany atrybut "list" wraz z wartością "lista-1" wspomniany element "input" został powiązany z predefiniowaną listą opcji wyboru reprezentowaną przez element "datalist" posiadający atrybut "id" o wartości "lista-1", dzięki czemu podczas wprowadzania przez użytkownika wartości do wspomnianego elementu "input", użytkownik może skorzystać ze wspomnianej predefiniowanej listy opcji wyboru.

max

Przeznaczenie atrybutu max

Atrybut max wykorzystany wraz z elementem input określa maksymalną wartość, jaką może posiadać dana reprezentowana przez dany element input.

Atrybut "max" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: date, time, number lub range.

Wartość domyślna

BRAK (w każdej sytuacji)

jednak jeżeli element input posiada atrybut type o wartości range, wtedy w każdej sytuacji wartością domyślną atrybutu max elementu input jest 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ą, jaką może posiadać dana reprezentowana przez przykładowy element "input" posiadający atrybut "type" o wartości "number" 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 date, wtedy wartością atrybutu "max" wspomnianego elementu "input" musi być ciąg znaków w formie standardu daty (standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości time, wtedy wartością atrybutu "max" wspomnianego elementu "input" musi być ciąg znaków w formie standardu 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" wspomnianego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej.

maxlength

Przeznaczenie atrybutu maxlength

Atrybut maxlength wykorzystany wraz z elementem input określa maksymalną liczbę znaków, z których może składać się wartość posiadana przez daną, którą reprezentuje dany element input.

Atrybut "maxlength" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email lub password.

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

Dana reprezentowana przez przykładowy element "input" może posiadać wartość składającą się maksymalnie z dziesięciu znaków, ponieważ do wspomnianego elementu "input" został dodany atrybut "maxlength" wraz z wartością "10".

min

Przeznaczenie atrybutu min

Atrybut min wykorzystany wraz z elementem input określa minimalną wartość, jaką może posiadać dana reprezentowana przez dany element input.

Atrybut "min" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: date, time, number lub range.

Wartość domyślna

BRAK (w każdej sytuacji)

jednak jeżeli element input posiada atrybut type o wartości range, wtedy w każdej sytuacji wartością domyślną atrybutu min elementu input jest 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ą, jaką może posiadać dana reprezentowana przez przykładowy element "input" posiadający atrybut "type" o wartości "number" 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 date, wtedy wartością atrybutu "min" wspomnianego elementu "input" musi być ciąg znaków w formie standardu daty (standard ISO-8601).

Gdy dany element "input" posiada atrybut type o wartości time, wtedy wartością atrybutu "min" wspomnianego elementu "input" musi być ciąg znaków w formie standardu 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" wspomnianego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej.

minlength

Przeznaczenie atrybutu minlength

Atrybut minlength wykorzystany wraz z elementem input określa minimalną liczbę znaków, z których powinna składać się niepusta wartość posiadana przez daną, przed próbą zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input reprezentujący wspomnianą daną.

Atrybut "minlength" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email lub password.

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

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

  </body>
</html>

Rezultat

Gdy dana reprezentowana przez przykładowy element "input" posiada wartość, która nie jest wartością pustą, wtedy wspomniana wartość musi składać się przynajmniej z pięciu znaków przed próbą zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element "input", ponieważ do wspomnianego elementu "input" został dodany atrybut "minlength" wraz z wartością "5".

multiple

Przeznaczenie atrybutu multiple

Atrybut multiple wykorzystany wraz z elementem input określa czy 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 dany element "input" posiada atrybut type o wartości: 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 ALT lub przycisku CTRL podczas wyboru kolejnych plików).

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem input określa nazwę, jaką powinna posiadać dana reprezentowana przez dany element input oraz która to nazwa 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 wspomniany element input.

Atrybut "name" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o jakiejkolwiek wartości tylko nie wartości button.

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 wspomniany element "input" będzie posiadała nazwę "imie", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "imie".

isindex

Wartość isindex 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 wspomniany element input, stanie się nazwą wspomnianej danej, natomiast wartością wspomnianej danej będzie wartość pusta.

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="isindex">
      </label>

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

  </body>
</html>

Rezultat

Nazwą, jaka została przypisana do przykładowego elementu "input" jest nazwa "isindex", dlatego dana reprezentowana przez wspomniany element "input" powinna posiadać nazwę "isindex", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "isindex", lecz po zatwierdzeniu przez użytkownika formularza HTML reprezentowanego przez element "form", z którym to elementem "form" został powiązany wspomniany element "input", nazwą, jaką będzie posiadała dana reprezentowana przez wspomniany element "input" będzie wartość, jaką wprowadził użytkownik do wspomnianego elementu "input".

Wartość "isindex" atrybutu "name" elementu "input" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości text oraz jest pierwszym w kolejności jakimkolwiek elementem HTML reprezentującym daną podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element "input", ponadto sposobem kodowania danych wspomnianego formularza HTML musi być sposób application/x-www-form-urlencoded.

_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 wspomniany input, będzie wartością określającą system kodowania znaków, jaki został wykorzystany przez przeglądarkę internetową podczas wspomnianego 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 wspomniany element "input" będzie posiadała nazwę "_charset_", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "_charset_".

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

pattern

Przeznaczenie atrybutu pattern

Atrybut pattern wykorzystany wraz z elementem input określa wzorzec dla wartości posiadanej przez daną, którą reprezentuje dany element input.

Atrybut "pattern" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email lub password.

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 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}" required>
      </label>

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

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "input" został dodany atrybut "required" wartość posiadana przez daną (którą reprezentuje wspomniany element "input") jest wartością posiadającą cechy wartości wymaganej, czyli takiej wartości, która nie powinna być wartością pustą przed próbą zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element "input", ponadto wspomniana dana reprezentowana przez wspomniany element "input" powinna posiadać wartość składającą 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 ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "pattern" wraz z wartością "[0-9]{4}".

placeholder

Przeznaczenie atrybutu placeholder

Atrybut placeholder wykorzystany wraz z elementem input określa tekst, który powinien pojawić się w widocznym obszarze danego elementu input, gdy wspomniany element input nie reprezentuje w danej chwili żadnej innej treści.

Atrybut "placeholder" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email, password lub number.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu placeholder

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ą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 przykładowy element "input" nie reprezentuje żadnej treści, czyli w momencie gdy dana reprezentowana przez wspomniany element "input" posiada wartość pustą, wtedy w widocznym obszarze wspomnianego elementu "input" jest widoczny ciąg znaków "np. 1410", ponieważ do wspomnianego elementu "input" został dodany atrybut "placeholder" wraz z wartością "np. 1410".

readonly

Przeznaczenie atrybutu readonly

Atrybut readonly wykorzystany wraz z elementem input określa czy wartość posiadana przez daną, którą reprezentuje dany element input ma 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 dany element "input" posiada atrybut type o wartości: text, search, url, tel, email, password, date, time lub number.

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ść posiadana przez daną, którą reprezentuje 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".

required

Przeznaczenie atrybutu required

Atrybut required wykorzystany wraz z elementem input określa czy wartość posiadana przez daną, którą reprezentuje dany element input powinna być wartością posiadającą cechy wartości wymaganej, czyli takiej wartości, która nie powinna być wartością pustą przed próbą zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element input.

Atrybut "required" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email, password, date, number, checkbox, radio lub file.

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

Ponieważ do przykładowego elementu "input" został dodany atrybut "required" wartość posiadana przez daną (którą reprezentuje wspomniany element "input") jest wartością posiadającą cechy wartości wymaganej, czyli takiej wartości, która nie powinna być wartością pustą przed próbą zatwierdzenia przez użytkownika formularza HTML reprezentowanego przez element "form", z którym to elementem "form" został powiązany wspomniany element "input".

size

Przeznaczenie atrybutu size

Atrybut size wykorzystany wraz z elementem input określa przypuszczalnie domyślną liczbę znaków, jakie mogą być widoczne w obszarze szerokości danego elementu input.

Atrybut "size" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: text, search, url, tel, email lub password.

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

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

  </body>
</html>

Rezultat

Domyślną wielkością szerokości przykładowego elementu "input" jest wielkość pozwalająca ujrzeć użytkownikowi ciąg znaków składający się z co najmniej czterech znaków, podczas wprowadzania przez wspomnianego użytkownika wartości do wspomnianego elementu "input", ponieważ do wspomnianego elementu "input" został dodany atrybut "size" wraz z wartością "4".

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem input określa adres zasobu internetowego, który powinien być reprezentowany przez dany element input.

Atrybut "src" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości 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

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "input" jest zasób internetowy "przycisk-01.png" znajdujący się pod adresem "https://webkod.pl/files/html/przycisk-01.png", dlatego do wspomnianego elementu "input" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/przycisk-01.png".

step

Przeznaczenie atrybutu step

Atrybut step wykorzystany wraz z elementem input określa, o jaki zakres może zmienić się wartość posiadana przez daną, którą reprezentuje dany element input.

Atrybut "step" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości: date, time, number lub range.

Wartość domyślna

jeżeli element input posiada atrybut type o wartości date, wtedy w każdej sytuacji wartością domyślną atrybutu step elementu input jest wartość 1, która oznacza jeden dzień

jeżeli element input posiada atrybut type o wartości time, wtedy w każdej sytuacji wartością domyślną atrybutu step elementu input jest wartość 60, która oznacza sześćdziesiąt sekund

jeżeli element input posiada atrybut type o wartości number lub o wartości range, wtedy w każdej sytuacji wartością domyślną atrybutu step elementu input jest wartość 1

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

Podczas próby wyboru przez użytkownika wartości, jaką ma posiadać dana reprezentowana przez przykładowy element "input" wspomniana wartość danej 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 date lub o wartości time, wtedy wartością atrybutu "step" wspomnianego elementu "input" musi być ciąg znaków w formie liczby całkowitej większej od zera.

Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "step" wspomnianego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej większej od zera.

any

Wartość any oznacza, że zakres, o jaki może zmienić się wartość posiadana przez daną, którą reprezentuje 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

Podczas próby wyboru przez użytkownika wartości, jaką ma posiadać dana reprezentowana przez przykładowy element "input" wspomniana wartość danej 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".

title

Przeznaczenie atrybutu title

Atrybut title wykorzystany wraz z elementem input określa dodatkową wiadomość dla użytkownika w sytuacji gdy wprowadzona do danego elementu input przez wspomnianego użytkownika wartość nie zgadza się ze wzorcem, który został określony za pomocą wartości atrybutu pattern wspomnianego elementu input.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu title

wiadomość

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas dodatkowej wiadomoś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>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}" title="Wymaganym formatem jest czterocyfrowa liczba" required>
      </label>

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

  </body>
</html>

Rezultat

Gdy w momencie próby zatwierdzenia formularza HTML przez użytkownika wartość posiadana przez daną, którą reprezentuje przykładowy element "input" nie będzie zgadzała się ze wzorcem określonym przez wartość atrybutu "pattern" wspomnianego elementu "input", wtedy przeglądarka internetowa wyświetli dla wspomnianego użytkownika dodatkową wiadomość o treści "Wymaganym formatem jest czterocyfrowa liczba", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "title" wraz z wartością "Wymaganym formatem jest czterocyfrowa liczba".

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem input określa typ danego elementu input.

Wartość domyślna

text (w każdej sytuacji)

Wartości atrybutu type

button

Wartość button oznacza, że dany element input reprezentuje klikalny przycisk.

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" posiadający atrybut "value" o wartości "przycisk" jest 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.

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="zgoda">
      </label>

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

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "name" o wartości "regulamin" jest 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" posiadający atrybut "name" o wartości "kolor" jest 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ę.

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" posiadający atrybut "name" o wartości "data" jest typu "date", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "date".

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" posiadający atrybut "name" o wartości "adres-email" jest 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 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" posiadający atrybut "name" o wartości "plik" jest 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" jest 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 obrazek, który może zostać kliknięty przez użytkownika w celu zatwierdzenia formularza HTML, z którym to formularzem HTML został powiązany wspomniany element input. Współrzędne kliknięcia na wspomniany obrazek również zostaną uwzględnione podczas procesu, który następuje po zatwierdzeniu przez użytkownika wspomnianego 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">
      <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ź" jest typu "image", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "image".

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" posiadający atrybut "name" o wartości "liczba" jest 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 przez użytkownika nie są widoczne dla jego wzroku.

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" posiadający atrybut "name" o wartości "haslo" jest 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.

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" jest 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 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" posiadający atrybut "name" o wartości "liczba" jest 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, z którym to formularzem HTML został powiązany wspomniany element 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 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" jest typu "reset", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "reset".

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

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

  </body>
</html>

Rezultat

Przykładowy element "input" posiadający atrybut "name" o wartości "szukany-ciag-znakow" jest 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 zatwierdzający formularz HTML, z którym to formularzem HTML został powiązany wspomniany element 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 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ź" jest typu "submit", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "submit".

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" posiadający atrybut "name" o wartości "numer-telefonu" jest 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" posiadający atrybut "name" o wartości "ciag-znakow" jest 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.

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" posiadający atrybut "name" o wartości "czas" jest 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 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" posiadający atrybut "name" o wartości "adres-url" jest typu "url", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "url".

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem input określa wartość domyślną, jaką powinna posiadać dana reprezentowana przez dany element input oraz która to wartość domyślna 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 wspomniany element input.

Gdy element "input" posiada atrybut type o wartości button wartość atrybutu "value" wspomnianego elementu "input" nie jest brana pod uwagę przez przeglądarkę internetową podczas wspomnianego procesu.

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ą, jaką posiada dana reprezentowana przez przykładowy element "input" jest wartość "Jan", ponieważ do wspomnianego elementu "input" został dodany atrybut "value" wraz z wartością "Jan".

width

Przeznaczenie atrybutu width

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

Atrybut "width" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości 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".