Week 8 - Forms & Requests

Wednesday Agenda

  • Something extra planning

Monday

Tuesday

Thursday

HTML Forms

The form element in HTML is what we use to group inputs into a package and to then send the values of those inputs as a request to a server. These videos cover the basic concepts of forms and outline the types of inputs available to use within them:

To build an application that uses forms to edit data, we need to be able to construct forms that show the existing data. This video shows how that is done:

HTML Form Reference

Form Processing

Data from a form will come back to the server, generally as a POST request. We need a route to handle that request and do any necessary work.

Validation

Validation is the process of making sure that the data a user provides makes sense and obeys the logic of our application. For instance, if we are building a reservation system, we might want to make sure that any date submitted is a valid date (and is not something like 2/34/2024) and is no more than 90 days in the future.

Ideally, that validation happens on the client side so that users can't even submit bad data to the server:

But, as a last line of defense, we also should make sure to validate information on the server:

Validation References

Putting It Together

This video provides a final overview of the sample project structure and files:

I also provide a sample that allows for more complex editing of the relationships between Heros and Teams. Although you will not need any of these tricks for this week's assignment, some of them may be useful in the final project:

Sanitization

Sanitization and Validation are similar concepts - they both involve making sure we don't take bad input from a user. The difference is the goal we have. Validation is more about helping the user - making sure they don't enter an invalid date or leave an important field blank. Sanitization is more about protecting our application and other users of it from actively malicious user input.

This video explains:

Fun extra : XKCD cartoon on the importance of sanitization

Form Accessibility

Forms add a few new accessibility concerns we should be mindful of. The good news is that as long as we stick to standard inputs, there isn't too much extra work needed to make an accessible form. The primary thing to worry about is properly labeling all the inputs. Learn about doing so in this video:

Form Accessibility Reference