Elementy składowe II

with Brak komentarzy

Ciąg dalszy zmagań z HTML. Wbrew pozorom to tylko tak strasznie wygląda, jeśli zaczniesz samodzielnie wpisywać znaczniki w plik … samo wszystko będzie się logicznie układać. A ta satysfakcja! Działaj.

Tabele

To taki mogłoby się wydawać niepozorny element… A często sprawia problem.
Wszystkie dane, które chcesz przedstawić w formie tabeli, najpierw najlepiej sobie to wyobrazić. Aby utworzyć tabelę, potrzebujemy kolumn i wierszy (oczywiście😁). Tworzą one dwie osie, na ich przecięciu mamy komórkę tabeli.

 Schemat tabeli

Aby zbudować tabelę, potrzebujemy trzech podstawowych elementów:

  • <tabele></tabele> – to znacznik tworzący tabelę. Musisz pamiętać, że tabela zapisywana jest jako kolejne wiersze,
  • <tr></tr> – to znaczniki oznaczające jeden wiersz; t – z ang. tabele, r – z ang. row, czyli wiersz,
  • <td></td> – to znacznik oznaczający jedną komórkę; td – z ang. tabele data, czyli dane tabeli.

Poniżej przykład tabeli z dwoma wierszami i trzema kolumnami, czyli trzema komórkami w każdym wierszu.

<tabele>
  <tr>
     <td>pierwsza kolumna</td>
     <td>druga kolumna</td>
     <td>trzecia kolumna<td>
  </tr>
  <tr>
     <td>pierwsza kolumna drugi wiersz</td>
     <td>druga kolumna drugi wiersz</td>
     <td>trzecia kolumna drugi wiersz<td>
  </tr>
</tabele>

Dodatkowe znaczniki tabeli

Aby nadać bardziej wyrazistego stylu tabeli (poza ostylowaniem w CSS) możemy użyć jeszcze kilku znaczników.

  • <th></th> – to znacznik do oznaczenia nagłówka, czyli nazwania poszczególnych kolumn (z ang. tabele heading, czyli nagłówek tabeli). Nagłówki powinno się tworzyć, nawet jeśli pozostaną puste. Za pomocą atrybutu scope określamy, czy nagłówek dotyczy wiersza (wartość “row”), czy kolumny (wartość “col”).
  • <thead></thead> – to znacznik oznaczający nagłówek tabeli, to wewnątrz nich umieszczamy poszczególne nagłówki kolumn, czyli <th></th>
  • <tbody></tbody> – ciało tabeli, tu umieszczamy poszczególne komórki, czyli <td></td>, 
  • <tfoot></tfoot> -to stopka tabeli, w niej umieszczamy np. podsumowanie danych komórek.
Przykład tabeli z użyciem <th>:

<tabele>
 <tr>
   <th></th>
   <th scope="col">nagłówek kolumny 1</th>
   <th scope="col">nagłówek kolumny 2</th>
 </tr>
  <tr>
   <th scope="row">nagłówek wiersza</th>
   <td>wartość 1</td>
   <td>wartość 2</td>
 </tr>
</tabele>

Przykład tabeli z użyciem pozostałych znaczników:

<tabele>
   <thead>
     <th>coś</th>
     <th>jeszcze coś</th>
   </thead>
   <tbody>
     <tr>
     <th>coś2</th>
     <td>inne coś</td>
     </tr>
   <tbody>
   <tfoot>
     <tr>
     <td></td>
     <td>razem coś</td>
    </tfoot>
</tabele>

Pomocne atrybuty

Łączenie kolumn

Łączymy komórki sąsiadujących kolumn. Aby tego dokonać, potrzebujesz atrybutu colspan, którego wartością jest liczba kolumn, ile łączymy. Ten atrybut dotyczy znaczników <th> oraz <td>.

<td colspan="2">dwie kolumny złączone</td>

Łączenie wierszy

Podobnie jak wyżej, aby połączyć sąsiadujące wiersze, używamy atrybutu. Jest to rowspan z wartością odpowiadającą liczbie łączonych wierszy.

Formularze

Formularze na stronie internetowej znajdziemy prawie zawsze. Zapis na newsletter, wyszukiwarka, archiwum bloga i wiele, wiele innych. 
Aby stworzyć formularz musimy, przede wszystkim określić typ poszczególnych pól. Każdy formularz służy do przesłania na serwer jakiś danych np. pisząc jakichś komentarz na blogu. Po stronie serwera dzieje się magia (😜żarcik!), czyli z pomocą programu napisanego np. w Java lub PHP (to języki programowania stosowane w back-endzie) dane zostają przeanalizowane, tworzona jest nowa strona i wysyłana jest ponownie do przeglądarki. Ot co! I już. Proste… ha wiem, wiem… trochę za moc… 

