Autor publikacji
Virtual Patriot - Administrator

button

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu button

Element button reprezentuje klikalny przycisk.

Dodatkowe artykuły związane z elementem button

Informacje techniczne 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 elementy HTML należące do kategorii 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

zdolność fallback

nie dotyczy

składnia HTML

<button> ... </button>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block

Przypuszczalnie domyślne reguły CSS elementu button

button {
  display:inline-block;
  cursor:default;
  font-size:13px;
  font-family:sans-serif;
  text-align:center;
  background-color:#DDD;
  color:black;
  padding-top:1px;
  padding-right:6px;
  padding-bottom:1px;
  padding-left:6px;
  border-width:1px;
  border-style:outset;
  border-color:black;
}

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

button:hover {
  background-color:blue;
  border-color:blue;
}

button:disabled {
  background-color:#EEE;
  color:#888;
  border-color:#888;
  outline-color:#888;
}

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

Opis atrybutów elementu button

Atrybut Lokalny

autofocus

Przeznaczenie atrybutu autofocus

Atrybut autofocus wykorzystany wraz z elementem button pozwala nam określić 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 znajdujący się w zawartości tego samego dokumentu HTML może posiadać atrybut "autofocus".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu autofocus

autofocus

Atrybut autofocus jest atrybutem logicznym elementu button.

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="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ż przykładowy 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".

Atrybut Lokalny

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem button pozwala nam określić czy dany element button oraz treść reprezentowana przez zawartość danego elementu button powinni zostać wyłączeni 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="https://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".

Atrybut Lokalny

form

Przeznaczenie atrybutu form

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

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

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu form

form id

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

Przykładowy Kod HTML

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

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

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

  </body>
</html>

Rezultat

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

Atrybut Lokalny

formaction

Przeznaczenie atrybutu formaction

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

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

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

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu formaction

URL

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

Przykładowy Kod HTML

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

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

      <button type="submit" formaction="https://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", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", ponieważ do wspomnianego elementu "button" został dodany atrybut "formaction" wraz z wartością "https://webkod.pl/php/submit-result.php".

Atrybut Lokalny

formenctype

Przeznaczenie atrybutu formenctype

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

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

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

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu formenctype

application/x-www-form-urlencoded

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

Przykładowy Kod HTML

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

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

      <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", dane formularza HTML reprezentowanego przez element "form" zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "application/x-www-form-urlencoded", ponieważ do wspomnianego elementu "button" został dodany atrybut "formenctype" wraz z wartością "application/x-www-form-urlencoded".

multipart/form-data

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

Przykładowy Kod HTML

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

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

      <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", dane formularza HTML reprezentowanego przez element "form" zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "multipart/form-data", ponieważ do wspomnianego elementu "button" został dodany atrybut "formenctype" wraz z wartością "multipart/form-data".

text/plain

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

Atrybut Lokalny

formmethod

Przeznaczenie atrybutu formmethod

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

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

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

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu formmethod

get

Wartość get oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementu 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="https://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", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody GET, ponieważ do wspomnianego elementu "button" został dodany atrybut "formmethod" wraz z wartością "get".

post

Wartość post oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementu 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="https://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", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody POST, ponieważ do wspomnianego elementu "button" został dodany atrybut "formmethod" wraz z wartością "post".

Atrybut Lokalny

formnovalidate

Przeznaczenie atrybutu formnovalidate

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

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

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

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="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" formnovalidate>zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

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

Atrybut Lokalny

formtarget

Przeznaczenie atrybutu formtarget

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

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

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

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

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu formtarget

_blank

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

Przykładowy Kod HTML

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

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

      <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", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "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="https://webkod.pl/files/html/button-formtarget-parent.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: button-formtarget-parent.html >>>>

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

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

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

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "button" posiadający atrybut "type" o wartości "submit", jest element "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "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 kontekst przeglądarki internetowej, do którego należy dany element button, np. na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub na aktualny element iframe.

Przykładowy Kod HTML

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

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

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

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

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

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "button" posiadający atrybut "type" o wartości "submit", jest element "iframe", dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe", ponieważ do wspomnianego elementu "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="https://webkod.pl/files/html/button-formtarget-top.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: button-formtarget-top.html >>>>

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

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

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

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "button" posiadający atrybut "type" o wartości "submit", jest element "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "button" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "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="https://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", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe" posiadającego atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego elementu "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 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 interesujący nas element object reprezentuje zasób internetowy pochodzący z technologii HTML.

Atrybut Lokalny

name

Przeznaczenie atrybutu name

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

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

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

nazwa

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

Przykładowy Kod HTML

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

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

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

  </body>
</html>

Rezultat

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

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem button pozwala nam określić informację o typie przycisku, jaki powinien reprezentować dany element button.

Wartość domyślna

button (w każdej sytuacji), lecz tylko wtedy gdy dany element button nie został powiązany z jakimkolwiek istniejącym formularzem HTML, w przeciwnym przypadku wartość submit

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

Atrybut Lokalny

value

Przeznaczenie atrybutu value

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

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

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

      <button type="submit" name="default-submit" value="true">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Wartością, jaka została przypisana do przykładowego elementu "button", jest wartość "true", dlatego dana o nazwie "default-submit", która jest reprezentowana przez przykładowy element "button", będzie posiadała wartość "true", ponieważ do wspomnianego elementu "button" został dodany atrybut "value" wraz z wartością "true".