Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

Tutorial 07: Designing a Web Form

memorize.ai (lvl 286)

(0)

91 cards

()

Section 1

Preview this deck

The most common way of accepting user input is through a web form.

Front

1 / 91

Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (91)

Section 1

(50 cards)

The most common way of accepting user input is through a web form.

Front

True

Back

Identify a true statement of a JavaScript program in a web form. a. JavaScript intercepts the content of the form before the browser attempts to contact the CGI script and report whether the data contained in the survey form has been correctly filled out or not. b. JavaScript is a closed-source programming language, which provides tools and a programming environment for communicating the strategy and overall administration of distributed applications. c. JavaScript is extracted by all layout engines in a similar way; as a consequence, this grounds consistency in terms of functionality and interface. d. JavaScript is a bug-free Visual Basic scripting language, which is used only for networking applications.

Front

a

Back

Which of the following is true of nesting a control within a label?

Front

It allows the user to move both the label text and the control as a single unit around the page.

Back

Identify a syntax of the option element that contains an attribute to make an option as default in a selection list. a. <option value="value" for>text</option> b. <option value="value" enctype>text</option> c. <option value="value" selected>text</option> d. <option value="value" default>text</option>

Front

c

Back

In the accompanying figure, what does Box A represent?

Front

Input box

Back

_____ are like selection lists in which they limit fields to a set of possible values; but, unlike selection lists, the options appear as separate controls in the web form.

Front

Radio buttons

Back

Identify the cross-browser style sheet that changes the text color of the placeholder text for every input box to light red for the moz extension. a. input:-moz-input-placeholder {color: rgb (255, 151, 151);} b. input::-moz-placeholder {color: rgb(255, 151, 151);} c. input:-moz-placeholder {color: rgb (255, 151, 151);} d. input:: moz-placeholder-webkit {color: rgb(255, 151, 151);}

Front

b

Back

In a form element, attributes specify how the form should be processed by the browser.

Front

True

Back

Option buttons are also called selection lists as they select data values from a more extensive list of options.

Front

False - radio buttons

Back

For url type data, the virtual keyboard includes a key that inserts the .com character string.

Front

False

Back

Identify a syntax that sets the data type of the registerDate field to "date". a. <label for="register">Date of registration</label> <input name="Date" id="register" /> b. <label for="register">Date of registration</label> <input name="registerDate" id="date" /> c. <label for="register">Date of registration</label> <input name="registerDate" id="register" type="date" /> d. <label for="register">Date of registration</label> <input name="registerDate" id="date" type="register" />

Front

c

Back

HTML supports the _____ attributes to set the text area size.

Front

rows and cols

Back

Identify a widget that allows the user to interact with the form for entering numeric values confined to a specified range.

Front

Slider control

Back

The id attribute is required only when it is needed to reference the control element.

Front

True

Back

There is no need to include a for attribute within a label element while nesting a control, if the association is made implicitly.

Front

True

Back

A _____ is used to restrict numeric values by displaying an up or down arrow to increase or decrease the field value by a set amount.

Front

spinner control

Back

A spinner control can be used to limit a numeric field to a range of possible values, thus allowing the user to drag a marker horizontally across the possible field values.

Front

False - slider control

Back

A form contains _____, also called widgets, which are the objects that allow the user to interact with the form.

Front

controls

Back

Identify the significance of "text" in <form id="text">.

Front

It identifies the form.

Back

The _____ element is used to mark the form controls that are designed to receive user responses.

Front

input

Back

Identify a syntax used to create a spinner control using an input element. a. <input name="name" id="id" type="number" value="value" step="value" min="value" max="value" /> b. <input name="name" id="id" type="number" value="value" set="value" min="value" max="value" /> c. <input name="name" id="id" type="number" value="value" size="value" min="value" max="value" /> d. <input name="name" id="id" type="number" value="value" area="value" min="value" max="value" />

Front

a

Back

To associate a text string entered above each input element with a control, the text string should be enclosed within the _____ element.

Front

label

Back

A form element must be placed only within the header tag of a web page.

Front

False

Back

A default value need not be specified; the text area box can be left empty or the placeholder attribute can be used to provide a hint to users about what to enter into the text box.

Front

True

Back

The post method is the default method that tells the browser to append the form data to the end of the URL specified in the action attribute.

