Ostatnio edytowany:

button

Autor: Virtual Patriot

Przeznaczenie elementu button

Element button reprezentuje klikalny przycisk.

Dodatkowe techniczne informacje o elemencie button

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Twoje dane</legend>

    <label>Imię: <input></label>
    <label>Nazwisko: <input></label>
  </fieldset>

  <button type="reset">zresetuj</button>
</form>

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

kontekst wewnętrzny
zawartość frazowana, lecz nie zawartość interaktywna jako element potomek

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Twoje dane</legend>

    <label>Imię: <input></label>
    <label>Nazwisko: <input></label>
  </fieldset>

  <button type="reset">zresetuj <b>Twoje</b> dane</button>
</form>

Kontekstem wewnętrznym przykładowego elementu "button" jest wyłącznie tekst oraz element HTML, który należy do kategorii zawartość frazowana. Ponadto elementami potomkami wspomnianego elementu "button" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "button", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "zresetuj", element "b" oraz ciąg znaków "dane", jest prawidłowym kontekstem wewnętrznym dla elementu "button".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<button> ... </button>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block

Dodatkowe domyślne reguły CSS elementu button

button {
  display:inline-block;
}

Interpretacja elementu button

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje atrybut autofocus, formaction, formenctype, formmethod, formnovalidate oraz formtarget, lecz od wersji "10".

Nie interpretuje atrybutu form.

Edge

tak

Nie interpretuje atrybutu form.

Opis atrybutów elementu button

autofocus

Przeznaczenie atrybutu autofocus

Atrybut autofocus wykorzystany wraz z elementem button określa czy dany element button 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 button.

Przykładowy Kod HTML

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

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

      <button type="reset" autofocus>zresetuj</button>
      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "button" posiadający atrybut "type" o wartości "reset" jest aktywny, gdyż wspomniany element "button" 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 "button" został dodany atrybut "autofocus".

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem button określa czy dany element button oraz zawartość reprezentowana przez wspomniany element button powinna zostać wyłączona z interakcji z użytkownikiem.

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

Przykładowy Kod HTML

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

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

      <button type="reset" disabled>zresetuj</button>
      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

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

form

Przeznaczenie atrybutu form

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

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="http://webkod.pl/php/submit-result.php" id="formularz-1">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>
    </form>

    <button type="submit" form="formularz-1">zatwierdź</button>

  </body>
</html>

Rezultat

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

formaction

Przeznaczenie atrybutu formaction

Atrybut formaction wykorzystany wraz z elementem button 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 button.

Atrybut "formaction" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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>

      <button type="submit" formaction="http://webkod.pl/php/submit-result.php">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "http://webkod.pl/php/submit-result.php", ponieważ do wspomnianego elementu "button", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formaction" wraz z wartością "http://webkod.pl/php/submit-result.php".

formenctype

Przeznaczenie atrybutu formenctype

Atrybut formenctype wykorzystany wraz z elementem button 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 button.

Atrybut "formenctype" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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="http://webkod.pl/php/submit-result.php" method="post">
      <label>
        Wybierz Plik:
        <input type="file" name="plik">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 button nie zostaną poddane żadnemu specyficznemu sposobowi kodowania.

formmethod

Przeznaczenie atrybutu formmethod

Atrybut formmethod wykorzystany wraz z elementem button 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 button.

Atrybut "formmethod" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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 button 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="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 button 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="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 button 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 button.

Atrybut "formnovalidate" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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

Przykładowy Kod HTML

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

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

      <button type="submit" formnovalidate>zatwierdź</button>
    </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 "button" posiadającego atrybut "type" o wartości "submit" wspomnianego formularza HTML, domyślna walidacja wartości danych jest wyłączona, ponieważ do wspomnianego elementu "button", 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 button 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 button. Wspomniane wczytanie zasobu internetowego nastąpi w momencie gdy wspomniany formularz HTML zostanie zatwierdzony przez użytkownika za pomocą wspomnianego elementu button.

Atrybut "formtarget" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 button.

Przykładowy Kod HTML

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

    <iframe src="http://webkod.pl/files/html/button-formtarget-parent.html"></iframe>
    <!-- KOD HTML PLIKU - button-formtarget-parent.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut formtarget - wartość _parent</title>
        </head>
        <body>

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

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

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 "button" 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 button. 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="http://webkod.pl/files/html/button-formtarget-self.html"></iframe>
    <!-- KOD HTML PLIKU - button-formtarget-self.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut formtarget - wartość _self</title>
        </head>
        <body>

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

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

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 "button", 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 button.

Przykładowy Kod HTML

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

    <iframe src="http://webkod.pl/files/html/button-formtarget-top.html"></iframe>
    <!-- KOD HTML PLIKU - button-formtarget-top.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut formtarget - wartość _top</title>
        </head>
        <body>

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

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

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 "button" 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="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" 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 "button", 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 "button" 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.

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem button określa nazwę, jaką powinna posiadać dana reprezentowana przez dany element button 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 button.

Atrybut "name" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <button type="submit" name="submit-1">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

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

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem button określa, jaki typ przycisku ma reprezentować dany element button.

Wartość domyślna

jeżeli element button został powiązany z jakimkolwiek istniejącym formularzem HTML, wtedy w każdej sytuacji wartością domyślną atrybutu type elementu button jest wartość submit

jeżeli element button nie został powiązany z jakimkolwiek istniejącym formularzem HTML, wtedy w każdej sytuacji wartością domyślną atrybutu type elementu button jest wartość button

Wartości atrybutu type

submit

Wartość submit oznacza, że dany element button 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="http://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>
        <button type="reset">zresetuj</button>
        <button type="submit">zatwierdź</button>
      </p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "button", którego zawartością jest ciąg znaków "zatwierdź" jest typu "submit", ponieważ do wspomnianego elementu "button" został dodany atrybut "type" wraz z wartością "submit".

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

reset

Wartość reset oznacza, że dany element button 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="http://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>
        <button type="reset">zresetuj</button>
        <button type="submit">zatwierdź</button>
      </p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "button", którego zawartością jest ciąg znaków "zresetuj" jest typu "reset", ponieważ do wspomnianego elementu "button" został dodany atrybut "type" wraz z wartością "reset".

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

button

Wartość button oznacza, że dany element button reprezentuje 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>

    <button type="button">przycisk</button>

  </body>
</html>

Rezultat

Przykładowy element "button", którego zawartością jest ciąg znaków "przycisk" jest typu "button", ponieważ do wspomnianego elementu "button" został dodany atrybut "type" wraz z wartością "button".

value

Przeznaczenie atrybutu value

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

Atrybut "value" ma sens tylko wtedy gdy dany element "button" posiada atrybut type o wartości submit oraz gdy wspomniany element "button" został powiązany z jakimkolwiek istniejącym formularzem HTML.

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.

Przykładowy Kod HTML

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

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

      <button type="submit" name="submit-1" value="tak">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartością, jaka została przypisana do przykładowego elementu "button" posiadającego atrybut "type" o wartości "submit" jest wartość "tak", dlatego dana reprezentowana przez wspomniany element "button" będzie posiadała wartość "tak", ponieważ do wspomnianego elementu "button" został dodany atrybut "value" wraz z wartością "tak".