What Is a Form? The form and input Basics
What Is a Form? The form and input Basics
~8 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
Every time you sign up somewhere online, search for something, or write a message, you're using a form. In this block you'll learn how to build such input fields - for example, for a contact form on Finn's website.
The <form> element
<form> wraps all input fields that belong together. The actual input elements go inside it:
<form>
<!-- Input fields go here -->
</form>The <input> element
<input> is the most important form element - just like <img>, it's self-closing (no </input> needed). The type attribute controls what kind of input field it shows:
<form>
<input type="text">
</form>Save this in your file and look at it in your browser: you see a single, single-line text field you can click into and type in. We'll meet many more type values in the next chapter.
The name attribute: important, even though it's invisible
So a form later knows which entered value belongs to which field, every <input> needs a name attribute:
<input type="text" name="first-name">name isn't visible to the visitor, but it's essential: when a form is submitted, the recipient knows, thanks to name, that the entered value belongs to the "first-name" field (and not to any other field).
Achtung: In this tutorial we build forms purely structurally, meaning: if you click "Submit", nothing visible happens (yet), because that requires server-side programming, which isn't part of this HTML tutorial. Our only focus here is building the form itself correctly with HTML.
Your first own form
Create a new file contact.html with the usual boilerplate and a first form field:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact - Finn's Football Website</title>
</head>
<body>
<h1>Contact</h1>
<form>
<input type="text" name="first-name">
</form>
</body>
</html>Your project folder now has three pages:
my-website/ index.html players.html contact.html images/
Tipp: Don't forget to also link contact.html from your home page - you already know how to do that from chapter 14!