In the early history of HTML, before JavaScript was added to web pages, the only interactive feature in web pages was the HTML form. A form is a special page element where the user can enter data into specialized form elements and then click a button to submit the form data to a server.
Originally, the idea was that HTML forms would make it possible to request customized HTML pages that would be generated by a web server based on a user's request.
To start creating an HTML form we begin with the HTML form element:
<form action="<URL>"> Form elements go here </form>
The action attribute is set to a URL that points to a special calculation resource on a web server that will handle the form request. When the user has entered their data and they click the button to submit the form request, the data from the form will get sent to this URL. In response, the server will generate a custom page and return that page as the form response.
To make it possible for a user to enter information in a form we have to provide one or more form elements. Below you will find an overview of the most common form elements.
To set up a text field in a form, use the <input type="text"> element:
<input type="text" name="username" />
When the page containing the form submits the form to the server for processing, the data values the user entered into the form will get sent to the server as a set of key, value pairs. The name attribute of an HTML input element specifies what key value to use for the data the user will be entering here. The value that goes with this element is simply the text the user typed into the text field.
An alternative to the plain text input element is the password input, which masks the characters a user types as they type them:
<input type="password" name="password" />
The textarea element sets up a text area where the user can type multi-line text.
<textarea name="comments" />
To implement a set of options to select from you can use radio buttons. To make a set of radio buttons you make two or more input elements of type radio that share the same name. When the user submits the form the value that the form will send will correspond to the radio button the user currently has pressed.
<input type="radio" name="color" value="red" /> <input type="radio" name="color" value="green" /> <input type="radio" name="color" value="blue" />
An alternative to using radio buttons is a pull-down menu. We implement menus in a form via the select element:
<select name="meal"> <option value="breakfast">Breakfast</option> <option value="lunch">Lunch</option> <option value="dinner">Dinner</option> </select>
The content of each option element specifies the text that will be displayed to the user for that particular menu item.
Finally, every form is required to have a submit button. Clicking this button will submit the form for processing. The value attribute of this element specifies the text to display in the button.
<input type="submit" value="Sign Up" />
Clicking the Example Form Page button at the top of this page will take you to an HTML page containing a form. The back end processing for this form is done by a Spring Boot application that uses JSP to process the user's request and display a response.
The NetBeans Project button above links to an archive containing the source code for the back end server for this example. This example project depends on the use of a MySQL database. To run the project, create a database named 'calories' in the MySQL workbench and import the database files found in the project folder's database folder to set up the database. You can then run the NetBeans project to start the backend server running, and the server will handle form requests from the form for you.