Forms in HTML documents

HTML forms are one of the most fundamental components of the web. They allow users to submit data to a server, which can then be processed and used to perform various actions, such as registering for an account, making a purchase, or searching for information.

An HTML form is created using the <form> element, which can have various attributes that determine its behavior and appearance. The most common attributes include:

  1. action: This attribute specifies the URL of the server-side script that will handle the form data when it is submitted.
  2. method: This attribute specifies the HTTP method that will be used to submit the form data, which is usually either GET or POST.
  3. name: This attribute specifies the name of the form, which can be used to reference it in scripts or stylesheets.
  4. enctype: This attribute specifies the encoding type of the form data that will be submitted to the server, which is typically either application/x-www-form-urlencoded or multipart/form-data.

Inside the <form> element, various input elements can be added to collect data from the user, such as text inputs, radio buttons, checkboxes, select menus, and file uploads. Each input element can have its own attributes that determine its behavior and appearance, such as:

  1. type: This attribute specifies the type of input element, which can be text, password, radio, checkbox, select, file, and many others.
  2. name: This attribute specifies the name of the input element, which is used to identify it when the form is submitted to the server.
  3. value: This attribute specifies the default value of the input element, which can be pre-filled by the server or the user.
  4. placeholder: This attribute specifies a hint or sample value to display in the input element before the user enters data.
  5. required: This attribute specifies whether the input element is required, which means that the user must enter data before the form can be submitted.
  6. readonly: This attribute specifies whether the input element is read-only, which means that the user can view but not edit the data.

When the user submits the form by clicking a submit button or pressing the Enter key, the form data is sent to the server using the specified HTTP method and encoding type. The server-side script can then process the data and perform various actions, such as storing it in a database, sending an email, or generating a response HTML page.

Different types of form controls in HTML

HTML provides a variety of form controls that allow users to input or select data in different ways. Following are some of the most commonly used form controls:

  1. Text Input: The <input> element with type="text" creates a simple text input field that allows users to enter text.
  2. Password Input: The <input> element with type="password" creates a text input field that masks the input with asterisks or dots to hide the entered text.
  3. Radio Button: The <input> element with type="radio" creates a set of radio buttons, of which only one can be selected at a time.
  4. Checkbox: The <input> element with type="checkbox" creates a checkbox that can be selected or deselected by the user.
  5. Select Menu: The <select> element creates a dropdown menu that allows users to select one option from a list of options.
  6. Textarea: The <textarea> element creates a large text input field that allows users to enter multiple lines of text.
  7. File Upload: The <input> element with type="file" creates a file upload control that allows users to select and upload a file from their local device.
  8. Hidden Input: The <input> element with type="hidden" creates an invisible input field that can be used to store data that is not displayed to the user.
  9. Button: The <button> element creates a clickable button that can be used to trigger a function or event on the web page.
  10. Range Input: The <input> element with type="range" creates a slider control that allows users to select a value within a range.
  11. Date/Time Input: The <input> element with type="date" creates a control that allows users to select a date, while type="time" creates a control that allows users to select a time.
  12. Color Input: The <input> element with type="color" creates a control that allows users to select a color.

Above showing controls are just a few of the most common form controls available in HTML. By combining these form controls with various HTML and CSS attributes, developers can create complex and customized forms that meet the needs of their users.

How to create an HTML form?

Creating an HTML form involves several steps, which are described below:

Create a form element

The first step is to create a <form> element in your HTML code, which will contain the form controls and specify how the data will be sent to the server. The most important attributes of the <form> element are action and method. The action attribute specifies the URL of the script that will process the form data on the server, while the method attribute specifies the HTTP method that will be used to send the data to the server, which is usually either GET or POST.

<form action="submit.php" method="POST"> <!-- form controls go here --> </form>

Add form controls

Inside the <form> element, you can add various form controls such as text input fields, radio buttons, checkboxes, select menus, and buttons using appropriate HTML elements like <imput>, <select> and <textarea>. Each form control should have a unique name attribute which will be used to identify the control on the server-side script.

<label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="Enter your name"> <br> <label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="Enter your email"> <br> <label for="gender">Gender:</label> <input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label> <br> <label for="age">Age:</label> <select name="age" id="age"> <option value="under-18">Under 18</option> <option value="18-24">18-24</option> <option value="25-34">25-34</option> <option value="35-44">35-44</option> <option value="over-44">Over 44</option> </select> <br><br> <label for="message">Message:</label> <textarea name="message" id="message" rows="4" placeholder="Enter your message"></textarea>
run this source code Browser View





Add form validation

You can add validation to the form controls using HTML5 validation attributes like required and pattern, or by adding custom JavaScript validation code to the form.

<label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="Enter your email" required> <label for="password">Password:</label> <input type="password" name="password" id="password" placeholder="Enter your password" pattern=".{6,}" title="Password must be at least 6 characters"> <script> function validateForm() { const password = document.getElementById("password").value; if (password.length < 6) { alert("Password must be at least 6 characters"); return false; } } </script> <button type="submit" onclick="return validateForm()">Submit</button>
run this source code Browser View

Submit the form

When the user clicks the submit button, the form data is sent to the server using the specified method and action. You can add a submit button using the <button> element or the <input> element with type="submit".

<button type="submit">Submit</button>
<input type="submit" value="Submit">

These are the basic steps to create an HTML webpage using Form tag.

Add form controls to HTML form

