Lecture 7 - HTML Forms

Question 1

How Forms Work

Answer 1

1. A request is made from client
2. Requested HTML contains form elements
3. User fills in form and submits form
4. The user’s form data is sent to the server as part of the HTTP request
5. This request is usually for some type of server-side script that will process the form data

Question 2

Query Strings

Answer 2

• The browser “sends” the data to the server via an HTTP request using a query string.
• Aquery stringis a series ofname=valuepairs separated by ampersands (the & character).Special symbols must beURL encoded

Question 3

The <form> element

Answer 3

Two important attributes that are essential features of any <form> are theactionand themethodattributes.

• Theactionattribute specifies the URL of the server-side resource that will process the form data.
• Themethodattribute specifies how the query string data will be transmitted from the browser to the server. There are two possibilities:
  
  • GET
  • POST

Question 4

GET of a <form> element

Answer 4

• Data can be clearly seen in the address bar. This may be an advantage during development but a disadvantage in production.
• Data remains in browser history and cache. Again this may be beneficial to some users, but it is a security risk on public computers.
• Data can be bookmarked (also an advantage and a disadvantage).
• There is a limit on the number of characters in the returned form data.

Question 5

POST of a <form> element

Answer 5

• Data can contain binary data.
• Data is hidden from user.
• Submitted data is not stored in cache, history, or bookmarks.

Question 6

Text Input Controls

Answer 6

<input type="".../>
- text
- textarea
- password
- search
- email
- url
- tel

Question 7

Checkboxes

Answer 7

• Acheckboxis used for obtaining a yes/no or on/off response from the user.
• Checkboxes are added via the<input type="checkbox">
• Thecheckedattribute can be used to set the default value of a checkbox.
• Each checked checkbox will have its value sent to the server.

Question 8

Types of Input Validation

Answer 8

• Required information.Some data fields just cannot be left empty.
• Correct data type.Some fields such as numbers or dates, must follow the rules for its data type in order to be considered valid.
• Correct format.Some information, such as postal codes, credit card numbers, and social security numbers have to follow certain pattern rules.
• Comparison.Some user-entered fields are considered correct or not in relation to an already inputted value (password confirm)
• Range check.
• Custom.

Question 9

Notifying the User

Answer 9

• What is the problem?Users do not want to read lengthy messages to determine what needs to be changed.
• Where is the problem?Some type of error indication should be located near the field that generated the problem.
• If appropriate, how do I fix it?For instance, don’t just tell the user that a date is in the wrong format; tell him or her what format you are expecting

Question 10

How to Reduce Validation Errors

Answer 10

• Provide textual hints to the user on the form itself (last slide)
• Using tool tips or pop-overs to display context-sensitive help about the expected input
• Another technique for helping the user understand the correct format for an input field is to provide a JavaScript-based mask
• Providing sensible default values for text fields can reduce validation errors
• Finally, many user input errors can be eliminated by choosing a better data entry type than the standard <input type="text">

Question 11

Validation

Answer 11

Validation can be performed at three different levels.

• With HTML5, the browser can performbasic validation.
• JavaScript validationdramatically improves the user experience of data-entry forms, and is an essential feature of any real-world web site that uses forms. Unfortunately, JavaScript validation cannot be relied on.
• Server-side validationis arguably the most important since it is the only validation that is guaranteed to run.