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.
- semantic | structural
<form action="" method="GET"> <label for="name">Name</label> <input name="name" id="name"> <input type="submit"> </form>
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
How standard HTML forms work
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 (
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
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> 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
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