Skapa HTML-formulär

Skapa HTML-formulär

Välkommen till nästa lektion! I den här lektionen får du lära dig att skapa formulär med HTML. Formulär är viktiga för att samla in användarinmatning, som du senare kan bearbeta med PHP. Låt oss börja!

HTML-formulär används för att samla in användarinmatning. De gör det möjligt för användare att fylla i fält, göra val och skicka data till en server för bearbetning.

Exempel: Ett inloggningsformulär där användare anger sitt användarnamn och lösenord.

Viktigt: Formulär fungerar som länken mellan användaren och dina PHP-skript.

Så här skapar du ett grundläggande HTML-formulär:

Förklaring:

• action: Anger vilken PHP-fil som ska hantera formulärdata.
• method: Anger hur data ska skickas (GET eller POST).
• required: Säkerställer att fältet måste fyllas i innan formuläret skickas.

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

Formulär kan innehålla olika inmatningstyper för att samla in olika slags data:

• text: För textinmatning på en rad.
• email: För e-postadresser.
• password: För inmatning av lösenord.
• checkbox: För val av flera alternativ.
• radio: För val av ett alternativ.
• submit: För att skicka formuläret.

Exempel:

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

Radioknappar gör det möjligt för användare att välja ett alternativ i en grupp. Exempel:

Tips: Använd samma name-attribut för alla radioknappar i en grupp.

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

Kryssrutor gör det möjligt för användare att välja flera alternativ. Exempel:

Tips: Använd array-syntax (hobbies[]) för att samla in flera värden.

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

Rullgardinsmenyer gör det möjligt för användare att välja ett alternativ från en lista. Exempel:

Tips: Använd selected för att ange ett standardalternativ.

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

Se till att dina formulär är tillgängliga för alla användare:

• Använd label-taggar som kopplas till inmatningsfält med for-attribut.
• Gruppera relaterade inmatningsfält med fieldset och legend.
• Testa formulärens användbarhet på mobila enheter.

Tips: Tillgängliga formulär förbättrar användarupplevelsen för alla!

Grattis! Du har lärt dig att skapa HTML-formulär med olika inmatningstyper, bland annat textfält, radioknappar, kryssrutor och rullgardinsmenyer. Formulär är grunden för användarinmatning inom webbutveckling. I nästa lektion får du lära dig att bearbeta formulärdata med PHP. Låt oss fortsätta koda!