Form
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
Learning Objectives
- Describe the importance of HTML forms in a web page.
- Construct a web page using
<form>and</form>elements that integrates with backend services for data processing. - Develop an HTML form that incorporates multiple input types, each chosen to optimize data entry for specific user tasks.
- Create an HTML form that uses a wide range of input attributes to provide advanced features.
- Create and customize dropdown menus using the select and option elements to enhance user interactivity on web forms.
- Implement and configure the textarea element and its attributes to enable multi-line text input in web forms.
- Group and label related form controls using the fieldset and legend elements to improve form accessibility and organization.
- Create and style various types of buttons using the button element, and understand their functions in form submission and user interaction.
What is HTML Form?
HTML forms are a fundamental part of web development, enabling user interaction with web pages. They are used to collect user input and send it to a server for processing. Forms are essential for various web applications, such as login pages, registration forms, search boxes, and online surveys. The feedback of the user is mostly submitted to a server for review. Form processing is often called client/server processing because it requires both a client (a browser) and a remote server.
HTML Form Example
Login
Enter your email below to login to your account
Form Element
The HTML <form> and </form> tag pairs define a form that can be used to collect user input.
An HTML form contains different form elements.
Form elements are different types of input elements like text fields, checkboxes, radio buttons, submit buttons and more.
Form attributes
The action attribute defines the action to be performed when the form is submitted.
The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP POST transaction (with method="post").
See w3schools for more information about post and get method.
Form Elements
The HTML <form></form> element can contain one or more of the following form elements.
Label
The label element defines a label for several form elements.
Input
The input element is the most important form element.
Select and Option
The select and option elements are used to create a drop-down list.
Datalist
The datalist element specifies a list of pre-defined options for an input element.
Textarea
The textarea element defines a multi-line text input field.
Fieldset and Legend
The fieldset and legend elements are used to group related data in a form.
Button
The button element is used to create a clickable button.
Output
The output element is used to display a message after a form is submitted.