Basic HTML

Home / Topic / Basic HTML / Forms in HTML

Forms in HTML

Structure of a Form (`<form>`, `<input>`)

Forms allow users to submit data to a server. We use the <form> tag to define the form, and <input> for the input fields. The action and method attributes in <form> determine where and how the data is sent.

html

"This form sends data using the post method to the address specified in action. It contains a text input field where the user can enter their name."

Input Types (`text`, `email`, `password`, `number`, etc.)

The <input> element supports various input types. Each input type is designed to collect a specific type of data.

html

"This form has several types of fields: a text field for the name, an email field, a password field that hides the entered text, and a numeric field for age."

Labels for Fields (`<label>`)

The <label> tag helps identify the input fields. Associating a label with an input field enhances accessibility.

html

"In this example, each input field is associated with a label. The for attribute pairs with the corresponding input field's id attribute."

Common Form Elements (`<textarea>`, `<select>`, `<option>`, `<button>`)

Besides <input>, HTML forms include other elements like <textarea> for long text, <select> for dropdown menus, and <button> for submitting or resetting the form.

html

"This form includes a text area for a message, a dropdown menu for selecting the country, and a submit button. The select tag contains individual options that the user can choose."

Form Attributes (method, action, autocomplete, etc.)

In addition to method and action, HTML forms can have attributes like autocomplete for automatic suggestions. These attributes help customize how data is sent and processed.

html

"Here, the form uses the get method to send data in the URL. The autocomplete attribute is enabled, allowing the browser to suggest results based on previous inputs."

Form Validation (required, pattern, min, max, etc.)

To enhance user experience and data accuracy, HTML allows input validation with attributes like required, pattern, min, and max.

html

"This form has two fields with validation. The phone field must match a ten-digit numeric pattern, and the age field only accepts numbers between 18 and 99."

Chapter Summary

You now know the essential elements to create HTML forms and collect user data. In the next chapter, we will learn how to effectively structure HTML documents and work with metadata.

Back to previous chapter

Mark as read and continue