To add form controls to your HTML form, you can use a variety of input elements. Each input element has its own set of attributes that you can use to customize its behavior and appearance. Here are some common input elements and how to use them:

Text input:

This element allows the user to enter text into a form field. You can use the type attribute with a value of "text" to create a text input element.

<label for="name">Name:</label> <input type="text" id="name" name="name">
run this source code Browser View

This code creates a label for the input field with an id attribute of "name" and a name attribute of "name". The id attribute allows you to associate the label with the input field, and the name attribute specifies the name of the form field that will be sent to the server when the form is submitted.

Checkbox

This element allows the user to select one or more options from a list. You can use the type attribute with a value of "checkbox" to create a checkbox input element.

<label for="subscribe">Subscribe to our newsletter:</label> <input type="checkbox" id="subscribe" name="subscribe" value="yes">
run this source code Browser View

This code creates a label for the checkbox input with an id attribute of "subscribe", a name attribute of "subscribe", and a value attribute of "yes". When the checkbox is checked, the value "yes" will be sent to the server along with the name "subscribe".

Radio button

This element allows the user to select one option from a list. You can use the type attribute with a value of "radio" to create a radio button input element. For example:

<label for="gender-male">Male</label> <input type="radio" id="gender-male" name="gender" value="male"> <label for="gender-female">Female</label> <input type="radio" id="gender-female" name="gender" value="female">
run this source code Browser View

This code creates two radio button inputs with different id, name, and value attributes. The name attribute should be the same for both radio buttons, so that only one option can be selected at a time. When the user selects one of the radio buttons, the corresponding value attribute will be sent to the server along with the name "gender".

Select menu

This element allows the user to select one option from a drop-down list. You can use the <select> element to create a select menu, and the <option> element to create each option in the list.

<label for="city">City:</label> <select id="city" name="city"> <option value="new-york">New York</option> <option value="los-angeles">Los Angeles</option> <option value="chicago">Chicago</option> </select>
run this source code Browser View

This code creates a label for the select menu with an id attribute of "city", a name attribute of "city", and three options with different value attributes. When the user selects one of the options, the corresponding value attribute will be sent to the server along with the name "city".

What is form validation and how is it done in HTML?

Form validation is the process of ensuring that the data entered into a form by a user is accurate and meets certain criteria before it is submitted to the server. In other words, it helps to prevent users from submitting incomplete or incorrect data to the server.

In HTML, form validation can be done using the built-in form validation attributes and JavaScript. Following are some examples:

Required attribute

You can use the required attribute to make a form field required.

<label for="name">Name:</label> <input type="text" id="name" name="name" required>

This code creates a text input field with the required attribute. This means that the user must enter a value into this field before they can submit the form.

Pattern attribute

You can use the pattern attribute to specify a regular expression that the user's input must match.

<label for="phone">Phone:</label> <input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

This code creates a text input field for the user to enter their phone number, and uses the pattern attribute to specify that the phone number must be in the format "XXX-XXX-XXXX", where each X represents a digit.

JavaScript validation

You can use JavaScript to perform more complex validation on a form.

<form onsubmit="return validateForm()"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <button type="submit">Submit</button> </form> <script> function validateForm() { var email = document.getElementById("email").value; var pattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/; if (!pattern.test(email)) { alert("Please enter a valid email address."); return false; } } </script>
run this source code Browser View

This code uses the onsubmit event to call a JavaScript function called validateForm(). This function gets the value of the email input field, and uses a regular expression to check if it is a valid email address. If it is not valid, an alert message is displayed, and the function returns false, which prevents the form from being submitted.

Above showing are just a few examples of how form validation can be done in HTML using the built-in attributes and JavaScript. It's important to remember that form validation should be done both on the client side (using JavaScript) and on the server side, to ensure that the data entered by the user is accurate and secure.

Specify where the form data should be sent

To specify where the form data should be sent, you need to use the action attribute in the <form> element. The action attribute specifies the URL of the server-side script that will process the form data. When the user submits the form, the browser will send the form data to the URL specified in the action attribute using the HTTP method specified in the method attribute.

There are two ways to specify the URL in the action attribute:

Relative URL

You can use a relative URL in the action attribute to specify the path to the server-side script relative to the current page. For example, if the server-side script is located in the same directory as the current page, you can specify the URL as follows:

<form action="process-form.php" method="POST"> <!-- form controls go here --> </form>

If the server-side script is located in a different directory, you can specify the path relative to the current page as follows:

<form action="../process-form.php" method="POST"> <!-- form controls go here --> </form>

Absolute URL:

You can use an absolute URL in the action attribute to specify the full URL of the server-side script, including the protocol, domain, and path. For example:

<form action="https://example.com/process-form.php" method="POST"> <!-- form controls go here --> </form>

When the user submits the form, the browser will send the form data to the URL specified in the action attribute. The server-side script can then process the form data and send a response back to the browser, which can be displayed on the current page or on a new page, depending on how you handle the response in the script.

Conclusion:

HTML forms are an essential tool for creating interactive web applications that can collect data from users and perform various actions on the server side. By using the various input elements and form attributes available in HTML, developers can create rich and engaging web forms that meet the needs of their users.



Related Topics
  1. HTML Form Attributes
  2. HTML Form Elements
  3. HTML Form Action
  4. HTML Input Types
  1. HTML Input Attributes
  2. HTML Input Form Attributes