index.html — kontaktų forma

Pridėk prie puslapio kontaktų skiltį — tikrą, prieinamą formą, sudėtą taip, kad pati validuotųsi, ir sąžiningą dėl to, kur ji sustoja. Ji eina <main> viduje, po galerija, o navigacija gauna nuorodą į ją.

Contact nuoroda naujai skilčiai

<a href="#contact" class="nav-link">Contact</a>

Navigacija gauna Contact nuorodą. Kaip Home ir Gallery, ji yra vidinė puslapio nuoroda: href="#contact" peršoka prie elemento su id="contact" — skilties, kurią pridedi kaip tik žemiau. Kiekviena šios navigacijos nuoroda rodo į tikrą skiltį puslapyje; nė viena nėra vietaženklis. Inkaras į id yra grynas HTML ir veikia be jokio maršrutizatoriaus ir be JavaScript.

Skiltis ir sąžiningas įspėjimas

<section id="contact" aria-label="Contact">
  <div class="view-head">
    <h2>Contact</h2>
    <p class="muted">Questions, bugs, or just want to say hello?</p>
  </div>

  <div class="notice">
    <strong>Note:</strong> this page has no server behind it. The browser checks
    your entries before sending, but actually delivering a message needs a server
    or JavaScript — which the client-side track covers.
  </div>

.notice puslapyje sako tai, ką teorija pasakė žodžiais: forma validuojasi, bet negali pristatyti. Pasakyti skaitytojui iš anksto geriau, nei leisti jam paspausti Send ir svarstyti, kas sugedo.

Forma: po užrašą ir tikrą valdiklį kiekvienam laukui

<form class="form-card">
  <div class="field">
    <label for="contact-name">Name <span class="required">*</span></label>
    <input type="text" id="contact-name" name="name" maxlength="60" autocomplete="name" required>
  </div>

  <div class="field">
    <label for="contact-email">Email <span class="required">*</span></label>
    <input type="email" id="contact-email" name="email" autocomplete="email"
           placeholder="you@example.com" required>
  </div>

  <div class="field">
    <label for="contact-subject">Subject <span class="required">*</span></label>
    <select id="contact-subject" name="subject" required>
      <option value="">Choose a subject…</option>
      <option value="question">Question</option>
      <option value="bug">Bug report</option>
      <option value="feedback">Feedback</option>
      <option value="other">Other</option>
    </select>
  </div>

  <div class="field">
    <label for="contact-message">Message <span class="required">*</span></label>
    <textarea id="contact-message" name="message" rows="6" maxlength="1000"
              minlength="20" placeholder="Tell us what's on your mind…" required></textarea>
    <p class="hint">Minimum 20 characters.</p>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Send message</button>
  </div>
</form>
</section>

Perskaityk, ką daro kiekvienas laukas:

• Kiekvienas <label> turi for, sutampantį su savo lauko id — spragtelėk žodį, fokusuojasi laukas.
• El. pašto laukas yra type="email", tad naršyklė ir siūlo @-klaviatūrą, ir patikrina formą pateikiant. autocomplete="email" leidžia naršyklei užpildyti jį iš naudotojo išsaugotų duomenų.
• Subject yra <select> su sąmoningu pirmu variantu, kurio value tuščias — kartu su required, „Choose a subject…" nelaikoma atsakymu, tad naršyklė verčia naudotoją pasirinkti tikrą.
• Message yra <textarea> su minlength="20" — naršyklė atsisako pateikti, kol ji nepakankamai ilga, o .hint pasako skaitytojui taisyklę dar prieš jam į ją atsitrenkiant.
• Kiekvienas laukas turi required; raudona * kiekviename užraše (.required) pasako skaitytojui, kurie laukai privalomi, anksčiau nei naršyklė.

Čia nėra novalidate ir nėra JavaScript. Vanilla programa turi abu — ji išjungia naršyklės validaciją ir daro savo js/forms.js. Tu sąmoningai darai priešingai: neturėdamas JavaScript, kuriuo galėtum remtis, naršyklės įtaisytoji validacija yra būtent tas įrankis, kurio nori, tad leidi jai veikti.