HTML: formularze, cechy znaczników.

article-thumbnail

Formularze – typy wejść.

Znacznik <input> posiada wiele różnych wartości atrybutu type, od zwykłego typu tekstowego „text”, przez liczbowy, hasła, radio, checkbox, przycisk aż do zakresu i wyszukiwania.

Możemy zdefiniować listę rozwijaną za pośrednictwem znacznika <select>, wraz z jej opcjami zdefiniowanymi za pomocą znacznika <option> i grup opcji za pomocą znacznika <optgroup>.

Przykład wejść znacznika CSS w Comodo Dragon (Chrome):

td { 
  padding: 1px 5px; 
  text-align: right;
} 
td:last-of-type {
  text-align: left;
}
select { 
  margin: 5px 0 0 15px;
}

Przykład wejść znacznika HTML w Comodo Dragon (Chrome) – plik forms.html:

<body> 
  <h1>Formularze</h1> 
  <form action="forms.html" method="post"> 
    <fieldset>
      <legend>Podstawowe typy wejść</legend> 
      <table> 
        <tr> 
          <td>Typ tekstowy:</td> 
          <td>
            <input type="text" name="" value="">
          </td> 
        </tr> 
        <tr> 
          <td>Typ liczbowy:</td>
          <td>
            <input type="number" name="" value="">
          </td> 
        </tr> 
        <tr> 
          <td>Email:</td> 
          <td>
            <input type="email" name="" value="">
          </td> 
        </tr>
        <tr> 
          <td>Hasło:</td>
          <td>
            <input type="password" name="" value=""></td>
        </tr> 
        <tr> 
          <td>Obszar tekstowy: </td>
          <td>
            <textarea name="name" rows="1" cols="21"></textarea>
          </td> 
        </tr> 
      </table> 
    </fieldset> 
    <fieldset>
      <legend>Typy wyboru</legend> 
      Pierwsza opcja alternatywy: <input type="checkbox" name="" value="1"><br> 
      Druga opcja alternatywy: <input type="checkbox" name="" value="2"><br><br> 
      Pierwsza opcja alternatywy rozłącznej: <input type="radio" name="test" value="1"><br> 
      Druga opcja alternatywy rozłącznej: <input type="radio" name="test" value="2"><br><br> 
      Wybór jednej opcji: <br>
      <select name="" size="4"> 
        <optgroup label="Grupa opcji"> 
          <option value="1">Opcja</option> 
          <option value="2">Opcja</option> 
        </optgroup> 
        <optgroup label="Grupa opcji"> 
          <option value="3">Opcja</option> 
          <option value="4">Opcja</option> 
        </optgroup> 
      </select><br><br> 
      Wybór kilku opcji: <br> 
      <select name="" multiple> 
        <optgroup label="Grupa opcji"> 
          <option value="1">Opcja</option>
          <option value="2">Opcja</option> 
        </optgroup>
        <optgroup label="Grupa opcji"> 
          <option value="3">Opcja</option>
          <option value="4">Opcja</option> 
        </optgroup> </select> </fieldset>
    <fieldset>
      <legend>Przyciski</legend> 
      <input type="button" name="" value="przycisk (jakaś akcja)"> 
      <input type="reset" name="" value="reset (czyść)"> 
      <input type="submit" name="" value="submit (wyślij)"> 
    </fieldset> 
    <fieldset>
      <legend>Dodatkowe </legend>
      <table> 
        <tr>
          <td>Kolor:</td> 
          <td><input type="color" name="" value=""></td> 
        </tr> 
        <tr>
          <td>Zakres:</td> 
          <td>
            <input type="range" name="" min="0" max="100"></td> 
        </tr> 
        <tr> 
          <td>Wyszukiwanie:</td> 
          <td>
            <input type="search" name="" value=""></td>
        </tr> 
        <tr>
          <td>Adres URL:</td>
          <td>
            <input type="url" name="" value="">
          </td> 
        </tr> 
      </table>
    </fieldset> 
    <fieldset>
      <legend>Data i czas (nieobsługiwane w Mozilla Firefox)</legend> 
      <table> 
        <tr> 
          <td>Godzina: </td>
          <td>
            <input type="time" name="" value="">
          </td> 
     	</tr>
        <tr> 
          <td>Data: </td>
          <td>
            <input type="date" name="" value=""></td>
        </tr> 
        <tr> 
          <td>Data i czas lokalny: </td>
          <td>
            <input type="datetime-local" name="" value=""></td>
        </tr> 
        <tr> 
        	<td>Miesiąc: </td>
        	<td>
              <input type="month" name="" value="">
          </td> 
        </tr> 
        <tr>
          <td>Tydzień: </td>
          <td>
            <input type="week" name="" value=""></td>
        </tr>
      </table> 
    </fieldset> 
  </form>
