Lesson 9: Completing, Submitting and Validating User Input Forms

Which HTML5 input type results in a field that is usually displayed as a text box with up-and-down arrows?

<input type="number">

Which HTML5 input type results in a field that is usually displayed as a slider?

<input type="range">

What type of data input would an HTML5 pattern attribute of "https?://.+" indicate?

A URL

To what does the term "pogo-sticking" refer when talking about Web forms?

A process that occurs when users must submit and resubmit a form until it validates

What type of data input would an HTML5 pattern attribute of "^.+@.+$" indicate?

An e-mail address

How is the HTML5 pattern attribute helpful in overcoming HTML5 browser support issues?

If a browser does not support the input type to which you assigned a pattern attribute, the resulting text may still be required to match the pattern.

Which statement is true regarding client-side vs. server-side user input validation?

Server-side validation is needed in case a browser does not support client-side validation.

What can be considered a disadvantage of waiting to validate user input in a form until the user completes the form and clicks the Submit button?

Some users may become frustrated if they need to submit and resubmit a form until it validates.

Which element creates a "Reset" button that changes all user input and settings in a form back to their original values?

The <button type="reset"> element

Which element creates a "Submit" button that submits all user input in a form to a server for processing?

The <button type="submit"> element

Which HTML5 <form> attribute assists with form completion and validation by reducing the amount of manual typing a user must do to complete a form?

The autocomplete attribute

Which HTML5 <input> attribute can you use to direct users to the first required field in a form when they load the form in their browsers?

The autofocus attribute

Consider the following JavaScript code: function validateForm() { var x = document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos < 1 || dotpos < atpos+2 || dotpos + 2 >= x.length) { alert("Please enter a valid e-mail address"); return false; } } The example code is the equivalent of which HTML5 attribute?

The pattern attribute

Which HTML5 attribute can you use with the <input> element to prevent typos and unexpected formatting by restricting user-entered data to a specific pattern?

The pattern attribute

Consider the following JavaScript code: function validateForm() { var x = document.forms["myForm"]["number"].value; if (!x) { alert("Please enter a phone number"); return false; } } The example code is the equivalent of which HTML5 attribute?

The required attribute

What can be considered a limitation of user input validation techniques?

They do not include checks for truthful information.

Why would you include the HTML formaction global attribute in the <button type="submit"> element?

To specify where to send user input when the form is submitted

Which statement is true about inline validation of data input by users in a Web form?

Users can resolve errors as they fill out each form field and submit the completed, validated form just once.

Which statement about form data submission attributes is true?

For HTML5-compliant browsers, data submission attributes of the <input> element will override data submission attributes in the <form> element.

Consider the following code: ... <form> <fieldset name="pattern_attribute"> <legend>The Pattern Attribute</legend><br> Date: <input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}"><br><br> <button type="submit" formaction="http://ss1.ciwcertified.com/cgi-bin/process.pl">Submit Form</button> </fieldset> </form> ... Which choice illustrates a valid entry for the Date field?

4/1/2015

You can use the <input type="submit"> element to create a standard "Submit" button. What distinguishes <button type="submit"> from <input type="submit">?

The <button> element allows text and images to be placed within its tags; the <input> element does not.

Consider the following code: Your Name: <input type="text" name="name" required> Which statement accurately describes this <input> field?

The <input> field must be completed before form submission.

What is the result of including the HTML5 required attribute in an <input> field?

The required attribute provides validation upon form submission.

User input validation in Web pages ensures that:

user-entered data is properly formatted and complete.

When would you include the novalidate attribute with the <form> element?

If you decide to bypass HTML5 form validation

What is the term for a type of user input validation in which the user input in each field of a form is validated as the user completes it, before the form is submitted?

Inline validation

Prior to HTML5, what did Web developers primarily use to provide inline validation for HTML forms?

JavaScript