In HTML, **forms** are a way of receiving input from users and are, therefore, very useful for collecting website data. Forms have a lot of relevance in modern times as they are commonly used for sign-ups, authentication, and comments.

A form can be created with the `form` tag.

codemirror

However, the tag alone isn't of much use. So, HTML provides a variety of *attributes* and *elements* that extend the functionality of forms. 

# Form input
The most useful component of a form is the `input` tag, which creates a text field where users can enter data. Here's an example:

document.getElementsByTagName("form")[0].onsubmit = function (e) {
    e.preventDefault()
};



<html>
 <head>
 </head>
 <body>
   <form>
     Search <input type = "text" name = "search" />
   </form>
 </body>
</html>

As seen in the code above, there is a `type` and `name` associated with inputs. The `type` defines the nature of the input (`text`, `submit`, etc), while the `name` allows us to access the input data for future use. You can think of the `name` as a variable in which the input data is stored. Other properties of `input` include:
- `size`
- `value`
- `maxlength`
- `readonly`

# Submission button
A `button` can be used to submit the data in a form. This is where the `name` of the form will come in handy.


<html>
 <head>
 </head>
 <body>
   <form>
     <input type = "text" name = "search" />
   </form>
   <button type = "submit" form ="search" value = "Search">Search</button>
 </body>
</html>

For more details on HTML form attributes, check out the [official documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). 

HTML forms

Form input

Submission button