</body>

Formularze – inne cechy znaczników <input>, <form> i <disabled>

Część atrybutów formularzy odnosi się tylko do konkretnych elementów. Są to atrybuty znajdujące się w znacznikach <input> oraz <form>, inne są również nadawane znacznikom potomnym, w tym wypadku odnosi się to do <fieldset>.

Przykład dziedziczenia cech formularzy w Comodo Dragon (Chrome):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><title>Formularze</title>
    <style media="screen">
      form{border: 1px black solid;margin: 10px;padding: 10px;}</style>
  </head>
  <body>

    <form action="formularze_atrybuty.html" method="post">
      <fieldset disabled><legend>Fieldset 1</legend>
        <input type="text" name="" value="value">
        <input type="text" name="" value="value">
      </fieldset>
      <fieldset><legend>Fieldset 2</legend>
        <input type="text" name="" value="value">
        <input type="text" name="" value="value">
      </fieldset>
    </form>

    <form action="formularze_atrybuty.html" method="post">
      <fieldset><legend>Fieldset 1</legend>
        <input type="text" name="" value="value" disabled>
        <input type="text" name="" value="value">
      </fieldset>
      <fieldset><legend>Fieldset 2</legend>
        <input type="text" name="" value="value">
        <input type="text" name="" value="value">
      </fieldset>
    </form>
    
  </body>
</html>

Formularze mogą przyjmować atrybuty związane z wyglądem danych komórek, czyli tym jaką szerokość będą miały, bądź tym co będą wyświetlały na początku. Mogą również przyjmować atrybuty związane z tym, co użytkownik może (bądź nie) zrobić z danym polem, lub co może (bądź nie) do niego wpisać. Również występują atrybuty odnoszące się do sposobu, w jaki są wysyłane pliki, bądź w jaki sposób jest realizowana sama wysyłka danych.

Przykładowe atrybuty znaczników w Comodo Dragon (Chrome):

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8"><title>Formularze</title></head>
  <body>
    <form action="formularze_atrybuty.html" method="post" autocomplete="on">

      <fieldset><legend>Wygląd</legend>
        <input type="text" name="" value="value">
        <input type="text" name="" placeholder="placeholder">
        <input type="text" name="" value="size = 7" size="7">
      </fieldset>

      <fieldset><legend>Możliwości użytkownika</legend>
        <input type="text" name="" value="disabled" disabled>
        <input type="text" name="" value="readonly" readonly>
        <input type="text" name="" value="required" required>
        <input type="text" name="" value="autofocus" autofocus>
      </fieldset>

      <fieldset><legend>Ograniczenie typu zawartości</legend>
        <input type="text" name="" value="Max lenght = 15" maxlength="15">
        <input type="text" name="" value='pattern="[A-Za-z]{0,15}" - pole zawiera tylko litery, od 0 do 15 znaków' pattern="[A-Za-z{15}" size="55">
        <input type="number" name="" value="0" min="-100" max="100" step="10">
      </fieldset>

      <fieldset><legend>Pliki i wysyłanie</legend> <input type="file" name="" value="" enctype="multipart/form-data" multiple>
        <input type="submit" name="" value="Wyślij do nowego okna" formtarget="formularze_atrybuty.html"> <input type="submit" name="" value="Wyślij bez walidacji" formnovalidate>
      	</fieldset>

    </form>
  </body>
</html>
Jacek Woźniak

Ostatnio zaktualizowane: 27 maja 2020

Egzamin EE.09, Egzamin INF.03, HTML