HTML forms and submit events

HTML Forms

The html form element is frequently used on the web and can support a lot of variation. Functionally, a form is used to obtain user input, and is represented with the <form> tag. Within the form, there can be one or more of the following types of elements:

1. <input> is a very common and versatile form element. It has a default type of "text" but has over 20 different type options. I will be focusing on the <input> type.
2. <textarea> is a text input that allows for multiple lines of text
3. <button> is a standard, clickable button
4. <select> provides a drop-down list of options
5. <option> is used to define the options inside of other form elements, such as inside a list
6. <optgroup> is also used in lists to group related options within the list
7. <fieldset> is another organizational tool, used to group related elements within a form
8. <label> sets a label using a "for" attribute that matches the id of a related form element. This can be useful for screen readers, and increases overall readability
9. <output> is used to compute and display the result of a specified calculation performed on other elements

Here is a standard form element with a text input, a textarea, and a button:

<form>
  <input type="text" placeholder="Input 1" style="margin-bottom: 5px">
  <br>
  <textarea rows="3" cols= "30">Example text 1</textarea>
  <br>
  <button type="button">Button</button>
</form>

Input types

There is a large amount of input types. The default is type="text", but any of the following can be set:
button, checkbox, color, data, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week.
These come with a wide range of features, such as a password field keeping entries hidden, or type email requiring proper email format.

<form id="form1">
  <label for="username">Username:</label><br>
  <input type="text" id="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" placeholder="Email">
  <input type="submit" id="submit">
</form>

Several things can happen to the information when the form is submitted. The form tag can take an action attribute with a URL value. When the form is submitted, the data will be sent to the specified URL: <form action="/server_url.php method="get">
Alternatively, if the information will be utilized immediately, the submission can be linked to an event listener.

Submit Events

Submit events on forms are used to collect the user input from the form and use it elsewhere. Usually, this is done when an input type="submit" is clicked or a button type="submit" is clicked, but it can also be triggered by pressing "enter"
while editing a form field. On the previous form, the submit event would look like this: document.getElementById("form1").addEventListener("submit",(event) => console.log("Successful submission!"))

It is worth noting that a submit event occurs on the entire form, and not just the input button that was pressed. Further, the event type must be called "submit" and will not provide the same function if there is a "click" event on the submit button. In the previous example, the entire form is grabbed using the form id "form1", instead of adding the event listener to the form submit button.

When the submission is triggered, an event object is created. This event has properties like timestamp, type, and target, among others. If writing javascript to handle data from a submission, the event object data can be used to access the input submissions. It turns out that the event target refers to the entire form, so using the ids of the form elements, the information can be accessed. For example, in the previous form, the username would be accessed with event.target.value, the password could be accessed with event.pwd.value, and the email could be accessed with event.email.value.

There are many default responses from the browser to various events, and one of them is in response to submits. A browser will submit the form and refresh the page. This can cause issues with webpage functionality, so sometimes it is necessary to prevent this default behavior. This is done by calling preventDefault() on the submit event. event.preventDefault() can be used at the start of the event listener callback function to remain on the same page without reloading.

Because of preventDefault, the user inputs will remain in the form. This can be an issue if you want the form to remain clear for further use. To remedy the lingering information, you can call .reset() on the form element event.target.reset(). Putting all this together, a submit event to store data in a new object might look like this in javascript:

document.getElementById("form1").addEventListener("submit", (event) => {
event.preventDefault();
const formObj = {
username: event.target.username,
password: event.target.pwd,
email: event.target.email
}
event.target.reset();
}

Wrap up

At its simplest, the form element takes in user input to be used elsewhere, whether that's through a URL submission or an event listener. There are many different types of form elements, ranging from regular text to drop down menus to buttons, and those elements can also be many different types. When using an event listener, remember to prevent the default behavior if you do not want to refresh the page, and utilize the target property of the event to access submission data.