Maj 19 2020 19 maja 2020 19 maja 2020 przez Michał Franczak

Tworzenie formularzy z CSS

Napisano w , 
<!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>

<!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>

źródło: http://www.glowacki.p9.pl/nowa_strona/strony/niedatowane/kurs_html5/k_3_2_15.php

Tagi: