HTML Form Code For Beginners (And When To Use It)
- Element of
- HTML Web Forms Tutorial For Coding Beginners
- What does
HTML Form Code For Beginners (And When To Use It)
do? - The <form> element is used to create an HTML form. The <form> element does not actually create form fields, but is used as a parent container to hold form fields such as <input> and <textarea> elements.
- Display
- block
- Usage
- semantic | structural
Contents
Code Example
<form action="" method="GET">
<label for="name">Name</label>
<input name="name" id="name">
<input type="submit">
</form>
HTML Forms
Whether you want to create a simple email signup, a moderately complex checkout and payment page, or a richly interactive web application, you will be using the HTML form elements, the most important of which is <form>
.
How standard HTML forms work
HTML forms were invented and mostly standardized before the advent of asynchronous Javascript and complex web applications. Today, we use form inputs, buttons, and other interaction mechanisms in lots of different ways; but underlying that is a system based on the HTTP request-response paradigm.
When you load a page, you are making an HTTP request (a GET
request, usually). This request is sent by your browser to the server, and the server responds with (usually) the web page you are looking for. This interaction is one of the most fundamental concepts of the internet. And it is how HTML forms are designed to work.
Each input inside a <form>
element (and this includes <input>
elements as well as <select>
and others) has a name
attribute, and also a value. The value is determined in different ways. For text-based inputs, the value is whatever has been typed into the field. For radio-buttons, the value is the selected option. The user can adjust the value, but (usually) not the name. This creates a set of name-value pairs in which the values are determined by user input.
When a form is submitted, the name-value pairs from all the fields inside the <form>
element are included in an HTTP. The request is made to a URL defined in the form’s action
attribute, and the type of request (GET
or POST
) is defined in the form’s method
attribute. This means that all the user-provided data is sent to the server all at once when the form is submitted, and the server can do whatever it wants with that data.
When the server receives the form submission, it is like any other HTTP request. It does whatever it needs to do with the included data and issues a response back to the browser. Remember how a page load is a response? Same thing here. In a typical form submission, the response is a new page which the browser loads. Typically the new page replaces the current one, but this can be overridden with the target
attribute.
The vast majority of online forms work this way, and it is why you get sent to a “Thank You” page when you fill out an email subscription form.
Web applications and forms without <form>
Modern interactive web applications use Javascript to run asynchronous HTTP requests, or “behind the scenes” calls to the server which do not reload the page. They aren’t relying on the HTML <form>
element’s built-in behavior, because they aren’t bundling up a bunch of user data and sending it all at once.
For this reason, many (though not all) HTML+JS web apps don’t use the <form>
element at all, or they just use it as a kind of container for various types of fields and input elements. In this case, you won’t see the method
and action
attributes being used.
Learning more about forms
There are a lot of form-related elements — different kinds of buttons, inputs, selectors for various types, feedback mechanisms… all sorts of things. there are also a lot of complications when it comes to styling forms, making them work on different size screens, and making them accessible for people with disabilities. In short: forms are complicated, maybe the most complicated aspect of HTML.
See our main forms index page for links to all of our form-related tutorials and documentation.
Browser Support for form
All | All | All | All | All | All |