# Proste formularze

##

### Proste formularze

Na pewno niejednokrotnie zdarzyło się Wam, korzystając ze strony internetowej, podawać swoje dane (na przykład dokonując zakupu w sklepie internetowym) albo dodawać komentarze pod artykułem. HTML, oprócz tego, że umożliwia nam wyświetlanie zawartości strony pobranej z serwera, pozwala również na takie podstawowe interakcje, jak wypełnianie formularzy.

#### Jak wstawić formularz na stronę?

W Ćwiczeniu 3 na pewno zauważyliście pod artykułem kontrolki, dzięki którym użytkownik mógł wpisać swoje podstawowe dane oraz treść komentarza.

Kiedy umieszczamy na stronie formularz, najpierw musimy "powiedzieć" przeglądarce za pomocą odpowiedniego znacznika, że *tutaj będzie znajdował się nasz formularz*:

```markup
<form name="myBasicForm">
  <!-- Tu wstawię kontrolki mojego formularza -->
</form>
```

Wiedząc, jak zadeklarować sam formularz, możemy po kolei zapoznać się z różnymi rodzajami kontrolek.

**Podstawowe interaktywne kontrolki (\<input>)**

Załóżmy, że chcemy umieścić w naszym formularzu kilka prostych pól, dzięki którym użytkownik będzie mógł podać swoje imię, nazwisko oraz miejsce zamieszkania. Spójrzcie na kod poniżej:

```markup
<input type="text">
```

Znacznik `<input>` w większości przypadków służy do przyjmowania od użytkownika danych tekstowych (choć z powodzeniem możecie wpisywać tam również liczby oraz znaki specjalne!). Musimy jednak pamiętać, że zachowanie pola `<input>` jest zależne od jego typu, który podajemy za pomocą atrybutu `type`. Dla pola tekstowego będzie to wyglądało jak powyżej: `type="text"`.

Wygląda bardzo prosto, prawda? Tak prosto, że użytkownik nie widzi informacji o tym, jakich danych się od niego oczekuje.

Do opisu pól formularza używamy znacznika `<label>` i właśnie wewnątrz niego umieszczamy informację, co powinno znajdować się w danym polu:

```markup
<label for="name">Podaj swoje imię:</label>
<input type="text" id="name">
```

&#x20;Podaj swoje imię:&#x20;

Zauważcie, że pojawiły się dwa nowe atrybuty: `id` oraz `for`.

* Atrybut `id` jest identyfikatorem elementu HTML. Jego wartość musi być **unikalna** w obrębie całej strony. Atrybut `id` nie jest charakterystyczny tylko dla pól typu `<input>`, może być używany wraz z *dowolnym* znacznikiem HTML.
* Atrybut `for` jest już charakterystyczny dla znacznika `<label>`. Łączy on `<label>` wraz z kontrolką formularza, której dotyczy. W takim wypadku wartość atrybutu `for` musi być **identyczna** jak wartość `id` pola tekstowego, do którego się odnosi. Dokładnie tak, jak w przykładzie powyżej.

A teraz zapoznajmy się z pozostałymi typami pola `<input>`!

**Kontrolki do podawania danych o określonym formacie**

Zapoznaliśmy się przed chwilą ze zwykłym polem tekstowym, do którego można wpisać w zasadzie dowolny ciąg znaków. Często jednak dane, jakich oczekujemy od użytkownika, muszą być podane w specjalnym formacie. Takim przypadkiem jest na przykład adres e-mail.

Od niedawna (wraz z pojawieniem się specyfikacji HTML5) programiści WWW zyskali taką możliwość, ponieważ HTML został wzbogacony o nowe, specjalne typy kontrolek na potrzeby wprowadzania adresów e-mail, adresów stron internetowych, dat, numerów oraz wielu innych formatów.

```markup
<label for="emailData">Adres e-mail:</label>
<input type="email" id="emailData">

<label for="urlData">Adres strony internetowej:</label>
<input type="url" id="urlData">

<label for="dateData">Data:</label>
<input type="date" id="dateData">

<label for="numberData">Numer:</label>
<input type="number" id="numberData">
```

&#x20;Adres e-mail:  Adres strony internetowej:  Data:  Numer:&#x20;

**Pola wielokrotnego wyboru**

Pola wielokrotnego wyboru, czyli checkboksy. Dla tego typu pól atrybut `type` przyjmie wartość `checkbox`:

```markup
<label for="checkbox1">
  <input type="checkbox" id="checkbox1" name="myGroup">
  Wybierz mnie!
</label>
<label for="checkbox2">
  <input type="checkbox" id="checkbox2" name="myGroup">
  Nie, nie, mnie wybierz!
</label>
<label for="checkbox3">
  <input type="checkbox" id="checkbox3" name="myGroup">
  Ja też chcę być wybrany!
</label>
```

&#x20; Wybierz mnie!  Nie, nie, mnie wybierz!  Ja też chcę być wybrany!

**Pola jednokrotnego wyboru**

Oprócz checkboksów możemy umieścić w swoim formularzu pola jednokrotnego wyboru, czyli radiobuttony:

