How to Make Interactable Forms (with HTML & Javascript)
Tags: html, javascript, tutorial
Published: 2022-07-12 03:33:00

Ok so you have your website looking pretty with headers, paragraphs of information, images, etc. but now you want something back: engagement and interactivity. But how? 

Your first step is in HTML.

Not all forms are alike and depending on what you want to do, you may want to limit the user interaction, but there are some basics that are helpful to get started.
_____________________________________________________________

Form Tag: The form tag is like a `<div>` that is specifically for things you want your user to interact with. There are, however, some cool differences between regular `<div>` and `<form>` that we'll get more into when we go into the Javascript portion.
```
<form id="example_form"></form>
```
Within the opening `<form>` and closing `</form>` tags there are the following options:
_____________________________________________________________

Text Box: Where the user is able to type in something to be submitted. When the form is submitted, this option will return what was typed in by the user as a string.
```
Textbox: <input id="name" type="text"/>
```
![Textbox example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnku5h867cy97f28t6mx.png)
_____________________________________________________________

Big Textbox: This is just a bigger version of the text box listed above. Like above, this option will return the typed data from the user as a string. Difference here is that you can specify how big the box is with columns and rows.
```
<textarea cols="20" name="textbox" rows="5">Textbox</textarea>
```
![Big Textbox example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8ia22uewcwofceee0u3.png)
_____________________________________________________________

Number Box: Where the user is able to either type or use the arrows on the side of the box to adjust the `value` (which can have a default as shown in the below example) the amount of `steps` indicated. Having `type = "number"` makes it so that you can increment and decrement using arrow keys, otherwise this would be a normal text box. This option will return the `value` when the form is submitted.
```
Number: <input id= "number_box" max="99" min="1" step="1" type="number" value="18"/>
```
![Number box example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5gq17d5bhd9dp5b5ecd.png)
_____________________________________________________________

Drop Down Selection: Where the user is able to select from a number of predefined options through a drop down list. The text in between the `<option>` and `<\option>` tags is what the user sees. However, when they select Option 1, they will be returning the `value` of Option 1 ("opt1"). The `selected` tag indicates that the value it is attached to is the default selection (what the user will see when they first come across the form).
```
Drop Down Selection <select id="drop_down_window">
<option selected="selected" value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
```
![Drop Down example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oba6egexk5goutlt03h6.png)
_____________________________________________________________

Bubbles/Checkboxes: Where the user can select from predefined options through selecting the bubble/box associated with the option they would like to indicate. 
- If you would like checkboxes, make `type = "checkbox"`
- If you would like bubbles, make `type = "radio"`
- The `checked` tag is used to indicate that it should be automatically checked before the user selects it.
- The `value` is what the application will actually return when the form is submitted.
- The `name` tag (if named the same between options) helps keep your `radio` buttons connected so that when you click one it unclicks the other 
```
<input checked="checked" name= "bubbles" type="radio" value="opt3"/> Option 3 
<input name = "bubbles" type="radio" value="opt4"/> Option 4
<input type="checkbox"/> Checkbox
```
![Bubbles and Checkbox example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbbnigcojsg4dxjq6ljf.png)
_____________________________________________________________

Submit Button: Finally, how to actually submit the information! This code makes a button. The `value` tag is also the label of the button (aka visible to the user). Buttons can trigger a `submit` event (more details on that later).
```
<input type="submit" value="Submit"/>
```
![Submit Button example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cgvp8b1qsy04pliax4s.png)
_____________________________________________________________

You've got all that, but it doesn't do anything, why? We haven't told our application to listen for it. We will be doing that with step 2: Javascript.

I am going to be assuming you have used an `eventListener` before but if not, please see [this](https://www.makeuseof.com/javascript-event-listeners-how-to-use/) on the basics of how to use one. 

Let's jump in: 

1. First you need to select your form from your HTML document using `document.querySelector(____)` or `document.getElementById(____)` (I don't recommend getting it by class names just in case you want to have more than one form.) The blank should be the identifier for the form (id, class, name, tag, etc)

2. (Here's where we get to the cool part!) Add your `Event Listener` with the event type of `"submit"` and either call a callback function to deal with the data or make a function inside like the example below:

```
document.querySelector("#form").addEventListener("submit", e => 
{
e.preventDefault();
const userInput = document.querySelector("#name").value;
document.querySelector("#form").reset()
})
```
- `.preventDefault()` is piece of code that prevents the page from automatically reloading when you submit a form. This is helpful so that you can actually capture the information given on the form instead of it being wiped away with the refresh.

- Because we added an event listener to the `form` and listened for the `submit`, all the user input inside the `<form>` tags has been submitted! All we need to do is access it by finding the id tag (in this case `"#name`) of the input in question and using `.value` which will return the value of the targeted input. 

- After you've received the values, I recommend wiping the form with `.reset()` if you are not going to redirect the page or hide the form after completion so that there is no confusion as to whether or not your user has submitted the form.

Now, you can do all sorts of things with user submitted information but my last brain cell has just died so now it is up to you to do with this information what you will...

Good luck!

**************************RESOURCE**************************
[HTML CHEAT SHEET](https://htmlcheatsheet.com/)