Formularze HTML

Porozmawiajmy teraz o formularzach w HTMLu. Do tej pory w witrynie, którą stworzyliśmy, wyświetlamy tylko informacje. Wyświetlamy logo i informacje o witrynie oraz tekst i stopkę, ale nie zezwalamy użytkownikowi na udzielanie nam żadnych informacji, aby zbierać informacje od użytkownika. Zróbmy to, używając formularzy HTML. Zrobimy to w sekcji, zaraz po akapicie i po linku utworzę element formularza

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form>
</form>

Formularz zbiera pewne informacje, a następnie prawdopodobnie przesyła je komuś, bez względu na to, czy wysyła je na serwer lub do standardowej usługi, pobieramy dane od użytkownika, abyśmy mogli odesłać je z powrotem do jakiegoś miejsca na serwerze.

W tym kursie nie będziemy zajmować się programowaniem po stronie serwera,
więc możemy skorzystać z niektórych standardowych usług dostępnych w Internecie, aby zobaczyć, jak to wszystko działa. Elementem ważnym dla formularzy jest element nazywany elementem wejściowym <input />

Jeśli przejdziemy do strony z tym elementem Input, to zobaczymy że domyślnie będzie to pole tekstowe. Tylko standardowe stare pole tekstowe. Zbiera ono informacje tekstowe, nazwę, hasło, adres e-mail, ciąg wyszukiwania, cokolwiek zechcesz.

Ale to tylko proste okno wprowadzania. Jeśli go tworzymy, możemy powiedzieć, jakiego typu faktycznie szukamy. Teraz niektóre kontrolki, którymi będziesz się zajmować, będą wprowadzane ze specjalnymi typami.

<input type="submit" value="szukaj"/>

W naszym przypadku zamierzam stworzyć typ o nazwie submit, który będzie wyglądał jak przycisk, i będzie to przycisk, który powie szukaj czyli value=”szukaj” , ponieważ zamierzamy stworzyć mała wyszukiwarkę.

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form>
   <input/>
   <input type="submit" value="szukaj"/>
</form>

Jeśli spojrzymy na to w przeglądarce, możemy teraz powiedzieć, że mamy dane wejściowe z pierwszego elementu input, a następnie rzeczywisty przycisk, który zostanie wykonany po naciśnięciu przycisku szukaj. Aby formularz wiedział, gdzie przesłać gromadzone dane, musimy nadać mu atrybut działania w samym formularzu. <form action=”szukaj”> dla naszych celów, zamierzam użyć akcji o nazwie szukaj.

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form action="szukaj">
   <input/>
   <input type="submit" value="szukaj"/>
</form>

Oczywiście programowania po stronie serwera nie robimy i tej akcji nie mamy ale zobaczymy co jest wysyłane.

Jeśli uruchomimy to w przeglądarce i spróbujemy wysłać jakieś dane możemy zobaczyć że nie wysłał żadnych danych.

A powodem, dla którego tak się stało jest to, że formularz musi wiedzieć, jak nazwać każdy kawałek danych. W przypadku danych wejściowych musimy nadać im nazwę taką jak na przykład frazawyszukiwania.
<input name=”frazaWyszukiwania”/>

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form action="szukaj">
   <input name="frazaWyszukiwania"/>
   <input type="submit" value="szukaj"/>
</form>

wróćmy do przeglądarki i spróbujemy wysłać jakieś dane jeszcze raz

Wróćmy do kodu i użyjmy teraz innego Inputa i w tym przypadku użyjemy typu zwanego checkbox.
<input type=”checkbox” name=”zapamietaj”/>
i chcę nadać temu inputowi domyślną wartość, checked=”true”
Jest to właściwość w polach wyboru, które mówią, zaznacz to pole wyboru domyślnie.

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form action="szukaj">
   <input name="frazaWyszukiwania"/>
   <input type="checkbox" name="zapamietaj" checked="true"/> 
   <input type="submit" value="szukaj"/>
</form>

Jeśli więc spojrzymy na to w przeglądarce, zobaczymy, że nadal mamy tam pole tekstowe, i teraz mamy pole wyboru domyślnie zaznaczone i znajduje się ono w nowej linii i jeśli przejdziemy teraz do wyszukiwania, zobaczymy, że otrzymujemy oba te elementy.

Wróćmy do kodu dodamy teraz menu rozwijane lub to, co jest wywoływane w HTML jako select. Wybór pozwala mieć wiele opcji dla różnych opcji, które można wybrać.

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form action="szukaj">
   <input name="frazaWyszukiwania"/>
   <input type="checkbox" name="zapamietaj" checked="true"/> 
   
   <select name="wybierzJezyk">
       <option>Wszystkie</option>
       <option>C#</option>
       <option>Java</option>
       <option>Php</option>
       <option>Ruby</option>
       <option selected>Python</option>
   </select>
   <br/>
   <input type="submit" value="szukaj"/>
</form>

I spójrzmy na to w przeglądarce… pole wyboru jest domyślnie zaznaczone
i jeśli klikniemy szukaj, wybierzJezyk pojawi się tutaj również jako jedna z właściwości.

