HTML: formularze, wstęp.

article-thumbnail

Formularze – wstęp

Formularze służą do przesyłania danych wejściowych przez użytkowników danej witryny. Powinny być zawsze rozpoczęte od znacznika <form> i zakończone </form>. W zależności, między innymi od atrybutu action, może on służyć do komunikowania się z pocztą, skryptem JS czy PHP.

Atrybut action może przyjąć wartości, takie jak adres pliku .html lub .php czy też wysłać wiadomość pocztą za pomocą wartości mailto:adres@email, chociaż jest ona rzadko używana.

Głównym elementem składowym formularza jest pole <input>. Można do niego zdefiniować etykietę za pośrednictwem znacznika <label>. Pole odpowiada za komunikację pomiędzy klientem a przeglądarką i serwerem. Do grupowania wejść <input> służy <fieldset>, wraz z jego znacznikiem tytułu <legend>.

Podstawowy formularz obsłużony przez JavaScript Comodo Dragon (Chrome) – plik formularz.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><title>Formularze</title>
  </head>
  <body>
  <form name="form" action="formularz.html" method="post" onsubmit="alertInput()">
      <fieldset>
      <legend>Simple form</legend>
        <input type="text" name="form_input" value="Say something!">
        <input type="submit" name="" value="Send Me!">
      </fieldset>
      <script type="text/javascript">
        function alertInput(){
          var formIn = document.forms["form"]["form_input"].value;
          alert(formIn);
        }
      </script>
    </form>
  </body>
</html>

Formularze – komunikacja

Wejścia formularzy mogą służyć do komunikacji zarówno pocztowej, ze skryptami wykonywanymi po stronie serwera, jak i również ze skryptami wykonywanymi po stronie klienta.

Zarówno język PHP jak i JavaScript do komunikacji z formularzami używają wartości atrybutu name, stosowanego dla <form> oraz <input>. Określa on nazwę, pod którą będzie widoczny dany formularz lub element formularza.

Poniżej skupimy się na rodzajach i zasadach tworzeniu formularzy oraz uzdatnianiu ich do komunikacji. Pierwszym zasadniczym zagadnieniem będzie atrybut method, który definiuje sposób, w jakim zostanie wysłany formularz.

Istnieją dwie wartości metody wysyłania danych: method=”get”, metoda jawna, która wysyła dane z formularza, łącząc go do adresu strony po pytajniku; oraz method=”post”, metoda niejawna, bezpośrednio przekazujące dane z formularza do skryptu.

Aby zainicjować wysłanie formularza, musimy zdefiniować przycisk odpowiadający za wysłanie formularza, może to być <input> z wartością type=”submit” lub przycisk odwołujący się do skryptu JavaScript w formularzu.



Formularz z method=”get”, przed i po wysłaniu w Comodo Dragon (Chrome) – formularz_get.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><title>Formularze</title>
  </head>
  <body>
    <form action="formularz_get.html" method="get" id="formularz">
      <input type="search" name="looking-for" value="">
      <input type="submit" name="" value="Wyślij">
    </form>
  </body>
</html>

Formularz z method=”post”, przed i po wykonaniu funkcji readForm() w Comodo Dragon (Chrome) – formularz_post.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Formularze</title>
  </head>
  <body>
    <form action="formularz_post.html" method="get" name="formularz">
      <table>
        <tr>
          <td>WEJŚCIE:</td>
          <td>Imię: </td>
          <td><input type="text" name="infn" value="imię" id="infn"></td>
          <td>Nazwisko: </td>
          <td><input type="text" name="inln" value="nazwisko" id="inln"></td>
        </tr>
        <tr>
          <td>WYJŚCIE:</td><td>Imię: </td>
            <td><input type="text" readonly name="outfn"></input></td>
          <td>Nazwisko: </td>
            <td><input type="text" readonly name="outln"></input></td>
        </tr>
      </table>
      <button onclick="return readForm()">Przeczytaj wejście!</button>
    </form>
    <script type="text/javascript">
      function readForm(){

        //definicja zmiennych string z wejścia
          var firstname = document.forms["formularz"]["infn"].value;
          var lastname = document.forms["formularz"]["inln"].value;

        //przesłanie danych z wejścia do wyjścia
          document.forms["formularz"]["outfn"].value=firstname;
          document.forms["formularz"]["outln"].value=lastname;

/* powrócenie komunikatu fałszu w celu zablokowania ponownego wczytania
strony, dlatego też w znaczniku button onclick="return readform()" a nie
"readform()"; */

          return false;
      }

    </script>
  </body>
</html>


Autor tekstu: Jacek Woźniak