Struktura strony i formularze

DOKUMENT
HIPERTEKSTOWY III
Struktura strony i formularze
<header>
• określa nagłówek dla dokumentu lub sekcji
<header>
<h1>Biblioteka miejska</h1>
<p>Wypożyczalnia książek on-line</p>
</header>
<nav>
• Nawigacja, grupuje linki służące do poruszania się po
stronie
<nav>
<ul>
<li><a kref="/about/">O stronie</a></li>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/contact/">Kontakt</a></li>
</ul>
</nav>
<article>
• określa niezależną, samodzielną treść na stronie
• powinien mieć sens sam w sobie i po oddzieleniu od
strony, nadal powinien być zrozumiały
• Potencjalne miejsca dla <article> na stronie:
 post z forum
 wpis na blogu
 informacja prasowa
 komentarz
<section>
• określa sekcje w dokumencie tj. rozdziały, nagłówki,
stopki
• używa się do tematycznego grupowania treści na stronie
<section>
<h1>Najnowsze wiadomości</h1>
</section>
<section>
<h1>Najstarsze wiadomości</h1>
</section>
<aside>
• określa treść dodatkową, związaną z otaczającą go
treścią
• np. boczne paski, krótkie wyjaśnienia.
<footer>
• definiuje stopkę dokumentu lub sekcji
• powinien zawierać informację na temat treści w której jest
zawarty np. autor artykułu, dane kontaktowe itp.
<div>
• określa podział lub sekcję w dokumencie
• nie ma żadnego semantycznego znaczenia
Elementy blokowe vs liniowe
• <div> - element blokowy, zajmuje całą dostępną
szerokość. Poszczególne elementy blokowe zaczynają
się od nowej linii i układają jeden nad drugim. Elementy
blokowe mogą zawierać się nawzajem, mogą również
zawierać elementy liniowe.
<div>
<h1>Rozdział I</h1>
<p>Dawno dawno temu, za siedmioma górami, za siedmioma
lasami…</p>
</div>
Elementy blokowe vs liniowe
• <span> - element liniowy, należy do normalnego
przepływu dokumentu. Nie zaczyna się od nowej linii,
poszczególne elementy liniowe będą układać się koło
siebie. Jego szerokość związana jest bezpośrednio z
treścią którą otacza, zazwyczaj jest to jedno słowo lub
grupa słów. Element liniowy nie może zawierać w sobie
elementu blokowego.
<div>
<h1>Rozdział I</h1>
<p>Dawno dawno temu, za siedmioma<span>górami </span>,
za <span>siedmioma lasami</span>...</p>
</div>
Formularze
• <form action="/search" method="post"> </form>
• action - definiuje miejsce, gdzie zostaje przesłany
wypełniony formularz
• method - definiuje sposób wysyłania formularza. Możliwa
jest metoda post i get.
Wprowadzanie danych
• <input>
• pole dzięki, któremu można wprowadzić dane
• posiada tylko atrybuty:
 type
 name
 value
 required
 placeholder
Typy pól formularza
• text
<input type="text" name="username">
FireFox
Chrome
Internet Explorer
Typy pól formularza
• url
<input type="url" name="web">
• email
<input type="email" name="useremail">
• date
<input type="date" name="birthday">
• tel
<input type="tel" name="userphone">
• number
<input type="number" name="luckynumber">
Typy pól formularza
• <textarea>
• służy do wprowadzania wielu linii tekstu np.:
komentarz, opinia, notatka, dodatkowe uwagi.
<textarea name="comments">Tutaj wpisz komentarz</textarea>
Typy pól formularza
• Formularze wyboru – radio
<input type="radio" name="drink" value="tea"> Herbata
<input type="radio" name="drink" value="coffee" checked> Kawa
<input type="radio" name="drink" value="cola"> Coca-cola
<input type="radio" name="drink" value="juice"> Sok
Typy pól formularza
• Formularze wyboru – checkbox
<input type="checkbox" name="drink" value="tea"> Herbata
<input type="checkbox " name="drink" value="coffee"> Kawa
<input type="checkbox " name="drink" value="cola"> Coca-cola
<input type="checkbox " name="drink" value="juice"> Sok
Typy pól formularza
• Formularze wyboru – select
<select name="city">
<option value="Krakow">Kraków</option>
<option value="Mediolan">Mediolan</option>
<option value="Barcelona" selected>Barcelona</option>
<option value="Trewir">Trewir</option>
</select>
Wysyłanie formularza
• submit
<input type="submit" value="submit">
<button type="submit">Wyślij formularz</button>
FireFox
Chrome
Internet Explorer
Opis formularza
• <fieldset> służy do grupowania powiązanych ze sobą elementów
• <legend> określa tytuł dla grupy elementów zawartych w <fieldset>
• <label> to etykieta opisująca wypełniane pole
<form>
<filedset>
<legend>Dane osobowe:</legend>
<label for="username">Imię:</label>
<input type="text" name="name" value="username"> placeholder="Wpisz
imię">
<label for="lastname">Nazwisko:</label>
<input type="text" name="name" value=„lastname"> required>
</fieldset>
</form>
Zadanie
• Za pomocą dziś poznanych znaczników html5 stwórz stronę, za
pomocą której będziesz mógł zapisać się na dowolny kurs. Strona
powinna zawierać nazwę, krótki opis kursu oraz formularz
rejestracyjny zawierający takie pole jak: imię, nazwisko, adres e-mail,
numer telefonu, adres zamieszkania, pole na ewentualne pytania
kursantów. Ponadto formularz powinien pozwolić kursantowi dokonać
wyboru jednego spośród kilku terminów kursu.
• <header>, <nav>, <section>, <article>, <aside>, <footer>, <div>,
<span>, <form>, <legend>, <fieldset>, <label>, <input>, <textarea>