C777 Unit 5: Forms

differently

Do HTML5 input types display the differently or the same in various browsers?

JavaScript

Prior to HTML5, what did Web developers use to conduct inline validation in HTML forms?

required EXAMPLE: <input type="text" required>

Which attribute requires input in the field before the form can be submitted?

name EXAMPLE: <input type="text" name="fname">

Which attribute specifies a name for the element that can be used to reference it?

enctype EXAMPLE: <form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">

Which attribute specifies how form input should be encoded when submitted to the server?

novalidate EXAMPLE: <form action="/action_page.php" novalidate>

Which attribute specifies that the form input should not be validated when submitted?

method EXAMPLE: <form action="/action_page.php" method="get" target="_blank">

Which attribute specifies the HTTP method to be used when submitting the form data?

for EXAMPLE: <label for="other">Other</label>

Which attribute specifies the IDs of elements whose values were used?

form EXAMPLE: <button type="submit" form="form1">Submit</button>

Which attribute specifies the form(s) on the page in which the element appears?

target EXAMPLE: <form action="/action_page.php" method="get" target="_blank">

Which attribute specifies where to display the response that is received after submitting the form?

autocomplete EXAMPLES: <form action="action_page.php" autocomplete="on"> <input type="email" autocomplete="off">

Which attribute specifies whether a form or an input field should allow the browser to predict the value?

wrap EXAMPLE: <textarea rows="2" cols="20" wrap="hard">At W3Schools you will find free Web-building tutorials.</textarea>

Which attribute specifies whether text submitted in a form field is to be wrapped?

min and max EXAMPLE: <input type="number" min="1" max="5">

Which attributes define the minimum or maximum value for an <input> element?

<keygen>

Which element adds security to a form through asymmetric encryption by creating a key-pair generator field in the form?

<legend>

Which element allows you to add a caption for a group of items created by the <fieldset> element?

<select>

Which element creates a rectangular field that can expand upon user interaction and allow users to select one or more pre-determined choices?

<output>

Which element displays the result when a calculation is performed?

<label>

Which element enables you to add a label to an input element in a form?

<fieldset>

Which element is used to group elements so that related fields are placed together in a form?

<datalist>

Which element specifies a list of pre-defined choices for an <input> element?

<input type="datetime">

Which input type allows the user to choose a date and time with a GMT time zone?

<input type="datetime-local">

Which input type allows the user to choose a date and time with a local time zone?

<input type="month">

Which input type allows the user to choose a date using the month and year (without time zone)?

<input type="week">

Which input type allows the user to choose a date using the week and year (without time zone)?

<input type="color">

Which input type allows the user to choose colors?

<input type="url">

Which input type allows the user to enter a URL, such as an http://, ftp:// or mailto: address?

<input type="date">

Which input type allows the user to enter a date (without time zone) using a drop-down date-picker calendar?

<input type="tel">

Which input type allows the user to enter a phone number?

<input type="time">

Which input type allows the user to enter a time (without time zone)?

<input type="email">

Which input type allows the user to enter an e-mail address?

<input type="range">

Which input type allows the user to enter numbers using a slider control?

<input type="number">

Which input type allows the user to enter rational integers or float values?

<input type="search">

Which input type allows the user to enter text for a search query?

<input type="text">

Which input type displays as rectangle field into which users can type alphanumeric characters of their choice?

<input type="radio">

Which input type displays as round buttons in a group of mutually exclusive pre-determined choices?

<input type="checkbox">

Which input type displays as square buttons in a group of pre-determined choices from which the user can select more than one choice?

<input type="url" pattern="https?://.+">

Which pattern ensures the user enters a URL beginning with https?

<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}">

Which pattern ensures the user enters a date formatted as 1/1/2021?

<input type="text" pattern="\d+(\.\d{2})?">

Which pattern ensures the user enters a price?

<input type="text" pattern="[A-Za-z]{3}">

Which pattern ensures the user enters a three digit country code?

<input type="email" pattern="^.+@.+$">

Which pattern ensures the user enters a valid email address?

<input type="text" pattern="-?\d{1,3}\.\d+">

Which pattern ensures the user enters latitude/longitude?

a script

Calculations in a Web page form are usually performed by what?

The pattern attribute

This JavaScript code is the equivalent of which HTML5 attribute? 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 required attribute

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

truthful information

What can validation techniques not check for?

inline validation

What do we call the process in which the user input in each field of a form is validated before the form is submitted?

user input validation

What do we call the process that tests data input to verify whether the input follows a specified format or meets minimum requirements for character number or type?

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

What is a disadvantage of waiting to validate user input until after the user completes the form?

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

What is the benefit of inline validation?

RSA

What is the default security algorithm used with the HTML5 <keygen> element?

The browser will degrade to a standard text box.

What occurs if an input type is not supported by a browser (example: search)?

pogo-sticking

What occurs when users must submit and resubmit a form until it validates?

A private key and a public key

What two keys are created by the HTML5 <keygen> element?

The browser will use the default type of text.

When you use the <input> element to create form fields, what occurs if you neglect to include the type attribute?

<button type="button">

Which HTML element creates a clickable button that does not directly affect form data and allows text and images to be placed within its tags?

<button type="reset">

Which HTML element resets the form data to its initial value?

<button type="submit">

Which HTML element submits a user's completed form data to the server for processing?

<form>

Which HTML tag is used to create an HTML form for user input?

multiple EXAMPLE: <input type="file" id="files" multiple>

Which attribute allows the user to enter more than one value in the <input> element?

autofocus EXAMPLE: <input type="text" autofocus>

Which attribute applies focus on the element when the page loads?

pattern EXAMPLE: <input type="text" pattern="[A-Za-z]{3}">

Which attribute checks input into the field against a regular expression, which is a pattern of characters for use in pattern-matching and search-and-replace functions?

action EXAMPLE: <form action="/action_page.php">

Which attribute defines the action to be performed when the form is submitted?

maxlength EXAMPLE: <input type="text" maxlength="4">

Which attribute defines the maximum length of input allowed in an <input> field?

disabled EXAMPLE: <input type="text" disabled>

Which attribute disables an element?

placeholder EXAMPLE: <input type="tel" placeholder="123-45-678">

Which attribute provides a hint to the user of the input value expected in the <input> field?

list EXAMPLE:<input list="browsers"> <datalist id="browsers"> </datalist>

Which attribute refers to pre-defined options contained in a datalist?