Objectives and Skills[edit | edit source]
Objectives and skills for this lesson include:
- Complete and debug code that retrieves input from forms and sets form field values
- Retrieve form values; identify the DOM path; get values from different types of elements; prepopulate values; mask values
- Describe the form submission process
- onsubmit; post versus get; potential targets for submission
- Implement exception handling
- try; catch; finally
Readings[edit | edit source]
- Wikipedia: Form (HTML)
- Wikipedia: Data validation
- Wikipedia: Web application security
- Wikipedia: Exception handling
- Input tag Definition and Usage
Multimedia[edit | edit source]
Examples[edit | edit source]
- W3Schools: HTML Form Attributes
- W3Schools: Enctype in Form tag
- Example Code
Activities[edit | edit source]
- Create an HTML form that allows the user to enter their first name, last name, address, city, region, postal code, email address, phone number, and date of birth.
- Review W3Schools: HTML Form Attributes. Use form attributes wherever possible to improve data validity. Include required, min, max, minlength, maxlength, pattern, and/or type, where appropriate. Include a default value for region.
Lesson Summary[edit | edit source]
- A web form, also called an HTML form, is an online page that allows for user input. It is an interactive page that mimics a paper document or form, where users fill out particular fields. Typically, a web form contains a combination of form elements such as a checkbox, submit button, text box, etc. For added interactivity, web designers may use elements or classes such as "input" along with "action" and "method" attributes. [https://www.techopedia.com/definition/25561/web-form]
Key Terms[edit | edit source]
- This input element method returns true if the element contains valid data according to the rules you have specified in the input field.
- Client-Side Form Validation
- An initial check that happens in the browser and helps ensure users fill out the form using correct data formats. Error messages are displayed if corrections are needed.
- HTML <input> attribute that specifies a regular expression that the <input> element's value is checked against on form submission.
- Runs the checkValidity method on the element's child controls. Those child elements which do not satisfy their validation constraints are reported to the user.
- HTML <input> attribute that when present, will specify that an input field must be filled out before submitting the form.
- Server-Side Form Validation
- A validation that checks the data sent to the server and ensures that incorrect or malicious data is rejected.
- This method sets the custom validity message for the selection element to the specified message. To reset the validity use an empty string as a parameter.
- The ValidityState returns an object containing the errors detected via HTML constraint validation.
See Also[edit | edit source]
- Medium: 11 things developers should know about GET vs POST
- MDN: Input Validation
- MDN: HTML attribute: Pattern
- MDN: Constraint Validation
- Smashing Magazine: Form Validation Best Practices
References[edit | edit source]
- MDNː Form data validation