Formularze

Karta pracy 2017/2018

Adres:
plotkarka.eu/KP/formularze.html
Autor:
Radosław Kowaluk

Wyszukiwarka

 

W swoim folderze roboczym utwórz dokument formularze.html (wykorzystaj plik szablonstrony1.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>Formularze</title>
 </head>
 <body>

 </body>
</html>

Formularz1, określanie adresu przetwarzania2 i metody przesyłania danych3

W źródle pliku, w elemencie body dopisz kod.

 <body>
  <form action="http://www.google.pl/search"
  method="get">

  </form>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Elementy formularzy4 (typ5, nazwa6 i wartość7) – pole tekstowe, przycisk akcji „submit” (wysłanie).

W źródle pliku, w elemencie form dopisz kod.

  method="get">
   <input type="text" name="q" value="war. domyślna"/>
   <input type="submit" value="Szukaj"/>
  </form>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Pola wyboru, wybór domyślny8 , lista opcji z pojedynczym wyborem

W źródle pliku, w elemencie form dopisz kod.

   <input type="text" name="q" value="war. domyślna"/>
   <p>Język: 
    <input type="radio" name="lr" value="lang_pl"/>
  polski
    <input type="radio" name="lr" value="lang_de"/>
  niemiecki
    <input type="radio" name="lr" value=""
     checked="checked"/>
  dowolny
    <input type="checkbox" name="safe" />Filtr
   </p>
  <input type="submit" value="Szukaj" />

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Rozwijalne pole wyboru9 i opcja wyboru10

W źródle pliku, w elemencie form dopisz kod.

 <input type="text" name="q" value="war. domyślna" />
 <select name="sitesearch">
  <option value="">Internet</option>
  <option value="plotkarka.eu">PLOTKARKA.EU</option>
  <option value="www.w3.org">W3C</option>
 </select>
 <p>Język:

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Definiowanie przycisku11 z akcją „reset” (wyczyszczenie)

W źródle pliku, w elemencie form dodaj kod.

 <input type="submit" value="Szukaj"/>
 <button type="reset" name="reset">
  <b>Wyczyść ustawienia</b>
 </button>
</form>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Formularz kontaktowy

Wielowierszowe pole tekstowe12

W źródle pliku, w elemencie body utwórz kod wykorzystaj metodę kopiuj-wklej.

  </form>
  <form method="post" action="mailto:nazwa@domena">
   <p>Imię:<br/><input type="text" name="imie"/></p>
   <p>Temat:<br/><input type="text" name="temat"/></p>
   <p>Wiadomość:<br/>
    <textarea name="wiadomosc"></textarea>
   </p>
   <input type="submit" value="Wyślij"/>
  </form>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Wgrywanie plików na serwer

Sprawdź poprawność kodu i umieść pliki ćwiczeniowe na serwerze.

  1. Element <form> - struktura formularza.
  2. Atrybut action - strona przetwarzania danych.
  3. Atrybut method - metoda przesyłania danych.
  4. Element <input> - elementy formularzy.
  5. Atrybut type - typ pola.
  6. Atrybut name - nazwa pola.
  7. Atrybut value - wartość pola.
  8. Atrybut checked - wybór domyślny pola formularza.
  9. Element <select> - grupuje opcje rozwijalnego pola wyboru.
  10. Element <option> - opcja rozwijalnego pola wyboru.
  11. Element <button> - przycisk akcji.
  12. Element <textarea> - wielowierszowe pole tekstowe.

Translator

Wielowierszowe pole tekstowe

W źródle pliku, w elemencie body utwórz kod wykorzystaj metodę kopiuj-wklej.

  </form>
  <form
 action="http://translate.google.pl/translate_t"
 method="get">
   <textarea name="q">Miejsce na tekst</textarea>
   <input type="submit" value="tłumacz"/>
  </form>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Lista opcji z wielokrotnym wyborem

W źródle pliku, w elemencie form utwórz kod wykorzystaj metodę kopiuj-wklej.

   <textarea name="q">Miejsce na tekst</textarea>
   <div>
   <input type="checkbox" name="sl" value="pl"/>
 polski
   <input type="checkbox" name="sl" value="auto"/>
 wykryj język
   </div>
   <input type="submit" value="tłumacz"/>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Długość1 i maksymalna liczba znaków2 pola tekstowego

W źródle pliku, w znaczniku input dopisz kod.

   <input type="text" name="q"  value="war. domyślna"
    size="25" maxlength="20">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Grupa3 i tytuł grupy4 pól formularza

W źródle pliku, w elemencie form utwórz kod wykorzystaj metodę kopiuj-wklej.

<form action="http://www.google.pl/search"
 method="get">
 <fieldset>
 <legend><small>Wyszukiwarka</small></legend>
...
...
 </fieldset>
</form>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Aktywna etykieta5 dla danego pola6 i identyfikator pola

W źródle pliku, w elemencie form (pierwszym) utwórz kod wykorzystaj metodę kopiuj-wklej.

 <legend><small>Wyszukiwarka</small></legend>
 <label for="szukajka">Szukaj:</label>
 <input type="text" size="25" name="q" id="szukajka"/>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Grupowanie opcji wyboru7

W źródle pliku, w elemencie select dopisz kod.

  <option value="">Internet</option>
  <optgroup label="domena:">
   <option value="plotkarka.eu">PLOTKARKA.EU</option>
   <option value="www.w3.org">W3C</option>
  </optgroup>
 </select>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Ilości kolumn8 i wierszy9 pola tekstowego

W źródle pliku, w znaczniku textarea dopisz kod.

   <textarea name="q" rows="5" cols="30">
Miejsce na tekst
   </textarea>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Ilości wierszy10 pola wyboru

W źródle pliku, w znaczniku select dopisz kod.

   <select name="sitesearch" size="2">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj formularz.

Wgrywanie plików na serwer

Sprawdź poprawność kodu i umieść pliki ćwiczeniowe na serwerze.

Nowe elementy w HTML5 11

  1. Atrybut size – długość pola tekstowego.
  2. Atrybut maxlength – definiuje maksymalną liczbę znaków w polu tekstowym.
  3. Element <fieldset> – grupuje elementy formularza.
  4. Element <legend> – zawiera tekst tytułu grupy.
  5. Element <label> - aktywna etykieta.
  6. Atrybut for - identyfikator elementu opisywanego.
  7. Element <optgroup> - grupuje opcje wyboru.
  8. Atrybut rows - definiuje ilość wierszy
  9. Atrybut cols - definiuje ilość kolumn
  10. Atrybut size - definiuje ilość wierszy pola wyboru.
  11. Elementy:
    <datalist> – lista danych.
    <keygen> – klucz.
    <output> – typ wyjściowy.
    <progress> – pasek postępu.
    <meter> – wartość.