Oprettelse af HTML-formularer

Oprette HTML-formularer

Velkommen til den næste lektion! I denne lektion lærer du at oprette formularer ved hjælp af HTML. Formularer er vigtige til indsamling af input fra brugere, som du senere kan behandle med PHP. Lad os komme i gang!

HTML-formularer bruges til at indsamle input fra brugere. De giver brugerne mulighed for at udfylde felter, foretage valg og sende data til en server til behandling.

Eksempel: En loginformular, hvor brugere indtaster deres brugernavn og adgangskode.

Vigtigt: Formularer fungerer som forbindelsen mellem brugeren og dine PHP-scripts.

Sådan opretter du en grundlæggende HTML-formular:

Forklaring:

• action: Angiver den PHP-fil, der skal håndtere formulardataene.
• method: Angiver, hvordan dataene skal sendes (GET eller POST).
• required: Sikrer, at feltet skal udfyldes, før formularen sendes.

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

Formularer kan indeholde forskellige inputtyper til indsamling af forskellige slags data:

• text: Til input med tekst på én linje.
• email: Til e-mailadresser.
• password: Til input af adgangskoder.
• checkbox: Til valg af flere muligheder.
• radio: Til valg af én mulighed.
• submit: Til at sende formularen.

Eksempel:

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

Radioknapper giver brugerne mulighed for at vælge én mulighed fra en gruppe. Eksempel:

Tip: Brug den samme name-attribut for alle radioknapper i en gruppe.

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

Afkrydsningsfelter giver brugerne mulighed for at vælge flere muligheder. Eksempel:

Tip: Brug arraysyntaksen (hobbies[]) til at indsamle flere værdier.

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

Rullemenuer giver brugerne mulighed for at vælge én mulighed fra en liste. Eksempel:

Tip: Brug selected til at angive en standardmulighed.

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

Sørg for, at dine formularer er tilgængelige for alle brugere:

• Brug label-tags, der forbindes med inputfelter ved hjælp af for-attributter.
• Gruppér relaterede inputfelter ved hjælp af fieldset og legend.
• Afprøv formularer for brugervenlighed på mobile enheder.

Tip: Tilgængelige formularer forbedrer brugeroplevelsen for alle!

Tillykke! Du har lært at oprette HTML-formularer med forskellige inputtyper, herunder tekstfelter, radioknapper, afkrydsningsfelter og rullelister. Formularer er grundlaget for brugerinput i webudvikling. I den næste lektion lærer vi, hvordan formulardata behandles med PHP. Lad os fortsætte med at kode!