Front

False - get method

Back

In the accompanying figure, Box B points to _____.

Front

option buttons

Back

Identify a syntax that displays a selection list as a scroll box with 5 options visible in the web form. a. <select size="5"> ... </select> b. <option size="5"> ... </option> c. <select value="5"> ... </select> d. <option value="5"> ... </option>

Front

a

Back

Client-side validation takes place on the user's browser.

Front

True

Back

A data entry control is associated with a _____ in which data values supplied by the user are stored.

Front

data field

Back

A(n) _____ is created using the select and option elements that present users with a group of predefined possible values for the data field.

Front

selection list

Back

The appearance of a command, submit, and reset button is determined by the browser.

Front

True

Back

By default, legends are placed in the top-right corner of the field set box.

Front

False

Back

The second option in a selection list is selected by default and therefore contains the field's default value.

Front

False

Back

In the accompanying figure, Box E represents a _____.

Front

spin box

Back

The check box control is created using the _____ element.

Front

input

Back

By default, browsers display input boxes as _____ elements with a default length of 20 characters.

Front

inline

Back

When for attribute is used, the label text can be placed anywhere within the page and it will still be associated with the control.

Front

True

Back

Every field set must contain the _____ element, which should have only text and no nested elements for describing its content.

Front

legend

Back

Command buttons are created using an input element with the type attribute set to range.

Front

False - button

Back

_____ are text strings that appear within a form control, providing a hint about the kind of data that should be entered into the field.

Front

Placeholders

Back

Which of the following is true of field sets?

Front

Field sets act like block elements that can expand to accommodate their content.

Back

There are predefined CSS styles to format the appearance of a placeholder.

Front

False

Back

If no _____ value is specified, the browser assumes a default value of text and adds a simple text input box to the web form.

Front

type

Back

Identify the element that can organize selection list options by placing them in option groups in long selection lists.

Front

optgroup

Back

Identify the widget that limits a numeric field to a range of possible values by allowing users to drag a marker horizontally across the possible field values.

Front

Slider control

Back

A _____ is a control used to enter text strings that may include several lines of content.

Front

Text area box

Back

Once the field values have been entered by the user, they are processed by a program running on the user's computer or on a web server in a secure location.

Front

True

Back

The placeholder automatically disappears as soon as a user selects the control and begins to enter a value.

Front

True

Back

get and post are two possible values for the _____ attribute.

Front

method

Back

The default behavior of the selection list is to allow only one selection from the list of options.

Front

True

Back

Section 2

(41 cards)

By default, a _________ appears as a drop-down list box.

Front

selection list

Back

Used to create an email field that is part of the form but not displayed

Front

hidden

Back

Processes the form when clicked

Front

Form buttons

Back

Identify the type of control that performs an action.

Front

A form button

Back

_________ refers to the state in which an element has been clicked by the user, making it the active control on the form.

Front

Focus

Back

Identify a pseudo-class for a check box or option button whose toggle states cannot be ascertained.

Front

indeterminate

Back

Command buttons are created using the input element with the type attribute set to _____.

Front

button

Back

The process of ensuring that the user has supplied correct data is called _____.

Front

validation

Back

A check box can be selected automatically by adding the _________ attribute to the input element.

Front

checked

Back

The _________ attribute is added to the input element to apply a data list.

Front

list, <input list="id"/>

Back

A _________ is a button that runs a program, which affects the content of the page or the actions of the browser.

Front

command button

Back

Identify a data type applied in an input element to create slider controls.

Front

range

Back

Describe the types of layouts that are used to design a form.

Front

To be effective, the layout of the form should aid the user in interpreting the form and navigating easily from one input control to the next. There are two general layouts, one in which the labels are placed directly above the input controls in a single column and the other in which the labels and controls are placed side by side in two columns. Usability studies have shown that a single column layout is more accessible because the labels are placed more closely to their input controls. However, for long forms involving many fields, a single column layout can be difficult to work with due to the extensive vertical space required. The width of an input box is set by adding the following size attribute to the input element in the HTML file as given below: size="chars" Here, chars is the width of the input box in characters. For example, the following input element sets the width of the input box for a field to two characters: <input id="state" size="2" type="text" />

Back

The technique of immediate data validation and reporting of errors is known as _____.

