Choosing Options Flashcards
select element
- 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
option element
- represents one of the choices that a user can choose in a select menu
- it should always be nested inside of a select element.
optgroup element
- 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
- 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)
(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)
radio element
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
- 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”.
(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)
checkbox element
- 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
- 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”
(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)