CodePen Embed - Formularze 3

Live
​x
 
<html>
  <head>
    <title>Formularze</title>
    <style>
      form {
        width: 400px;
        text-align: right;
      }
​
      label {
        display: block;
        margin-bottom: 20px;
      }
​
      /* Dodamy do naszego formularza małą ikonkę przy wymaganych polach. */
      input + span::after {
        position: absolute;
        margin-left: 10px;
      }
​
      /* Ikonka ta będzie inna dla poprawnych oraz niepoprawnych danych  */
      input:required + span::after {
        color: red;
        content: "❗ Wymagane ";
      }
​
      input:valid + span::after {
        color: green;
        content: "✅";
      }
​
      /* Pola które wymagają poprawki bądź uzupełnienia zaznaczamy na czerwono. */
      input:invalid {
        border: 2px solid red;
      }
​
      /* Pola bez błędów zaznaczamy na zielono. */
      input:valid {
        border: 2px solid green;
      }
      /* Jeżeli nie chcemu pokazywać zielonego obramowania od razu, możemy skorzystać 
      z pseudo-klasy ":placeholder-shown" która nadana jest na <input> na którym
      wyswietla się placeholder. */
      input:placeholder-shown {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>Formularz - walidacja</h1>
    <form>
      <label>
        Imię:
        <input name="name" required minlength="3" />
        <!-- Pusty <span> pozwoli nam nam umieszczenie na nim ikonki. Pseudo elementy ":after"
        nie mogą być umieszczane na elemencie <input> -->
        <span></span>
      </label>
      <label>
        Nazwisko:
        <!-- Wymagane pole o długości min 3 znaki.-->
        <input name="surname" required minlength="3" />
        <span></span>
      </label>
      <label>
        Adres e-mail:
        <input type="email" name="email" />
      </label>
      <label>
        Wiek:
        <!-- Pole niewymagane, więc musimy zostawić puste bądź podać wartość >= 18 -->
        <input type="number" name="age" min="18" />
      </label>
      <label>
        Adres IPv4 (np. 192.168.1.1):
        <!-- Wyrażenie regularne dzięki któremu musimy podać ciąg znaków o formacie X.X.X.X -->
        <input
          name="ip"
          pattern="^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$"
        />
      </label>
      <label>
        Brak walidacji od początku
        <!-- Wyrażenie regularne dzięki któremu musimy podać ciąg znaków o formacie X.X.X.X -->
        <input
          name="placeholder"
          placeholder="zacznij pisać..."
        />
      </label>
      <label>
        Akceptuję regulamin
        <!-- Pole, które będzie musiało być zaznaczone przed wysłaniem formularza. -->
        <input
          name="terms"
          type="checkbox"
          value="accepted"
          required
          />
      </label>
    </form>
  </body>
</html>
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.