How to Make Interactable Forms (with HTML & Javascript)

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"/>

---

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>

---

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"/>

---

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>

---

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

---

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"/>

---

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 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