Web Apps from scratch: Forms

Getting into form ☑

Forms are a fundamental component of web applications. They allow us to validate and take input from users which become structured data in our databases. This post will go through some of the basics of forms.

The Form element & attributes

The form element is created with the form tab and has the following attributes:

• autocomplete: can disable the browser's autocomplete, values "on" or "off"
• method: specified the HTTP method, values "GET" or "POST"
• enctype: affects the MIME Type of the data submitted. Values:
  • application/x-www-firn-urlencoded
  • text.plain
  • mutlitpart/form-data

Form input elements

It's important to use the appropriate input elements for the data needed. Some elements have a dedicated tag while others are attributes on the input tag.

• Selecting a single value from a list
  • input[type="radio"]
  • select
  • datalist
• Selecting multiple values from a list
  • select (with "multiple" attribute)
  • input[type="checkbox"] multiple boxes with the same name
• Boolean Values: single checkbox
• Time : input[type= "week|time|datetime|date|week|month|datetime-local"]
• Numeric
  • input[type="text" inputmode="numeric|decimal"]
  • input[type="number"]
  • input[type="range"], gives a slider (best used for small ranges)
  • Files : input[type="file"]
  • password : input[type="password"]
• Email : input[type="email"]
• Telephone : input[type="telephone"]
• URL : input[type="URL"]

Form validation

We can add simple validation to our forms to prevent them from submitting unless certain conditions are met.

This is done via validation attributes such as:

• required: field must contain a value
• minlength: specifies the minimum length of valid input
• pattern: field must match with the specified Regular Expression.

Inputs with type=email/url/telephone will also validate input appropriately.

Form Submission

By default, an HTML form element will make a GET request to the current URL and append the form data as a query string.

For Example the following form:

<form id="myform">
     <input type="text" name="username"/>
     <input type="password" name="password"/>
     <submit>Send</submit>
</form>

Would redirect the browser to /?username=bob&password=pass when the form is submitted with the values 'bob' and 'pass'. Normally there would be code on the backend that will receive the data from the URL.

We can override these defaults with the method and action attributes mentioned earlier.

Alternatively, for single-page applications we can use javascript to prevent the page redirect and submit the form.

document
  .querySelector('#myform')
  .onsubmit = async function(event){
      event.preventDefault();//prevent the form submission
      const formData = new FormData(event.target);
      //pull out all the data from the form
      const data = Object.fromEntries(formData.entries());
      const response = await fetch(
         '/myserver', 
         { 
           method:'POST', 
           body:JSON.stringify(data)},
           headers: { 'Content-Type': 'application/json'}
         }
      );//send data to the server
      const text = await reponse.text;
      alert(text); //alerts the server's reponse
}

The snippet above prevents the page redirect and sends the form data as JSON to the URL provided.

Going Deeper

You can see a more in-depth example at this
Repl that will allow you to change the content types and see the response from the server.

Conclusion

This concludes the basics of HTML forms as you can see, there's much you can accomplish with standard HTML and Javascript.