Zadanie 2 - JS II

<section>
  <h2>CENNIK</h2>
  <table>
    <caption>
      Cennik tworzenia stron internetowych
    </caption>
    <thead>
      <tr>
        <th scope="col">Wybierz 1 z pakietów</th>
        <th scope="col">Cena</th>
        <th scope="col">Termin realizacji</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Strona internetowa ekonomiczna</th>
        <td>500 zł</td>
        <td>7 dni</td>
      </tr>
      <tr>
        <th scope="row">Strona internetowa profesjonalna</th>
        <td>4000 zł</td>
        <td>30 dni</td>
      </tr>
      <tr>
        <th scope="row">Strona internetowa biznesowa</th>
        <td>40 000 zł</td>
        <td>Do uzgodnienia</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Cena zależy od wyboru pakietu</td>
      </tr>
    </tfoot>
  </table>
</section>

<section>
  <h2>Formularz kontaktowy</h2>
  <form action="/contact" method="POST">
    <fieldset>
      <legend>Dane kontaktowe</legend>
      <label for="full-name">Imię i nazwisko:</label>
      <input
        type="text"
        id="full-name"
        name="fullname"
        placeholder="Podaj swoje imię i nazwisko"
        required
      /><br />

      <label for="company-name">Nazwa firmy:</label>
      <input
        type="text"
        id="company-name"
        name="companyname"
        placeholder="Podaj nazwę swojej firmy"
      /><br />

      <label for="contact-email">Adres email:</label>
      <input
        type="email"
        id="contact-email"
        name="email"
        placeholder="[email protected]"
        required
      /><br />

      <label for="phone-number">Numer telefonu (+48):</label>
      <input
        type="text"
        id="phone-number"
        name="phone"
        pattern="[0-9]{9}"
        placeholder="123456789"
      /><br />
    </fieldset>

    <fieldset>
      <legend>Wybór Pakietu</legend>
      <!-- Select z grupowaniem opcji -->
      <label for="product-select">Pakiet:</label>
      <select id="product-select" name="product" required>
        <option value="">-- Wybierz pakiet --</option>
        <optgroup label="Pakiety">
          <option value="website-economic">
            Strona internetowa ekonomiczna
          </option>
          <option value="website-professional">
            Strona internetowa profesjonalna
          </option>
          <option value="website-business">Strona internetowa biznesowa</option>
        </optgroup>
      </select>
      <br />
    </fieldset>

    <fieldset>
      <legend>Adres</legend>
      <label for="street">Ulica:</label>
      <input
        type="text"
        id="street"
        name="u-street"
        placeholder="Podaj swoją nazwę ulicy"
        required
      /><br />

      <label for="number-home">Nr domu/mieszkania:</label>
      <input
        type="number"
        id="number-home"
        name="house-number"
        placeholder="Podaj swój nr domu/mieszkania"
        required
      /><br />

      <label for="town">Miejscowość:</label>
      <input
        type="text"
        id="town"
        name="town"
        placeholder="Podaj nazwę swojej miejscowości"
        required
      /><br />

      <!-- Podstawowy select -->
      <label for="country-select">Kraj:</label>
      <select id="country-select" name="country" required>
        <option value="">-- Wybierz kraj --</option>
        <option value="PL" selected>Polska</option>
        <option value="DE">Niemcy</option>
        <option value="FR">Francja</option>
        <option value="ES">Hiszpania</option>
      </select>
      <br />
    </fieldset>

    <fieldset>
      <legend>Dodatkowe informacje</legend>

      <label for="subject">Temat:</label>
      <input
        type="text"
        id="subject"
        name="subject"
        placeholder="Podaj temat wiadomości"
        required
      /><br />

      <!-- Textarea z ograniczeniem długości -->
      <label for="bio">Opis (10-500 znaków):</label>
      <textarea
        id="bio"
        name="bio"
        rows="5"
        minlength="10"
        maxlength="500"
        placeholder="Napisz wiadomość..."
        required
      ></textarea>
    </fieldset>

    <!-- Pojedynczy checkbox - zgoda -->
    <label>
      <input type="checkbox" name="newsletter" value="yes" required />
      Zapoznałem się i akceptuję regulamin politykę prywatności
    </label>
    <br />

    <button type="submit">Wyślij formularz</button>
  </form>
</section>