```markup
<label for="radiobutton1">
  <input type="radio" id="radiobutton1" name="myGroup">
  Wybierz mnie!
</label>
<label for="radiobutton2">
  <input type="radio" id="radiobutton2" name="myGroup">
  Nie, nie, mnie wybierz!
</label>
<label for="radiobutton3">
  <input type="radio" id="radiobutton3" name="myGroup">
  Ja też chcę być wybrany!
</label>
```

&#x20; Wybierz mnie!  Nie, nie, mnie wybierz!  Ja też chcę być wybrany!

W przypadku checkboksów i radiobuttonów również potrzebujemy dodać do `<label>` atrybut `for`. Poeksperymentujcie i usuńcie ten atrybut – co się stanie? Jak wpłynie to na doświadczenie użytkownika podczas używania formularza?

Zauważcie również, że w naszych powyższych przykładach używamy atrybutu `name`. Jest on istotny w przypadku radiobuttonów i checkboksów, bo wskazuje, że wybieramy elementy spośród konkretnej grupy.

**Wybieranie plików z dysku**

W formularzach istnieje również możliwość dodania pola, dzięki któremu możemy wybrać plik ze swojego dysku i przesłać go na serwer:

```markup
<label for="fileUpload">Wybierz plik:</label>
<input type="file" id="fileUpload">
```

&#x20;Wybierz plik:&#x20;

**Pole tekstowe z wieloma liniami (\<textarea>)**

Wiemy już, jak wstawiać do naszego formularza pola tekstowe, czyli `<input type="text">`. Co, jeśli jednak użytkownik potrzebuje wpisać większą porcję tekstu, tak jak w przypadku komentarzy pod artykułem na blogu?

Z pomocą przychodzi nam znacznik `<textarea>`, dzięki któremu umożliwimy naszym użytkownikom wpisywanie tekstu w wielu liniach. Będą mieli wtedy więcej miejsca na wyrażenie, na przykład swoich opinii o naszym tekście.

```markup
<textarea rows="10" cols="30">Napisz coś tutaj</textarea>
```

&#x20;Napisz coś tutaj

**Listy rozwijalne (pola typu dropdown)**

Do wstawiania elementu rozwijalnej listy do formularza służy nam znacznik `<select>`.

```markup
<label for="favFruit">Wybierz swój ulubiony owoc:</label>
<select id="favFruit">
  <option value="apple">Jabłko</option>
  <option value="pear">Gruszka</option>
  <option value="plum">Śliwka</option>
  <option value="cherry">Wiśnia</option>
</select>
```

&#x20;Wybierz swój ulubiony owoc: JabłkoGruszkaŚliwkaWiśnia

**Przyciski**

Wymieniliśmy już większość bardzo przydatnych kontrolek, jakie można umieścić w formularzu. I na razie moglibyśmy na tym zakończyć, gdyby nie jedna, bardzo popularna – bez której właściwie większość formularzy byłaby mało użyteczna – przyciski. Deklarujemy je w poniższy sposób:

```markup
<button>Kliknij mnie!</button>
```

&#x20;Kliknij mnie!

> **Important::Ważne**
>
> Zanim na poważnie zabierzecie się za kodowanie Waszej pierwszej strony, zapraszamy do zapoznania się z [kilkoma naszymi radami na temat pisania przejrzystego kodu](https://app.gitbook.com/s/appendix/clean-code/README.md). Z pewnością ułatwią Wam pracę!

Jeśli wiecie już, jak pisać czytelny kod, pora przejść do ćwiczeń.

> **Exercise::Ćwiczenie 4**
>
> Wróćmy do naszego przykładu z Ćwiczenia 3:
>
> Opublikowano przez: *Kasia Niesamowita*, 20 kwietnia 2016
>
> ## The Awwwesomes podbijają świat!
>
> Warsztaty ruszyły pełną parą! Grupa 20 zdolnych uczestników zabrała się do kodowania z godnym podziwu zapałem.
>
> Mentorzy mieli trudne zadanie, ponieważ padło bardzo dużo ciekawych pytań. Nasi uczestnicy są naprawdę *awwwesome*!
>
> ### Najpierw semantyczny HTML, potem estetyczny CSS
>
> Naukę zaczęliśmy od HTML, który jest absolutną podstawą dla każdego kodera stron internetowych. Nie obejdzie się jednak bez zapoznania z CSS, dzięki któremu każdy może upiększyć swoją stronę jak tylko sobie wymarzy!
>
> Zostaw swój komentarz: Twój email:  Twoje imię:  Twój komentarz: Prześlij
>
> W poprzednim ćwiczeniu umieściliśmy całą zawartość jako zwykły tekst. Chcemy jednak, aby nasze elementy były odczytywane i wyświetlane prawidłowo.
>
> * Korzystając ze zdobytej dotąd wiedzy, uzupełnij kod w odpowiednie znaczniki opisujące zawartość. Nie zapomnij o formularzu!
> * Zadbaj o poprawne umieszczenie obrazka w artykule!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/kod-html/proste-formularze.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.