Learn HTML Series
(20/n)
HTML Form Basics 📰
(20/n)
HTML Form Basics 📰
What are web forms?
Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage or used on the client-side to immediately update the interface
Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage or used on the client-side to immediately update the interface
A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form - they are often referred to as HTML forms.
Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.
Implementing our HTML form
✅ The <form> element
✅ The <form> element
This element formally defines a form. It supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the 'action' and 'method' attributes 👇
✅ The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.
✅ The method attribute defines which HTTP method to send the data with (usually GET or POST).
✅ The method attribute defines which HTTP method to send the data with (usually GET or POST).
✅ The <label>, <input>, and <textarea> elements
✔️ The input field for the name is a single-line text field.
✔️ The input field for the e-mail is an input of type email: a single-line text field.
✔️ The input field for the bio is a <textarea>; a multiline text field.
✔️ The input field for the name is a single-line text field.
✔️ The input field for the e-mail is an input of type email: a single-line text field.
✔️ The input field for the bio is a <textarea>; a multiline text field.
For usability and accessibility, we include an explicit label for each form control. The 'for' attribute on all <label> elements takes its value as the id of the form control with which it is associated - this is how you associate a form control with its label
On the <input> element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the <input> element appears and behaves.
✅ The <button> element
The markup for our form is almost complete; we just need to add a button to allow the user to send or submit their data once they have filled out the form. This is done by using the <button> element; add the following just above the closing </ul> tag:
The markup for our form is almost complete; we just need to add a button to allow the user to send or submit their data once they have filled out the form. This is done by using the <button> element; add the following just above the closing </ul> tag:
The <button> element also accepts a type attribute - this accepts one of three values: submit, reset, or button 👇
✅ A click on a 'submit' button (the default value) sends the form's data to the web page defined by the action attribute of the <form> element.
✅ A click on a 'submit' button (the default value) sends the form's data to the web page defined by the action attribute of the <form> element.
✅ A click on a 'reset' button resets all the form widgets to their default value immediately. You should avoid using this.
✅ A click on a 'button' button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons.
✅ A click on a 'button' button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons.
Sending form data to your web server
We provide a name attribute for each form control. They tell the browser which name to give each piece of data and, on the server-side, they let the server handle each piece of data by name. The data is sent to the server as name/value pairs.
We provide a name attribute for each form control. They tell the browser which name to give each piece of data and, on the server-side, they let the server handle each piece of data by name. The data is sent to the server as name/value pairs.
In our example, the form will send 3 pieces of data named "user_name", "user_email", and "user_bio". That data will be sent to the URL "/create_user" using the HTTP POST method.
On the server-side, the script at the URL "/create_user" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language has its own mechanism of handling form data.
Hey devs, I am Atul Kumar 👋
If you liked this thread: 😃
✅ Follow me 🚀
✅ Retweet ➰
I write useful threads on Full Stack Web Development 🌐, Game Development 🎮 and Personal Growth 🧑🎓 daily 😎
Follow me on GitHub: github.com
If you liked this thread: 😃
✅ Follow me 🚀
✅ Retweet ➰
I write useful threads on Full Stack Web Development 🌐, Game Development 🎮 and Personal Growth 🧑🎓 daily 😎
Follow me on GitHub: github.com
Here's the previous chapter:
Loading suggestions...