How to Create a Form in HTML

Overview

A usable HTML form takes four moves: a <form> to group the controls, labelled inputs to collect the data, a submit button to send it, and a required mark on the fields that must not be left empty. This guide builds a small contact form that way, one step at a time. You need no JavaScript and no framework — the browser handles gathering, validating and submitting the values for you.

Steps

1. Wrap your controls in a form element

Start with the <form> element — the boundary that turns a loose set of fields into one submittable unit. Give it an action (where the data should go) and a method (post to send the values in the request body, get to put them in the URL). Everything the user fills in will live between the opening and closing tags.

<form action="/contact" method="post">
  <!-- fields go here -->
</form>

2. Add labelled inputs

Now add the controls, and give each one a <label> so the user knows what it collects. Connect the label to its control by matching the label's for attribute to the control's id. Just as important, give every control a name — that is the key its value is submitted under. A field with no name is silently dropped when the form is sent.

<label for="name">Your name</label>
<input id="name" type="text" name="name">

<label for="email">Email</label>
<input id="email" type="email" name="email">

3. Add a submit button

A form needs a way to send itself. Add a <button type="submit"> inside the form; pressing it — or hitting Enter in a text field — validates the controls and sends the collected name=value pairs to the form's action. Write button text that names the action, so the user knows what will happen when they click it.

<button type="submit">Send message</button>

4. Mark required fields

Finally, protect the form from empty submissions. Add the required attribute to any control that must be filled, and the browser refuses to submit while it is blank, pointing the user at the offending field with a built-in message. Pairing type="email" with required also rejects text that is not a valid email shape — all without a line of script.

<input id="email" type="email" name="email" required>

Runnable example

Putting all four steps together — a complete, rendering contact form with labelled inputs, a required email, and a submit button:

Press *Send message* with a field empty and the browser stops the submit and highlights the field — proof the required attribute is doing its job with no code from you.

Common pitfalls

If pressing Enter does not submit the form, check that there is a real submit control inside it — a <button type="submit"> or <input type="submit">. A plain <button> with no type defaults to submit inside a form, but a button explicitly typed button will not send anything. And if the form submits despite an empty mandatory field, confirm the required attribute is on the control itself, not on its label.

Frequently asked questions

Do I need JavaScript to create an HTML form?

No. The <form> element, its controls, submission and required validation are all built into HTML. JavaScript is only needed for custom behaviour beyond what the native form already does.

What is the minimum a form needs to work?

A <form> element, at least one control with a name, and a submit button. The action says where the data goes; add <label>s and required to make it usable and safe.

How do I make a field mandatory?

Add the required attribute to that control. The browser then blocks submission while the field is empty and shows a built-in prompt, with no scripting involved.