The GET method sends data via the URL and is suitable for non-sensitive information. The POST method sends data securely in the request body, ideal for confidential inputs like passwords.
Check out our detailed Answer on GET vs. POST
Key takeaways:
HTML5 semantic tags like <form>, <fieldset>, and <label> enhance both structure and SEO by adding context and meaning to form elements.
Form attributes, such as action, method, and target, control how data is processed and transmitted securely.
CSS improves the appearance of forms, making them user-friendly and responsive across different devices.
JavaScript validation ensures users provide accurate input, reducing errors and improving data quality.
Accessibility best practices, such as using <label> tags associated with inputs, enhance the experience for users with
An HTML form collects input from users, typically through elements like input fields, checkboxes, and radio buttons. The collected data is transmitted to a backend server for further processing or used immediately to update the web page. Forms are made responsive by adding JavaScript to them. Similarly, we can also use CSS to better style the forms.
A basic HTML form starts with the <form> element and is structured with components like <input>, <textarea>, <button>, and <label> to create user interfaces.
<form> elementTo create a form using the <form> element, you start with a similar syntax shown below:
<form action="/submit-user-details" method="post">...</form>
<form>: The <form> element wraps all input fields, buttons, and other components. It specifies the action—where to send the data—and method—how to send it.
action: It specifies the server-side script or URL that processes the submitted data.
method: It defines how the data is transmitted. For example, which HTTP method to use to transmit the data.
POST: Securely sends data in the request body (used for sensitive data).
GET: Sends data via the URL (useful for non-sensitive queries).
Want to build a SEO friendly real-world application with HTML? Try this project: Build a Microblogging App Using PHP, HTML, JavaScript, and CSS.
As seen above, the element also supports some specific attributes—action and method—to configure how the form behaves. These attributes are optional, but it’s a good practice to always set these when using forms.
Note: The goal of this answer is to create an HTML form, so we will not add any dynamic elements, e.g., we will not use JavaScript.
HTML provides several elements that can assist you in collecting data when building a form. These include input fields, select menus, checkboxes, radio buttons, and text areas. Now, let’s build a basic HTML form using these elements, and we will also add some styles using CSS.
Lines 3–8: The <head> tag contains metadata about the document, such as its title and the link to an external CSS stylesheet. This ensures the form has a meaningful title displayed in the browser tab and applies styles for a better appearance.
Line 11: We use the <form> tag to create the form with the POST method, which is typically used to send data securely to a server. For now, the action="#" is a placeholder URL, meaning the form will not send data to a server but is functional for demonstration purposes. In a real-world application, you would replace # with a proper server endpoint (e.g., /submit-user-info) to process the form data.
Lines 12–22: We use the <section> tag to define the personal information section of the form.
Line 13: We use the <h2> tag for the section heading.
Lines 14–15: We use the <label> and <input> tags for the first name label and its input field. We also make the first name field required.
Lines 17–18: We again use the <label> and <input> tags for the last name label and its input field. We also make the last name field required.
Lines 20–21: We again use the <label> and <input> tags for the date of birth label and its input field. We also make the date of birth field required. We also set the type of input field to date to render a date picker.
Lines 24–31: We use the <section> tag to define the contact details section of the form.
Line 25: We use the <h2> tag for the section heading.
Lines 26–27: We use the <label> and <input> tags for the email label and input field. We also make the email field required. We also set the type of input field to email to ensure that users only enter a valid email.
Lines 29–30: We again use the <label> and <input> tags for the phone number label and input field. We also make the phone number field required. We also set the type of input field to tel to ensure that users only enter a valid phone number.
Lines 33–43: We use the <section> tag to define the preferences section of the form.
Line 34: Again, we use the <h2> tag for the section heading.
Lines 36–37: We use the <label> and <input> tags to allow users to select a gender. We also set the type of input fields to radio to ensure that the input field is a radio button.
Lines 40–42: We use the <label> and <input> tags to allow select their interests. We also set the type of input fields to checkbox to ensure that checkboxes are rendered, allowing users to select multiple interests.
Line 45: We create a button to submit the form data to the route we defined earlier.
Enhance you understanding of HTML and CSS with the help of this project, Creating an Online CV with HTML and CSS.
We covered the basics of building an HTML form, including how to structure it with HTML5 semantic tags and style it with CSS.
Haven’t found what you were looking for? Contact Us