Choosing Options

Question 1

select element

Answer 1

• 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

Question 2

option element

Answer 2

• represents one of the choices that a user can choose in a select menu
• it should always be nested inside of a select element.

Question 3

optgroup element

Answer 3

• 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

Question 4

• 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)

Answer 4

(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)

Question 5

radio element

Answer 5

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

Question 6

• 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”.

Answer 6

(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)

Question 7

checkbox element

Answer 7

• 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

Question 8

• 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”

Answer 8

(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)