HTML Forms

HTML Forms are an essential part of the web development process that allows users to submit information to a web server. HTML forms are used for a variety of purposes, including collecting user information, creating search bars, and enabling user registration on websites.

What is an HTML form?

An HTML form is a section of a web page that contains one or more input elements, such as text fields, checkboxes, radio buttons, dropdown menus, etc. These input elements allow users to enter or select data that can be sent to the server for processing.

Syntax:

An HTML form is defined by using the <form> tag. The <form> tag has two attributes that specify how the data will be sent to the server: action and method.

The action attribute defines the URL of the server-side script that will handle the form data. For example, action="https://example.com/process_form.php" means that the form data will be sent to the process_form.php script on example.com.

The method attribute defines the HTTP method that will be used to send the data. There are two main methods: GET and POST. The GET method appends the form data to the URL as a query string, while the POST method sends the data as part of the request body. The GET method is suitable for simple and short data, while the POST method is preferred for large and sensitive data.

The enctype attribute specifies how the form data should be encoded when it is sent to the server. The most common value for this attribute is "application/x-www-form-urlencoded."

An example of an HTML form with action and method attributes is:

<form action="https://example.com/process_form.php" method="POST">
 <!-- input elements go here -->
</form>

How to create input elements?

Inside the <form> tag, we can use various input elements to collect different types of data from users. Each input element has a name attribute that identifies the data and a value attribute that specifies the data itself. The name and value attributes are used by the server-side script to process the form data.

Some of the most common input elements are:

• <input type="text">: creates a single-line text field for entering text.
   
• <input type="password">: creates a single-line text field for entering passwords. The characters are masked for security reasons.
   
• <input type="email">: creates a single-line text field for entering email addresses. The browser may validate the format of the email address before submitting.
   
• <input type="number">: creates a single-line text field for entering numbers. The browser may provide up and down arrows for adjusting the number.
   
• <input type="checkbox">: creates a checkbox that can be checked or unchecked. A checkbox can have two values: on (checked) or off (unchecked).
   
• <input type="radio">: creates a radio button that can be selected or deselected. A radio button can have two values: on (selected) or off (deselected). Radio buttons with the same name attribute belong to the same group and only one can be selected at a time.
   
• <input type="submit">: creates a button that submits the form data to the server.
   
• <select>: creates a dropdown menu that allows users to choose one option from a list of options. The <select> tag contains one or more <option> tags that define each option. The <option> tag has a value attribute that specifies the value of the option and a text content that specifies the label of the option.
   
• <textarea>: creates a multi-line text area for entering long text.

HTML Form Example:

Let's create a simple HTML form that allows users to enter their name and email address:

<form action="/submit-form.php" method="POST" enctype="application/x-www-form-urlencoded">
 <label for="name">Name:</label>
 <input type="text" id="name" name="name" required>
 
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 
 <button type="submit">Submit</button>
</form>

Explanation:

In the above example, we've created a form that will be submitted to /submit-form.php upon submission. We've set the method attribute to POST which means that the form data will be sent in the request body rather than in the URL.

We've also set the enctype attribute to application/x-www-form-urlencoded which is the default encoding type for HTML forms.

Inside the <form> element, we've added two form fields: one for the user's name and one for their email address. We've used the <label> element to create labels for these fields, which improves accessibility and usability.

We've also used the <input> element to create text fields for the user to enter their name and email address. The type attribute of these input fields is set to text and email respectively, which ensures that the browser validates the user's input and provides a suitable keyboard for mobile devices.

The required attribute has been added to both input fields, which means that the form cannot be submitted until both fields have been filled in.

Finally, we've added a submit button to the form using the <button> element. When the user clicks this button, the form data will be submitted to the server.