Technologie internetowe - Sekcje i formularze

1. Sekcje w HTML5 są elementami blokowymi, które zastąpiły element <div> . Nowe elementy blokowe w HTML5:
  • article (pozwala oznaczyć sekcję dokumentu będącą oddzielną, niezależną jego częścią)
  • aside (w niej umieszczamy elementy, które nie mają bezpośredniego związku z główną treścią)
  • footer (umieszczamy informacje o autorze, dacie powstania strony, informacje o prawach autorskich itp.)
  • header (umieszczamy logo oraz menu główne)
  • main (przeznaczona do umieszczania głównej treści strony)
  • nav (wskazania głównej nawigacji na stronie internetowej)
  • section (sekcja ogólnego przeznaczenia)
2. Projektowanie layoutu strony oznacza, że projektujemy układ strony i poszczególnych jej sekcji. Sekcje służą do grupowania elementów html (do header`a możemy dać logo strony, i nawigację, a do main - główną część strony)

3. Sekcje strony:

<div> - element blokowy służący do budowy sekcji (tzw. kontener) (standard do HTML4 włącznie)

np.
<div>
    <p>KONTENER</p>
</div>

Aby zmodyfikować element div musimy zrobić to poprzez CSS. Najlepiej nadać mu id lub klasę, aby móc dowolnie modyfikować (np. ustawiać szerokość, wysokość, kolor tła itp.) dany element blokowy lub grupę elementów blokowych.

Od HTML5 zamiast ogólnego div`a używa się elementów blokowych, które ściśle określają co dana sekcja oznacza tj. footer, main itp.

np.
<header>
<p>Strona główna</p>
</header>
<nav>
<a href="mojastrona.pl/kontakt">Kontakt</a>
<a href="mojastrona.pl/ja">O mnie</a>
</nav>
<main>
<h1> Witaj! </h1>
</main>
<footer>
<h6>Stworzył Anonim</h6>
</footer>

Ważnym jest, aby w CSS nadać nowym elementom sekcji blokowy charakter. W przeciwnym wypadku elementy te mogą nie wyświetlać się poprawnie.

header, nav, main, aside, footer, article, section {
display: block;
}

4. Formularze tworzymy poprzez zastosowanie elementu <form>.

Najpopularniejszym elementem html pozwalającym na wprowadzenie danych przez użytkownika jest element <input> (element samozamykający). Wymaga on deklaracji typu:

np.
<input type="text">

Atrybut value, który pozwala na ustawienie wartości domyślnej.
Atrybut disabled zablokuje możliwość edytowania pola <input>

Rodzaje <input>:
  • password 
  • button
  • color
  • date
  • datetime
  • FileUpload
  • hidden
  • image
  • month
  • range
  • search
  • time
  • url
  • week
  • label
Atrybut placeholder pozwala na wyświetlenie tekstu pomocniczego (znika po wpisaniu jakiś danych)

Inne bardzo ważne typy <input>
  • radio (z listy wyboru mamy do wyboru jedną do wyboru)

<p>Please select your age:</p>
  <input type="radio" id="age1" name="age" value="30">
  <label for="age1">0 - 30</label><br>
  <input type="radio" id="age2" name="age" value="60">
  <label for="age2">31 - 60</label><br>  
  <input type="radio" id="age3" name="age" value="100">
  <label for="age3">61 - 100</label><br><br>

Name musi być taki sam dla całej jednej grupy z której mamy podjąć wybór, natomiast value musi być inne. 

Atrybut checked pozwala zaznaczyć dany radio button/checkbox jako domyślnie zaznaczony.
  • checkbox (używane do potwierdzania np. zgód)
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
  • textarea - obszar do wpisywania dłuższego tekstu (atrybut cols umożliwia sprecyzowanie na ile znaków ma być szerokość pola do wpisywania, natomiast atrybut rows precyzuje na ile rzędów). 
  • select - lista rozwijana (elementy na liście są pomiędzy znacznikami <option>)


<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Atrybut selected pozwala ustalić wartość domyślną.(w znaczniku otwierającym option). Atrybut multiple pozwala na zaznaczenie więcej niż jednej opcji (w znaczniku otwierającym select).
  • submit - przycisk przesyłający dane wypełnione w formularzu. Dane z formulara mogą zostać zapisane bezpośrednio na naszym serwerze, w bazie danych lub przesłane na inny serwer.  W celu wysłania danych naszym formularzem html, musielibyśmy stworzyć plik z instrukcjami np. w języku PHP i zapisać go w folderze z naszą stroną internetową np. pod nazwą form.php. Do elementu <form> dodalibyśmy następnie atrybut action, który wskazywałby ścieżkę dostępu do naszego pliku form.php. Po naciśnięciu klawisza submit akcja z pliku form.php zostałaby wykonana.
<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Komentarze w HTMLu znajdują się pomiędzy znacznikami <!-- a --> . Wszystko co jest pomiędzy tymi znacznikami nie istnieje dla języka HTML. Komentarze nie są nigdzie wyświetlone. Są tylko narzędziem pomocy dla programistów, w celu połapania się w kodzie.

Czyli np.

<!-- To jest komentarz -->