HTML Forms

HTML Form

In the ever-changing technological landscape, it is very important to get data and at the same time, we should make sure that the user doesn't feel inconvenience. After all, we are here to provide ease to the user. One such method of collecting data from the user is by using forms.

HTML provides us this amazing <form> element to collect input data with containing interactive controls. We can get access to predefined input types such as text, numbers, values, emails, and passwords. Along with the input types, it also provides control fields such as checkboxes, radio buttons, submits buttons, etc. Forms are generally used to collect information from the user. For example, a user wants to buy a programming course online, so he/she needs to enter their details prior to enrolling in the course.

Forms are created by placing input fields within paragraphs, lists and tables. This gives considerable flexibility in designing the layout of forms.

The syntax is :

<form>
    <!--form elements-->
</form>

They are a long list of Form elements available. We will go through it one by one

1. <label>:The <label> tag defines a label for <form> elements.
   Tip: The attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.

2. <input>: It is used to get input data from the form in various types such as text, password, email, etc by changing its type.

3. <button>: It gives us a button that can be used to control other elements or to execute some functionality.

4. <select>: It gives us the flexibility to create a drop-down list.

5. <textarea>: The <textarea> tag defines a multi-line text input control which will be helpful in collecting information like comments or reviews.

6. <fieldset>: The <fieldset> tag is used to group related elements in a form, this draws a box around the related elements.
   Tip : If we want to define a caption for the <fieldset> we should use <legend> tag

7. <datalist>: the tag specifies a list of predefined options for an <input> element, this will help us in providing an autocomplete feature for <input> element in the form of pre-defined options as they input data.
   Tip: The The element's id attribute must be equal to the element's list attribute to bind them together

8. <output>: This will be used to display the output of predefined calculations.

9. <option>: This will be used to define options in a drop-down list.

10. <optgroup>:This will be used to define group-related options in a drop-down list.

Note: When we use both select and option together to create a drop-down list, it is called Combobox.

Form Attributes:
While defining a form we also need to declare two types of attributes namely action and method.

Action Attribute First, we will go through the action attribute and will try to understand it better. The action attribute specifies where to send the form data when a form is submitted

The syntax is:

<form action="URL">

There are two types of possible values we can pass into the URL,

1. An absolute URL - points to another website
2. A relative URL - points to a file within a website

As we understand the action attribute let us try to understand the method attribute. The method attribute specifies how to send form data (the form data is sent to the page specified in the action attribute).

Method Attribute The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

Short notes on GET: Appends form-data into the URL in name/value pairs The length of a URL is limited (about 3000 characters) Never use GET to send sensitive data! (will be visible in the URL) Useful for form submissions where a user wants to bookmark the result GET is better for non-secure data, like query strings in Google

Short notes on POST: Appends form-data inside the body of the HTTP request (data is not shown in URL) Has no size limitations Form submissions with POST cannot be bookmarked

That's all I have for , hope you gained some value by reading this, you can know more about forms by going through w3schools and GeeksforGeeks. Thanks for your time.