Schemat formularza

Aby zbudować formularz, musisz pomiędzy znacznikami <form></form> umieścić pola formularza. Do tego znacznika dodajemy również atrybuty: action, method oraz id.

  • action – jego wartością jest adres strony na serwerze, do której wysyłamy dane formularza;
  • method – jego wartość to get (kiedy stosujemy proste formularze, pobieramy dane z serwera) lub post (kiedy przesyłamy pliki, formularz jest duży, zawiera dane poufne np. hasła, dodajemy lub usuwamy dane z bazy danych).
  • id – służy do identyfikacji (co oczywiste 😜) danego formularza.

Lebel

Etykiety pozwalają połączyć z konkretnym polem. Aby tego dokonać, można pole umieścić wewnątrz etykiety (<lebel></lebel>) lub dodać atrybut for. Atrybut ten ma taką samą wartość jak id pola.

Grupowanie 

Aby zgrupować więcej pól formularza, należy użyć znacznika <fieldset></fieldset>.
Możemy również wyświetlić nazwę całego formularza za pomocą <legend></legend>, który to znacznik umieszczamy zaraz za otwierającym <fieldset>.

Pola

Pole tekstowe

  <lebel for="name">Nazwa</lebel>
  <input type="text" id="name">

Pole hasła

  <lebel for="password">Hasło</lebel>
  <input type="password" id="password"> 

Pole wielotekstowe

  <lebel for="comment">Komentarz:</lebel>
  <textarea rows="10" cols="30" id="comment"></textarea>

Pola radio

Są to pola jednokrotnego wyboru. 

<label for="radiobuttonA">
  <input type="radio" id="radiobuttonA" name="ThisButton">
  Wybierz A
</label>
<label for="radiobuttonB">
  <input type="radio" id="radiobuttonB" name="ThisButton">
  Wybierz B
</label>

Pola checkbox

Są to pola wielokrotnego wyboru. Można tu również usuwać zaznaczenia (w odróżnieniu od typu “radio”.

<label for="checkboxA">
  <input type="checkbox" id="checkboxA" name="myButtonGroup">
  Przycisk A
</label>
<label for="checkboxB">
  <input type="checkbox" id="checkboxB" name="myButtonGroup">
  Lub przycisk B
</label>

Pola dropdown

Listy rozwijane pozwalają wyświetlać kilka opcji do wyboru. Potrzebujemy tu znaczników: <select></select> oraz <option></option>, które przyjmuje odpowiednią wartość (value).

<label for="letters">Wybierz literę</label>
<select id="letters">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="d">D</option>
</select>

Pola wielokrotnego wyboru

Mamy tu rozwinięcie opcji opisanej powyżej. Z listy dostępnych opcji możemy zaznaczyć kilka. Aby tego dokonać, musisz użyć atrybutu multiple z wartością również multiple. Umieszczamy go w znaczniku otwierającym <select>.

<label for="letters">Wybierz literę</label>
<select id="letters" multiple="multiple">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="d">D</option>
</select>

Pola przesłania plików

<label for="fileUpload">Prześlij Plik</label>
<input type="file" id="fileUpload">

Pola przycisku

<label for="Submit">Zapisz się</label>
<input type="submit" id="Submit">

Pola daty

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

Pola e-mail oraz URL

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

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

Pola wyszukiwania

<label for="search">Wyszukaj:</label>
<input type="search" id="search">
<input type="submit" value="Szukaj">

np. Wyszukujemy jeden wyraz
<label for="search">Wyszukaj:</label>
<input type="search" id="search" placeholder="Poszukiwany tekst">
<input type="submit" value="Szukaj">

np. dodajemy podpowiedź

Weryfikacja pól

Jest to o tyle pomocne, że zaznaczane są błędy w formularzu. Wykorzystasz do tego celu atrybut required o wartości required.

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

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

Uff… zebrało się tego trochę, a jeszcze to nie koniec. Będzie część trzecia i postaram się na niej zakończyć. Dodatkowo napiszę ściągi wszystkich znaczników. Pozdrawiam i zapraszam do uczenia się HTML.👩‍💻😜

Dołącz do społeczności bloga

Signup now and receive an email once I publish new content.

Wyrażam zgodę na przekazywanie moich danych osobowych MailChimp ( more information )

Twój e-mail będzie chroniony. W każdym momencie będziesz mógł/mogła się wypisać.

Follow Danuta:

Blogująca mama dwóch chłopców. Ciągle ucząca się i poszukująca pomysłu na siebie. Obecnie pogłębiająca tajniki programowania.

Latest posts from

Zostaw komentarz