HTML-lomakkeiden luominen

HTML-lomakkeiden luominen

Tervetuloa seuraavalle oppitunnille! Tällä oppitunnilla opit luomaan lomakkeita HTML:n avulla. Lomakkeet ovat välttämättömiä käyttäjän syötteiden keräämiseen, ja voit käsitellä niitä myöhemmin PHP:llä. Aloitetaan!

Mitä ovat HTML-lomakkeet?

HTML-lomakkeilla kerätään käyttäjän syötteitä. Niiden avulla käyttäjät voivat täyttää kenttiä, tehdä valintoja ja lähettää tietoja palvelimelle käsiteltäviksi.

Esimerkki: Kirjautumislomake, johon käyttäjät syöttävät käyttäjänimensä ja salasanansa.

Keskeinen asia: Lomakkeet toimivat käyttäjän ja PHP-skriptiesi välisenä siltana.

Näin luot yksinkertaisen HTML-lomakkeen:

Selitys:

• action: Määrittää PHP-tiedoston, joka käsittelee lomakkeen tiedot.
• method: Määrittää, miten tiedot lähetetään (GET tai POST).
• required: Varmistaa, että kenttä on täytettävä ennen lähettämistä.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Lomakkeissa voi käyttää erilaisia syötetyyppejä erilaisten tietojen keräämiseen:

• text: Yhdelle riville kirjoitettavan tekstin syöttämiseen.
• email: Sähköpostiosoitteille.
• password: Salasanan syöttämiseen.
• checkbox: Usean vaihtoehdon valitsemiseen.
• radio: Yhden vaihtoehdon valitsemiseen.
• submit: Lomakkeen lähettämiseen.

Esimerkki:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Valintanapeilla käyttäjät voivat valita yhden vaihtoehdon ryhmästä. Esimerkki:

Vinkki: Käytä ryhmän kaikissa valintanapeissa samaa name-attribuuttia.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Valintaruuduilla käyttäjät voivat valita useita vaihtoehtoja. Esimerkki:

Vinkki: Käytä taulukkosyntaksia (hobbies[]) useiden arvojen keräämiseen.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Avattavien valikoiden avulla käyttäjät voivat valita yhden vaihtoehdon luettelosta. Esimerkki:

Vinkki: Aseta oletusvaihtoehto määritteellä selected.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Varmista, että lomakkeesi ovat kaikkien käyttäjien saavutettavissa:

• Käytä syötteisiin for-attribuuteilla yhdistettyjä label-tageja.
• Ryhmittele toisiinsa liittyvät syötteet käyttämällä fieldset- ja legend-elementtejä.
• Testaa lomakkeiden käytettävyys mobiililaitteilla.

Vinkki: Saavutettavat lomakkeet parantavat kaikkien käyttökokemusta!

Hienoa työtä!

Onnittelut! Olet oppinut luomaan HTML-lomakkeita, joissa käytetään erilaisia syötetyyppejä, kuten tekstikenttiä, valintanappeja, valintaruutuja ja avattavia valikoita. Lomakkeet ovat käyttäjän syötteiden perusta web-kehityksessä. Seuraavalla oppitunnilla opimme käsittelemään lomaketietoja PHP:n avulla. Jatketaan koodaamista!