Text Inputs and Labels: Form Basics
If you’ve ever typed your name into a sign-up box or entered your email to get a newsletter, you’ve used a text input in a form. In this article, you’ll learn how to create those basic building blocks yourself using HTML.
We’ll start with the very basics: adding a text box, giving it a label, and then combining several inputs into a simple form. By the end, you’ll be able to create your own small “sign-up” style form that’s easy to read and use.
Don’t worry if you’re totally new to coding. We’ll move slowly, explain each part, and you can copy, paste, and tweak the examples as you go.
What are text inputs and labels?
- A text input is a small box where users can type information, like their name or email.
- A label is the text that describes what should go into that box, like “Name:” or “Email:”.
Labels are important because:
- They make your form easy to understand for everyone.
- They help with accessibility (for example, people using screen readers).
- They let users click on the label to focus the input, which feels nicer to use.
We’ll use basic HTML, which is the language used to structure web pages. You can follow along using a simple text editor (like Notepad, VS Code, or any code editor) and a web browser (like Chrome, Firefox, or Edge).
Example 1: Your first text input
Let’s start with the smallest piece: a single text input with a label.
<!-- Save this as form-example1.html and open it in your browser -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Example 1</title>
</head>
<body>
<!-- Label tells the user what to type -->
<label for="name">Name:</label>
<!-- Text input where the user types their name -->
<input type="text" id="name">
</body>
</html>
What each part does
<!DOCTYPE html>and the<html>,<head>, and<body>tags are basic HTML structure. For now, just copy them as-is.<label for="name">Name:</label>creates a label that says “Name:”.for="name"links the label to the input whoseidisname.<input type="text" id="name">creates a text box where the user can type.
Expected result: When you open this file in your browser, you’ll see the word “Name:” with a small text box next to it. You can click in the box and type.
Try it yourself
Change the label text from Name: to Your Name: and refresh your browser.
Notice that the text updates right away.
Example 2: Adding placeholders and names
Now let’s make the input more helpful by adding a placeholder and a name attribute.
- A placeholder is light gray text inside the box that disappears when you start typing.
- The name attribute is used when you send the form data to a server (we won’t go deep into that today, but it’s a good habit to include it).
<!-- Save as form-example2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Example 2</title>
</head>
<body>
<label for="name">Your Name:</label>
<input
type="text" <!-- This is a text input -->
id="name" <!-- Connects to the label above -->
name="name" <!-- Used when sending form data -->
placeholder="Enter your full name" <!-- Helper text -->
>
</body>
</html>
Expected result: You’ll see “Your Name:” and, inside the box, light gray text saying “Enter your full name”. When you click and start typing, the gray text disappears.
Try it yourself
Change the placeholder text to something more fun, like "Type your awesome name here".
Refresh your browser and see how it looks.
Example 3: Building a simple form
Now that you know how to create one labeled text input, let’s build a small form.
A form is wrapped in a <form> tag and can hold multiple inputs.
We’ll create a tiny “contact” form with two fields: name and email.
<!-- Save as form-example3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Example 3 - Contact Form</title>
</head>
<body>
<!-- The form element groups our inputs together -->
<form>
<!-- Name field -->
<div>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="Enter your name"
>
</div>
<!-- Email field -->
<div>
<label for="email">Email:</label>
<input
type="email" <!-- Special input type for emails -->
id="email"
name="email"
placeholder="you@example.com"
>
</div>
<!-- Submit button to send the form -->
<button type="submit">Send</button>
</form>
</body>
</html>
What’s new here?
<form>: Wraps all your inputs. It’s like a container for the stuff the user can fill in.<div>: Groups each label and input together on its own line (helps keep things tidy).type="email": A special kind of input that expects an email address. Many browsers will show a warning if the text doesn’t look like a valid email.<button type="submit">: A button that tries to submit the form when clicked.
Expected result:
You’ll see two labeled boxes: one for “Name” and one for “Email”, plus a “Send” button.
If you try to submit without a proper email (like missing @), some browsers will warn you.
Try it yourself
Change the button text from Send to Sign Up or Contact Us.
Experiment with the placeholder on the email field (for example, "name@company.com").
Example 4: Required fields and basic layout
Sometimes you want to make sure users don’t skip certain inputs. For that, you can use the required attribute.
We’ll also space things out a little to make the form easier to read.
<!-- Save as form-example4.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Example 4 - Required Fields</title>
<style>
/* Simple styling to improve spacing */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
div {
margin-bottom: 10px; /* Space between rows */
}
label {
display: inline-block;
width: 80px; /* Make labels line up nicely */
}
</style>
</head>
<body>
<h1>Contact Form</h1>
<form>
<div>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="Enter your name"
required <!-- User must fill this in -->
>
</div>
<div>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="you@example.com"
required <!-- Also required -->
>
</div>
<button type="submit">Send Message</button>
</form>
</body>
</html>
What’s new here?
required: Tells the browser that the field must be filled before the form can be submitted. If you click the button without filling in the field, the browser will show a message.<style>: Adds simple CSS (a language for styling) to control spacing and appearance. You don’t need to understand everything yet—just notice how it changes the look.
Expected result: Try clicking “Send Message” without typing anything. You should see warnings asking you to complete the required fields. The labels should line up nicely, making the form easier to read.
Try it yourself
- Remove
requiredfrom one field and test again. - Change the width in the
labelstyle from80pxto120pxand see how it affects alignment.
Tips for beginner-friendly forms
As you start making your own forms, keep these simple tips in mind:
- Always use labels for your inputs. This makes your form clearer and more accessible.
- Use meaningful placeholders to guide users, but don’t rely on them instead of labels.
- Keep things simple. Fewer fields usually mean more people will complete your form.
- Group related fields (like name and email) using
<div>or headings.
Learning to code can feel overwhelming at first, but forms are a great way to practice. Every time you add a new input or adjust a label, that’s real progress.
What’s next?
You’ve just learned how to:
- Create basic text inputs with labels
- Add helpful placeholders and names
- Build a simple form with multiple fields
- Use
requiredto make fields mandatory
From here, you can explore more input types, like password, number, and textarea for longer text.
You can also learn how to handle form submissions with JavaScript or a back-end language.
For now, celebrate the fact that you can create a working form from scratch. Open your latest example, type into the fields, and appreciate that you built this small but powerful piece of the web.
Keep experimenting, changing labels, adding new fields, and seeing what happens—each small change helps you learn and grow as a developer.
