Choosing Options Flashcards

1
Q

select element

A
  • renders a drop-down menu that contains selectable options
  • this type of form control is ideal for scenarios where the user must choose one option from a preset list of 5 or more choices
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

option element

A
  • represents one of the choices that a user can choose in a select menu
  • it should always be nested inside of a select element.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

optgroup element

A
  • wraps one or more option elements and helps to create logical groups
  • the label attribute specifies the text that the optgroup should display above the nested options
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
  • Below the h1 heading element, create a select element with the ID of “color” and the name “shirt_color”.
  • Add the following options to the select menu: Red, Yellow, Purple, Blue, Green, and Orange. Set their value attributes to the same words, but in all lowercase.
  • Add a label element to the select menu with the text “Shirt Color:”
  • Add a submit button with the text “Place Order”.

(form action=”index.html” method=”post”)
(h1)Shirt Order Form(/h1)
(/form)

A

(form action=”index.html” method=”post”)
(h1)Shirt Order Form(/h1)
(label for=”color”)Shirt Color(/label)
(select id=”color” name=”shirt_color”)
(option value=”red”)Red(/option)
(option value=”yellow”)Yellow(/option)
(option value=”purple”)Purple(/option)
(option value=”blue”)Blue(/option)
(option value=”green”)Green(/option)
(option value=”orange”)Orange(/option)
(/select)
(button type=”submit”)Place Order(/button)
(/form)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

radio element

A

if the user only needs to choose from 5 or fewer options, then it’s better to use radio buttons instead of a select menu

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q
  • Create a radio button with the ID “small”, the value “small”, and the name “shirt_size”.
  • Add two more radio buttons for medium and large shirt sizes.
  • Add a label above the radio button group that says “Shirt Size:”. Don’t associate it with any specific element.
  • Create and associate a label with each of the 3 shirt size radio buttons. Give them the text “Small”, “Medium”, and “Large”.
A

(label)Shirt Size(/label)
(input type=”radio” id=”small” value=”small” name=”shirt_size” /)
(label for=”small”)Small(/label)
(input type=”radio” id=”medium” value=”medium” name=”shirt_size” /)
(label for=”medium”)Medium(/label)
(input type=”radio” id=”large” value=”large” name=”shirt_size” /)
(label for=”large”)Large(/label)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

checkbox element

A
  • sometimes there might be a group of predefined options where the user can select multiple items
  • that’s where checkboxes are a better choice than radio buttons or select menus
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q
  • Create a checkbox with the ID “shipping” and the value “fast_shipping”.
  • Create another checkbox with the ID “newsletter” and the value “subscribe”.
  • Add labels for the two checkboxes that say “Fast Shipping” and “Subscribe to Newsletter”
A

(input type=”checkbox” id=”shipping” value=”fast_shipping” /)
(label for=”shipping”)Fast Shipping(/label)
(input type=”checkbox” id=”newsletter” value=”subscribe” /)
(label for=”newsletter”)Subscribe to Newsletter(/label)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly