formularze w html5

Atrybuty formularza:

• accept-charset – określa system kodowania znaków wprowadzanych do formularza, różne kodowania znaków oddzielamy spacją (nie przecinkiem czy średnikiem) – np. accept-charset=utf-8
• action – rodzaj akcji uruchamiany po wciśnięciu 'Send’, np. przypisany adres url, skrypt lub adres email
• autocomplete – zapisanie używanych słów w pamięci przeglądarki i ponowne ich wyświetlenie w podpowiedziach podczas uzupełniania pól, stany:
  • on (default)
  • off
• enctype – sposób kodowania danych – przeważnie korzysta ze stanu domyślnego i pozostaje pusty, jego słowa kluczowe/stany:
  • application/x-www-form-urlencoded (default)
  • multipart/form-data – dla przesyłanych plików
  • text/plain – akceptuje zwykły tekst
• method –
  • POST – gdy dane są pobierane i wysyłane, zgłaszanie długich żądań do serwera
  • GET – gdy dane są tylko pobierane<, zgłaszanie krótkich żądań do serwera/li>
• name
• novalidate – typ logiczny, nie weryfikuje wysyłanych elementów, np. <form novalidate>
• target – kontekst wyszukiwania formularza w trakcie wysyłania, wartości:
  • _self (default)
  • _blank – przydatny gdy informacja ze skryptu po stronie serwera zastępuje zawartość na wzywającej stronie swoją zawartością. Użytkownik widzi wzywaną stronę i informację ze strony wzywającej
  • _parent
  • _top

elementy wejścia i jego atrybuty

Element będący dzieckiem formularza może znajdować się poza formularzem poprzez połączenie go z ID formularza:

<input type="text" form="formid" name="name">


<form id="formid">
</form>

Formularze w html5 – wartości dla elementów danych wejściowych:

• button – przycisk akcji
• checkbox – wybór opcji
• color – wybór koloru
• date – wybór daty
• datatime – wybór daty/ czasu
• datatime-local – wybór daty/ czasu lokalnego
• email – adres e-mail
• file – załadowanie pliku
• hidden – ukryty
• image – współrzedne obrazka
• month – wybór daty
• number – wartość numeryczna
• password – wprowadzanie zakrytego hasła
• radio – pola wyboru
• range – zakres liczb
• reset – czyszczenie wprowadzonych danych
• search – szukanie słowa
• submit – wysłanie formularza
• tel – numer telefonu
• text – pole tekstowe
• time – wybór godziny
• url – adres strony
• week – wybór daty

 

Formularze w html5 – atrybuty elementu danych wyjściowych:

• accept – akceptacja rodzaju pliku
• alt – podpowiedź podczas ładowania pliku
• autocomplete – dokańcza wpisaną zawartość
• autofocus – uaktywnia pole
• checked – stan wybranej opcji
• disabled – nie aktywne pole
• form – id formularza
• formaction – nadpisanie formularza
• formenctype – nadpisanie formularza
• formmethod – nadpisanie formularza
• formnovalidate – nadpisanie formularza
• formtarget – nadpisanie formularza
• height – wysokość [px]
• list – lista danych z podpowiedzią
• max – wartość maksymalna
• maxlenght – długość maksymalna
• min – wartość minimalna
• multiple – wielowartościowość
• name – nazwa DOM
• pattern – wyrażenie regularne
• placeholder – podpowiedz pola znikająca podczas wpisywania wartości
• readonly – tylko do odczytu
• required – wymagane wypełnienie
• size – widoczny znak cyfry
• src – źródło
• step – liczba kroków
• type – rodzaj danych
• value – wartość
• width – szerokość [px]

type=”number” – kontrolki spinner do zwiększania/zmniejszania wartości wpisanej w pole

 

np.:

<input type="checkbox" name="news" checked/>

Pola Formularza:

• input, type=
  • text– pole tekstowe
  • search – pole tekstowe do wpisania słów szukanych, po wprowadzeniu treści pojawia się ikona x do usunięcia wpisanej treści
  • tel – numer telefonu
  • url – adres strony
  • email – adres email
  • datetime – pole do wprowadzenia liczby daty i czasu dla strefy UTC w formacie rrrr-mm-ddThh:mmZ
  • date – liczba daty w formacie: rrrr-mm-dd
  • mounth – liczba daty w formacie rrrr-mm
  • week – liczba daty w formacie rrrr-numer tygodnia
  • time – liczba czasu w formacie ff:mm:ss
  • datetime-local – liczba daty w formacie rrrr-mm-ddThh:mm
  • number – liczba, pole z opcjami + / – do łatwiejszej nawigacji
  • range – zakres, suwak wartości liczbowej, atrybuty:
    • min
    • max
    • step
  • color – format koloru sRGB, paleta kolorów
  • image – przycisk graficzny z własnym elementem graficznym, atrybuty:
    • alt – tekst alternatywny
    • src – źródło obrazka
  • checkbox – opcje zaznaczenia, możliwość zaznaczenia wielu opcji
  • radio – opcje zaznaczenia, tylko jedna możliwość do wyboru, wszystkie opcje muszą mieć ten sam atrybut name
  • password – wprowadzenie hasła, tekst zamieniany na gwiazdki
  • file – załączenie pliku do formularza, atrybut:
    • multiple – zamieszczenie więcej niż jednego pliku
  • hidden – niewidoczne pole tekstowe
  • submit – wysłanie formularza, wykonanie action
  • reset – usunięcie zawartości pól formularza
  • button – przycisk

 

Atrybutu pól:

• name
• value
• size –  widoczna ilość znaków
• maxlenght – maksymalna ilość znaków do wprowadzenia w pole
• list dla pola tekstowego z zawartą pod nim listą

<form>
 <input type="text" name="summit" list="summits">
 <datalist id="sumits">
<option value="Everest">Everest</option>
<option value="Kilimanjaro">Kilimanjaro</option>
<option value="Denali">Denali</option>
 </datalist>
</form>

 

• select – lista wyboru, atrybuty:
  • multiple – pozwala na wybranie kilku opcji
  • size – ilość pozycji listy widocznych na ekranie

podział na kategorie dzięki znacznikowi <optgroup> z atrybutem label wyświetlającym w liście opis grupy.

 

• textarea – wprowadzanie większej ilości treści

<textarea name="description" rows="10" cols="50">Write something to me</textarea>

 

atrybuty pola textarea:

• rows – wielkość pola
• cols – wielkość pola
• autofocus – oznaczenie pola w chwili wczytania strony przez przeglądarkę
• disabled – pole z wyłączoną edycja treści
• required – pole wymagane
• maxlenght – ograniczenie liczby znaków
• placeholder – domyślny tekst
• readonly – pole tylko do odczytu
• wrap – określenie podziału treści wpisanej w pole, wartości:
  • hard – wymusza dodanie podziału wiersza
  • soft – tekst bez zmian

 

Znaczniki grupujące pola formularza:

• fieldset
• legend – etykieta pola fieldset
• label – oznaczenie tekstu będącego opisem pola formularza, zamykając w nim znacznik <input /> lub zamieszczając go nad nim z atrybutem for

<label for="mountain">Mountain:</label>
<input type="text" id="mountain" />

 

• meter – graficzny wskaźnik

<fieldset>

<legend>Elevation of Mountains</legend>



Mount Everest <meter min="6000" max="10000" value="8848"></meter>



Mount Everest <meter min="0%" max="100%" value="88%"></meter>

</fieldset>

• progress – graficzna reprezentacja funkcji JavaScript odpowiedzialnej m.in. za upływ czasu

Progress: <progress id="progress" max="100">0%</progress>

• output – zwraca wynik obliczeń

<form onsubmit="return flase">
 <input name="a" type="number" step="any"> + 
 <input name="b" type="number" step="any"> =
 <output onforminput="value a.valueAsNumber + b.valueAsNumber"></output>
</form>

 

CSS:

input[type=”radio”] {

}
input[type=”text”].focus, input[type=”text”]:focus {

}

 

<form enctype="multipart/form-data" action="kontakt.php" method="post" id="searchForm" >
<p>
<input type="text" name="login" size="25" maxlength="25" class="wpis-search" value="wpisz szukaną frazę"/>
<input type="submit" name="search" value="" class="wyslij-search"/>
</p>
</form>
<input type="text" name="lokalizacja" value="gmina" class="pole-1 required"
onfocus="if (this.value=='gmina') { this.value=''; }"
onblur="if (this.value=='') { this.value='gmina'; }" />

–