HTML

HTML #2 – tabelki, formularze, identyfikatory

Generalne podstawy już znasz po części pierwszej, zatem możemy ruszać dalej – zajmiemy się tworzeniem tabeli i formularzy.

 

Standardowo postaram się opisać działanie na przykładzie, stworzyłem tabelę, która posiada podział na sekcje „thead”, „tbody” (czyli głowa i ciało tabeli), dodałem nagłówek do tabeli „caption”, a także uzupełniłem ją listą produktów.

Tworzenie tabeli rozpoczynamy od elementu „table” (ja na potrzebny wpisu dodałem jeszcze parametr „border” – czyli obramowanie, nie polecam używania takich parametrów(powinno dodać się je w CSS, ale do tego jeszcze dojdziemy)), następnie dodałem element „caption”, który jest nagłówkiem (nie trzeba go dodawać).

W thead zazwyczaj dodajemy główne odniesienia do tabeli jak „cena”, a poniżej dla każdego produktu wpisujemy już kwotę PLN, dzieje się to w elementach „tr„, które służą za tworzenie nowego wiersza (w poziomie), a następnie „th” nowej kolumny (w pionie).

tbody wygląda prawie identycznie, zamiast „th”, dajemy „td” jako nowa kolumna.

Można dodać jeszcze element „tfoot„, który służy za stopę tabeli – najczęściej znajduje się tam paginacja (czyli dzielenie na strony wyników tabeli, jeżeli mamy ich bardzo dużo i chcemy ukazać tylko po 10 podmiotów).

 

 

Proste, prawda? Przejdźmy do formularzy..

Gdzie znajdziemy dla nich zastosowanie? – jako formularze logowania, wyszukiwania treści, wprowadzania danych, włączania pewnych funkcji na stronie.

Najprostszy formularz będzie składał się z pola do wpisania danych i przycisku na zatwierdzenie

Ale… to nie wszystko 🙂

Formularz musi wiedzieć, gdzie się odwołać (dokąd wysłać uzupełnione dane), a także jaką metodą „GET” (czyli za pomocą paska na adres strony URL – dane są wtedy widoczne dla każdego jako adres, jest je prościej wykraść/przechwycić) lub „POST” (zostają przesyłane w tle i w taki sposób polecam przesyłać hasła i loginy 😉  ).

Teraz pierwsza linijka formularza będzie wyglądać jak poniżej, dodaliśmy „action” (czyli akcję, obecnie skierowaliśmy dane z formularza do pliku formularz.html), a także ustawiliśmy metodę „POST„.

 

Każdy element formularza posiada pewne dane (jak pewnie zauważyłeś „input” posiada „type” i „name”), co to i jak tego używać?

  • type – tutaj deklarujemy jaki typ danych będziemy przesyłać tym polem, do wyboru mamy np. text, number, password, email, submit, hiddenwięcej tutaj
  • name – nadajemy nazwę elementu w formularzu, aby później móc się do niego łatwo odwołać (będzie to dowolna nazwa, oczywiście bez polskich znaków i spacji)
  • value – możemy w tym miejscu wpisać wartość dla pola, która będzie domyślnie uzupełniona
  • placeholder – jest to tekst wpisany w tle pola, np. „Wpisz tutaj wartość szukaną” – po kliknięciu w pole, tekst zniknie i będziemy mogli wpisać wartość

 

Oczywiście formularz to nie tylko pola do wpisywania tekstu, posiada on inne możliwości:

Wybór auta z listy za pomocą „select” – (aby móc wybierać wiele elementów z takiej listy musimy dodać parametr „multiple„) w sposób prezentowany poniżej:

Lista ze zwykłym wyborem (pojedynczym):

 

Pole z długim tekstem „textarea” – posiada ono dodatkowo 2 parametry „rows” (określa ile linijek tekstu chcemy pokazać) i „cols” (określa jaką szerokość pola chcemy uzyskać):

 

Zamiast przycisku w formacie „input”, możemy użyć również element „button” – działa na tej samej zasadzie, czyli zatwierdza formularz (polecam używać jednak formę input – do zwykłych formularzy w zupełności wystarczy):

 

Możemy również dodać wybór opcji np. Płeć – tutaj zastosujemy typ elementu input „radio„, wszystkie możliwości muszą posiadać taką samą zmienną „name”, ale inną wartość „value”. Zauważyłeś pewnie, że pierwszy wybór ma wpisany parametr „checked” na końcu input – oznacza to, że będzie on domyślnie zaznaczony.

 

Czy wybór tylko jednej rzeczy z listy jest wystarczający, a co w przypadku kiedy chcemy zaznaczyć jakie przedmioty lubimy w szkole? Tutaj przychodzi z pomocą pole typu „checkbox” – dodając pola o jednakowym parametrze „name” i innej wartości „value” możemy wybrać swoje ulubione przedmioty.

 

 

Identyfikatory w HTML to bardzo ważna rzecz, wykorzystuje się je do oznaczenia elementów na stronie, powiedźmy że dodajemy element „div”, ma on odpowiadać za oprawę całej sekcji wyświetlania produktu na stronie, następnie będziemy chcieli się do tej sekcji odwołać w innym języku programowania i pytanie, jak zrobić to w prosty sposób?

Odpowiedź jest prosta: Dodając zmienną „id„, jest to identyfikator dla jednego elementu na stronie (nie może się on powtórzyć!), natomiast do wielu takich samych elementów możemy również nadać nazwę, powiedźmy że na stronie mamy listę książek – utworzyliśmy sekcje dla każdej książki i chcemy się do nich odnieść, tutaj już NIE użyjemy identyfikatora, a posłużymy się zmienną „class„, klas może być w jednym elemencie wiele i oddzielamy je spacją ” „.

Jak widzisz na przykładzie sekcja zamówienia posiada identyfikator (możemy również dodać tam klasy 🙂 ), a sekcja książki posiada 3 klasy „ksiazka„, „wyrozniona„, „promocja„.

 

 

Zadanie do wykonania

Zmodyfikuj z HTML #1 lub stwórz stronę na której będzie wyświetlona tabela z listą książek w księgarni, na samym dole strony dodaj formularz zamówienia książki, należy dodać wybór książki z listy, pole akceptacji regulaminu i przycisk zatwierdzający zamówienie. Niestety formularz po zatwierdzeniu nie zwróci nam wyniku, jak również nie zamówi książki – do obsługi takich działań potrzebujemy dodać skrypt PHP lub jQuery, które również pojawią się wkrótce na blogu.

 

Jeżeli masz jakieś pytanie, coś było dla Ciebie słabo zrozumiałe – napisz w komentarzu, a postaram się bardziej zgłębić temat 🙂