Teraz sposób działania http polega na wysyłaniu różnych rzeczy na różne sposoby.
Żadanie Get to sposób, w jaki działa większość sieci. Pisząc w przeglądarce google.com, dostajemy się do witryny google.com, i zwracana nam jest stronę HTML,

W przypadku formularzy często nie chcemy używać czasownika get, chcemy użyć czasownika post. Post ma możliwość tworzenia nowych danych. Zasadniczo jest to wstawianie lub aktualizacja danych w Internecie, podobnie jak w standardowych warunkach dostępu do danych.

Tak więc w formularzu możemy faktycznie określić, które z tych czasowników są używane. Robimy to za pomocą innego atrybutu o nazwie method.
<form action=”szukaj.html” method=”POST”>

Domyślnie metoda to get, ale jeśli zmienimy to na post i po prostu ponownie uruchomimy tę samą stronę, zobaczymy, że wywołujemy ta sama akcje tak jak wcześniej, ale zamiast dołączać parametry jako ciąg zapytania, w rzeczywistości teraz publikuje go jako ciało i staje się to ważne, ponieważ niektóre typy danych nie mogą być częścią ciągu zapytania.

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form action="szukaj" method="POST">
   <input name="frazaWyszukiwania"/>
   <input type="checkbox" name="zapamietaj" checked="true"/> 
   
   <select name="wybierzJezyk">
       <option>Wszystkie</option>
       <option>C#</option>
       <option>Java</option>
       <option>Php</option>
       <option>Ruby</option>
       <option selected>Python</option>
   </select>
   <br/>
   <input type="submit" value="szukaj"/>
</form>

Semantyka ciągu zapytania po adresie, łańcuchu zapytania, oznacza, że ​​możemy tylko mieć informacje tekstowe, więc jeśli chcesz wysłać wybrany obraz lub inne dane strukturalne, byłoby to trudne. Sposób, w jaki to robi, polega na tym, że wysyła go jako treść żądania.

Wiedząc, jak je zmienić i wiedząc, że sam obiekt formularza sobie z tym poradzi, ważne jest, aby to wiedzieć, kiedy tworzymy strony internetowe. Później, gdy będziemy rozmawiać o JavaScript, będziemy mogli dowiedzieć się trochę więcej o kulisach, ale na razie zrozum, że możesz określić metodę, jaką ma być wysyłany formularz.

Zróbmy jeszcze jedną rzecz z formularzami.
W naszej formie mamy tylko dane wejściowe, w których zbieramy dane, ale nie mamy naprawdę miejsc, aby pokazać, co właściwie reprezentuje każda z tych danych.
W rzeczywistości tutaj, w formularzu, Nie mamy sposobu, aby to naprawdę opisać.

Moglibyśmy dosłownie powiedzieć, że szukamy tutaj i powiedzieć
Wyszukiwana Fraza, a otrzymamy coś, co w przybliżeniu wygląda na to, co chcemy.
Ale co ciekawsze, możemy dodać nowy element o nazwie etykieta. Label

<label for="frazaWyszukiwania">Wyszukiwana Fraza</label>  
<input name="frazaWyszukiwania" id="frazaWyszukiwania"/><br/>

<input type="checkbox" name="zapamietaj" id="zapamietaj" checked="true" />
<label for="zapamietaj">Zapamietaj</label><br/>

<label for="wybierzJezyk">Wybierz Jezyk</label>
<select name="wybierzJezyk" id="wybierzJezyk">

Cały dzisiejszy kod

</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>

<form action="szukaj" method="POST">
   <label for="frazaWyszukiwania">Wyszukiwana Fraza</label>  
   <input name="frazaWyszukiwania" id="frazaWyszukiwania"/></br>
   <input type="checkbox" name="zapamietaj" checked="true" id="zapamietaj" /> 
  <label for="zapamietaj">Zapamietaj</label><br/>

  <label for="wybierzJezyk">Wybierz Jezyk</label>
   <select name="wybierzJezyk" id="wybierzJezyk">
       <option>Wszystkie</option>
       <option>C#</option>
       <option>Java</option>
       <option>Php</option>
       <option>Ruby</option>
       <option selected>Python</option>
   </select>
   <br/>
   <input type="submit" value="szukaj"/>
</form>

Możesz zrozumieć, dlaczego to jest ważne. Jeśli spojrzymy na to w przeglądarce i kiedy klikniemy na etykiecie…

Dodając etykiety, dajemy semantyczne wsparcie dla poznania, które części strony należą do innych części strony. I tak naprawdę w końcu, gdy tylko sprawimy, że nasze strony będą wyglądać tak, jak chcemy, umożliwi nam to bogate formatowanie stron za pomocą CSS w naszym następnym rozdziale.

Ale jest to zasadniczo rdzeń tego, jak działają formularze. Będziemy wracać do formularzy, gdy będziemy rozmawiać o JavaScriptcie, gdzie będziemy z nim więcej współpracować, ale przynajmniej możemy zobaczyć, jak możemy stworzyć prosty formularz na stronie.

Jeśli coś jest nie zrozumiałe zapraszam do zobaczenia video!

Dodatek – dodatkowe pola formularza HTML 5

Cała zawartość kursu wideo HTML5, CSS, JavaScript, jQuery