##############################
Forms
##############################

At some point, you have certainly used a form in a web application. Forms are a critical part of the web, as they allow for users to interact with your website.

To get started, the <form> tag is used to tell the computer when a form begins and ends

.. code-block:: html

   <form>
      <!-- Form will go here -->
   </form>

Forms are often used to log into a web page. To create this form, we need to take a username and password, and have a submit button.

To accept user input, we need to add an <input> element. Inputs can be used for all different kinds of user interaction. To choose which kind of input is to be shown, we need to give the input tag an **attribute** called **"type"**. This can range from text fields to check-boxes and drop down menus.

.. code-block:: html

   <form>
      <input type="text"></input>
      <input type="text"></input>
   </form>

Now, we have two inputs, but we can't tell the difference between them! To tell the computer which input is the username and which is the password, we give them both **"name" attributes**.

.. code-block:: html

   <form>
      <input type="text" name="username"></input>
      <input type="text" name="password"></input>
   </form>

.. highlights:: **HTML tags can have as many attributes as they need, and are always included in the opening tag, as demonstrated above.**

A key concept to learn with forms, is the idea of **data validation**. We can't expect our users to always input the correct information. For example, say we wanted the username to be an email address. Often, users can give invalid emails which we can't send anything to. This would make our website seem broken, as the user may not realise they typed in the wrong email.

To prevent this, we **validate** the form inputs. This means checking that the correct kind of data has been typed in, such as checking an email address has an @ symbol. This can be achieved in a variety of ways, and usually uses a combination of HTML, CSS and JavaScript. For today, we can look at an example that can be done in pure HTML.

If we wanted our username field to be an email, HTML has a built in input type for this! We can use the input type "email" to ensure that they only input valid email addresses

.. code-block:: html

   <form>
      <input type="email" name="username"></input>
      <input type="text" name="password"></input>
   </form>


Lastly, and most importantly, a form needs a way to be submitted. In HTML, we have the <button> tag which displays a click-able button. We can add this button into the form as shown.

.. code-block:: html

   <form>
      <input type="email" name="username"></input>
      <input type="text" name="password"></input>
      <button>Log in</button>
   </form>

To tell the computer that this button submits the form, we need to give it a type attribute, just as we did with the inputs.

.. code-block:: html

   <form>
      <input type="email" name="username"></input>
      <input type="text" name="password"></input>
      <button type="submit">Log in</button>
   </form>

And that's a basic HTML form! For now, displaying the form is all we can do, as HTML does not have any ability to send the form data around. For that, we will need to learn JavaScript, which we will cover after some CSS styling.