Formularze

KURS CSS                   KURS HTML

• Index HTML
• Formatowanie tekstu
• Formularze
• Grafika i multimedia
• Hiperłącza
• Listy
• Wlasciwosci listy

Formularze to narzędzie do gromadzenia danych. Zazwyczaj współpracują z bazami danych. Tutaj poznajemy tylko ich strukturę. Formularz otwieramy znacznikiem <form> z atryutami action i method. Atrybut action to określenie zachowania się danych po wysyłaniu (do jakiego pliku mają być przekazane), method - określenie sposobu przesyłania (do wyboru GET lub POST).

Elementy formularza

• Pole INPUT: służy do wprowadzania do tekstu, posiada atrybuty:
  • name - nazwa pola i zmiennej którą będą przesyłane dane, nie może się powtarzać w formularzu
  • value - domyślna wartość pola
  • size - liczba znaków w widocznej części pola
  • maxlength - maksymalna liczba znaków
  • type - typ pola
    • "text" - pole tekstowe
    • checkbox - pole opcji (można zaznaczyć kilka)
    • radio - pole wyboru (zaznacza tylko jedną)
    • password - pole hasła (znaki zastępowane kropkami)
    • file - dołączanie plików
• przyciski:
  • submit (wysyłanie)
  • reset (odświeżanie)
  • button (przycisk o defioniowanym działąniu)
• pole select - pozwala wybierać określoną wartość (lista rozwijalna)
• textarea - pole opisu

Etykieta

Opis pola, który wyświetla się na formularzu nie jest związany z tym polem. Używanie znacznika <label> wiąże tekst etykiety z polem. Efekt jest taki, że kliknięcie zarówno w pole jak i w etykietę zaznacza lub doznacza pole. Tekst atykiety może być zdefiniowany zarówno przed jak i po definicji IMPUT. Etykiety można przypisywać wszystkim typom pól forumalarza.

<label><input type="checkbox" name="nazwa" value="wartość">Etykieta pola</label>

<input type="checkbox" name="nazwa" value="wartość" id="pole"><label> for="pole">Etykieta pola</label>

Przykładowy formularz

Hasło Nazwisko:
Imię:

płeć:

Mężczyzna
Kobieta

zainteresowania: (efekt zastosowania znacznika <fieldset>)

Informatyka
Żeglarstwo
Jazz
Góry
Gry

wiek:

Wybierz z listy 0-10 11-15 16-20 21-30 31-40 41-50 >50

Znacznik <select> może mieć atrybuty:
size=n - określa ile pozycji listy jest widocznych,
multiple - pozwala na zaznaczanie wielu opcji.
Znacznik <option> może mieć atrybuty:
selected - pozycja dla której został zdefiniowany jest zaznaczona
value - określa wartości przypisana do pozycji listy.

znane języki

Polski Rosyjski Czeski Niemiecki Angielski Francuski Włoski Hiszpański
Napisz coś o sobie:

Pole wyboru z możliwością dodania wartości

  

Grupowanie elemntów formularza

HTML daje możliwość grupowania wybranych elementów formularzy. Wykonujemy to znacznikiem <fieldset> z pomocniczym znacznikiem <legend> definiującym położenie "tytułu grupy" (atrybut align). Przkład:

<fieldset>
<legend align="left">hobbd y</legend>
pola zainteresowań
</fieldset>

Listy zagnieżdżone

Stosując znaczniki<select> i <option> definiujemy listę wartości. Takiej liście można nadać strukturę wielopoziomową przy pomocy znacznika <optgroup> z atrybutem label określającym tytuł grupy, czyli tytuł podmenu.

Usprawnienia w formularzach

Język HTML5 wprowadza nowe znaczniki i atrybuty usprawniające obsługę formularzy.

Autofocus

Ustawia automatycznie kursor w wybranym polu formularza.

Autocomplete

Wyłącza autouzupełnianie pola lub całego formularza;wartości: on lub off.

Datalist

To opcja pozwalająca na wprowadzenie do listy wartości, nowej wartości. Konstrukcja:

< input type="text" name="blok" list=""język>
< datalist id="jezyk">
< option>Polski
< option>Angielski
< option>Włoski

Stwórz nową stronę o nazwie Formularz DO, daj nagłówek h3 dane do dowodu osobistego i skonsktrułuj taki formularz zawierający takie dane. Pole nazwisko imie drugie imie typu textowego o maksymalnej długości wpisu 25 znaków.Data urodzenia rozbita na 3 listy opcji osobno dla dnia miesiąca i roku. Pole płeć typu radio. Wzrost typu text, kolor oczu jako lista rozwijalna.Pesel typu text.Znaki szczególne jako pole typu text area 30 znaków na długość i 2 wiersze na wysokość. Pod spodem przycisk wyczyść i wyślij.

Jakub B.