HTML Tutorial

HTML-tagg: <input>

Användning av <input>

Taggen <input> används för att skapa olika typer av inmatningsfält i ett formulär. Den kan användas för att samla in text, lösenord, e-postadresser och andra typer av information från användaren.

Attribut för <input>

Taggen <input> har flera viktiga attribut som kan användas för att konfigurera inmatningsfältet:

  • type: anger typen av inmatningsfält, till exempel text, lösenord, e-post eller radioknapp.
  • id: ger inmatningsfältet ett unikt ID.
  • name: anger namnet på inmatningsfältet.
  • value: anger standardvärdet för inmatningsfältet.
  • placeholder: anger text som ska visas i inmatningsfältet som en placeholder.
  • required: anger att inmatningsfältet är obligatoriskt att fylla i.
  • disabled: anger att inmatningsfältet är inaktiverat.

Exempel med <input>

<form>
  <label for="name">Namn:</label>
  <input type="text" id="name" name="name" placeholder="Ange ditt namn">

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" placeholder="Ange din e-postadress">

  <input type="submit" value="Skicka">
</form>

Utforska <input>-taggen

Du kan använda följande kod för att utforska <input>-taggen:

<!DOCTYPE html>
<html>
<head>
  <title>Input-tagg</title>
</head>
<body>
  <h1>Input-tagg</h1>

  <form>
    <label for="name">Namn:</label>
    <input type="text" id="name" name="name" placeholder="Ange ditt namn">
    <br>

    <label for="email">E-post:</label>
    <input type="email" id="email" name="email" placeholder="Ange din e-postadress">
    <br>

    <input type="submit" value="Skicka">
  </form>

  <script>
    // Hämta inmatningsfältet med id="name"
    var nameInput = document.getElementById("name");

    // Skriv ut inmatningsfältets värde
    console.log(nameInput.value);

    // Lyssna på händelsen "input" på inmatningsfältet
    nameInput.addEventListener("input", function() {
      // Skriv ut det nya värdet för inmatningsfältet
      console.log(nameInput.value);
    });
  </script>
</body>
</html>