Front

inline validation

Back

Which of the following can Oscar use to display a list of makes and models of skateboards? a. Text area boxes b. Radio buttons c. Selection lists d. Slider controls

Front

c

Back

The format in which data is transferred as plain text with spaces replaced with the + character, but no other encoding of the data values occurs

Front

text/plain

Back

Used for selecting data values limited to two possibilities, such as "yes" or "no"

Front

Check boxes

Back

Specifies how the form data should be encoded as it is sent to the server

Front

enctype

Back

Used for a long sequence of options

Front

Selection lists

Back

Oscar wants the web form to allow users to select the delivery date for the items he purchases. To select the dates, Oscar should use a _____.

Front

check box

Back

Grouping dozens of different fields into a _________ that a web form can have, makes the form easier to interpret and more accessible.

Front

field set

Back

Identify a list which when applied to an input box, the values appear as a pop-up list of suggested values.

Front

Data list

Back

The default format in which the data is encoded as a long text string with spaces replaced by the + character and special characters replaced with their hexadecimal code values

Front

application/x-www-form-urlencoded

Back

Created with a group of input elements with a type attribute value of radio, sharing a common data field name

Front

Option buttons

Back

The _____ attribute must be added to the control to identify whether the data has been supplied to those fields that are opposed to the ones that are optional.

Front

required

Back

The process of validation that takes place on the web user is called _________.

Front

server-side validation

Back

Identify an attribute that can be added to the input element to validate a text value against a regular expression. a. legend="text" b. method="text" c. enctype="regex" d. pattern="regex"

Front

d

Back

The ____ element is used to create a custom option.

Front

button

Back

What are the attributes that tell the browser how the form should interact with the web server?

Front

To specify where to send the form data and how to send it, the following action, method, and enctype attributes are defined. <form action="url" method="type" enctype="type">content </form> Here, the action attribute provides the location of the web server program that processes the form; the method attribute specifies how the browser should send form data to the server; and the enctype attribute specifies how the form data should be encoded as it is sent to the server. The method attribute has two possible values: get and post. The default is the get method, which tells the browser to append the form data to the end of the URL specified in the action attribute. The post method sends the form data in its own separate data stream. The enctype attribute has three possible values in predefined formats for a specific purpose

Back

Wyona wants to ensure that the text box should accept only 5 characters for entering a zip code. Which attribute of a text box will allow her to do this? a. maxlength b. size c. codevalue d. character

Front

a

Back

The format used when uploading files in which no encoding of the data values occurs

Front

multipart/form-data

Back

Used for text and numerical entries

Front

Input boxes

Back

Used to group items on a drop-down list

Front

Option groups

Back

The _________ element is an HTML element used to access and run JavaScript programs that will run within the user's browser.

Front

script

Back

The _________ attribute is always needed in an input element while submitting the form to a server.

Front

name

Back

Which type of field should Wyona provide for the user to provide plenty of space for customers to enter the information for a custom pattern? a. Input boxes b. Check boxes c. Spin boxes d. Text area boxes

Front

d

Back

What are the pseudo-classes for valid and invalid data?

Front

The valid and invalid pseudo-classes are used to format controls based on whether their field values pass a validation test or not. For example, the following style rule displays all the input elements containing invalid data with a light red background: In put: invalid { background-color: rgb (255, 232, 233); } On the other hand, the following style rule displays all the input elements containing valid data with a light green background: input: valid { background-color: rgb (220, 255, 220); } Both of these style rules set the background color whether the input element has the focus or not. Displaying a form full of input backgrounds with different background colors can be confusing and distracting to the user. As a result, it is better practice to highlight invalid field values only when those input controls have the focus, as shown in the following style rule that combines both the focus and invalid pseudo-classes: input:focus:invalid { background-color: rgb (255, 232, 233); }

Back

_________ are text strings that appear within a form control, providing a hint about the kind of data that should be entered into the field.

Front

Placeholders

Back

Used to append the form data to the end of the URL

Front

get

Back

Most mobile and tablet devices do not have physical keyboards; instead, they use _________ that exist as software representations of the physical device.

Front

virtual keyboards

Back

Oscar's skateboards are manufactured in different hues. Which of the following features should Oscar add to allow customers to choose a shade of their choice?

Front

Color pickers

Back