Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Tworzenie formularzy z CSS

Jeżeli zapomniałeś co to są formularze i z jakich elementów się składają, to najpierw uzupełnij potrzebną wiedzę w tym zakresie. Do tej pory tworzyliśmy formularze w oparciu o domyślny wygląd elementów. Podczas tych zajęć zastosujemy CSS do zmiany wyglądu formularzy. Wykonamy kilka przykładów.

Przykład formularza logowania - ćwiczenie 3_2_15_1

Style zdefiniujemy w arkuszu wewnętrznym , plik nazwijmy logowanie.html.

<!doctype html>
<html>
  <head>
    <title>Logowanie</title>
    <meta charset="utf-8" />
    <style type="text/css">
      table
      {
        border-spacing:15px;
      }
      label 
      {
        color:#02639a;
        font-size:16px;
        width:75px;
        margin-left:10px; 
      }
      fieldset 
      {
        border:2px solid #02639a;
        background-color:#e5f0f7;
        padding:3px;
        width:250px; 
      }
      legend 
      {
        color:#02639a;
        background-color:#d1e8f7;
        border:5px solid #02639a;
        padding:3px;
        font-weight:bold;
        margin-left:-10px; 
      }
      input
      {
        width:100px;
        color:#02639a;
      }
    </style>
  </head>
  <body>
    <form action="logowanie.html" method="post">
      <fieldset>
        <legend>LOGOWANIE</legend>
        <table>
          <tr>
            <td>
              <label for="login">Login:</label>
            </td>
            <td>
              <input type="text" name="login" id="login" />
            </td>
          </tr>
          <tr>
            <td>
              <label for="haslo">Hasło: </label>
            </td>
            <td>
              <input type="password" name="haslo" id="haslo" />
            </td>
          </tr>
          <tr>
            <td>
            </td>
            <td>
              <input type="submit" value="Zaloguj" />
            </td>
          </tr>
        </table>
      </fieldset>
    </form>  
  </body>
</html>
  • W arkuszu stylów występują właściwości już nam znane. Poszczególne pola formularza umieściliśmy w tabeli, aby uzyskać równe ich rozłożenie.
  • Obramowanie fieldset również już poznaliśmy, inne elementy formularzy również powinny być nam znane.
  • Etykieta pola label, została pokazana w ćwiczeniu 2_6_3_1, jednak teraz występuje w innym układzie: napis znajduje się w innej komórce tabeli jak pole opisywane przez etykietę. W takiej sytuacji należy polu nadać identyfikator np. id="login", natomiast w etykiecie label zastosować atrybut for, wskazujący odpowiednie pole np. for="login".
  • Tak sporządzony formularz oczywiście nie będzie działał, ponieważ musimy za pomocą PHP odebrać wpisany login i hasło oraz sprawdzić zgodność z wartościami zapisanymi na serwerze. Odpowiednie przykłady są pokazane w podstawach PHP:

Przykład formularza kontaktowego - ćwiczenie 3_2_15_2

Tak jak poprzednio, style zdefiniujemy w arkuszu wewnętrznym, plik nazwijmy kontakt.html.

<!doctype html>
<html>
  <head>
    <title>Formularz kontaktowy</title>
    <meta charset="utf-8" />
    <style type="text/css">
      body 
      {
        font-family:Arial,sans-serif;
        font-size:14px;
        color:#02639a;
      }
      form.formularz 
      {
        width:260px;
        background-color:#e5f0f7;
        border:2px solid #02639a;
        border-radius:10px;
        padding:20px;
        margin-top:20px;
      }
        .formularz label 
        {
          display:block;
          margin-bottom:5px;
          text-transform:uppercase;
        }
        .formularz textarea, .formularz input#nazwisko , .formularz input#nazwisko, 
        .formularz input#email 
        {
          padding:5px;
          border-radius:3px;
          border:1px solid #02639a;
          margin-bottom:25px;
          width:245px;
          font-family:Arial,sans-serif;
          font-size:14px;
          color:#02639a;
        }
        .formularz input#submit 
        {
          width:255px; 
          font-family:Arial,sans-serif;
          color:#02639a;
          font-size:14px;
        }        
    </style>
  </head>
  <body>
    <div class="formularz">
      <form action="kontakt.html" method="post">
        <label>Imię i nazwisko</label>
        <input name="nazwisko" id="nazwisko">
        <label>E-mail</label>
        <input name="email" type="email" id="email">
        <label>Wiadomość</label>
        <textarea name="wiadomosc" placeholder="Napisz tu wiadomość"></textarea>
        <input type="submit" name="wyslij" id="submit" value="Wyślij">
      </form>  
    </div>
  </body>
</html>
  • Klasa formularz nadaje wygląd naszemu formularzowi.
  • Wszystkie elementy label, mają jednakowy wygląd. Elementy input są różnie formatowane, więc wymagają określenia w kodzie HTML id, aby można się było do nich odwołać w arkuszu stylów.
  • border-radius:10px; oznacza zaokrąglenie rogów promieniem 10px.
  • text-transform - właściwość przyjmująca wartości:
    • capitalize - pierwsza litera każdego słowa jest zmieniana na wielką, inne zostają bez zmian;
    • uppercase - wszystkie litery są przekształcane na wielkie;
    • lowercase - wszystkie litery są przekształcane na małe;
    • none (domyślnie) - żadne zmiany wielkości liter nie są dokonywane.
  • placeholder - atrybut znacznika input. Służy do określenia tekstu wyświetlanego przez element, kiedy nie została wprowadzona do niego żadna wartość.

Wykonaj formularz według własnego pomysłu - ćwiczenie 3_2_15_3