Basic HTML

[ProjectX]

Adding a value to the button

If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

Add a value attribute to both radio buttons. For convenience, set the button's value attribute to the same value as its id attribute.

<label><input id="indoor" value="indoor" type="radio" name="indoor-outdoor"> Indoor</label>

<label><input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

[ProjectX]

fieldset element
fieldset element is used to group related inputs and labels together in a web form

The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.

Nest the Indoor and Outdoor radio buttons within a fieldset element, and don't forget to indent the radio buttons.

<fieldset><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset>

[ProjectX]

legend element
legend element acts as a caption for the content in the fieldset element

The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

Add a legend element with the text Is your cat an indoor or outdoor cat? above both of the radio buttons.

<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

[ProjectX]

Adding another legend element inside the fieldset element.

Add a legend element with the text What's your cat's personality? inside the second fieldset element.

<fieldset>
<legend>what's your cat's personality?</legend>
</fieldset>

[ProjectX]

Checkboxes for forms

Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of tacos: <input type="checkbox"> tacos.

Under the legend element you just added, add an input with its type attribute set to checkbox and give it the option of:

Loving

<legend>What's your cat's personality?</legend>
Loving:<input type="checkbox"> Loving

[ProjectX]

Add an id attribute with the value loving to the checkbox input.

<input type="checkbox"id= "loving"> Loving

[ProjectX]

associate an input element's text with the element itself

There's another way to associate an input element's text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element's id attribute.

Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.

<input id="loving" type="checkbox"> <label for="loving"> Loving</label>

[ProjectX]

name attribute with a value

Add the name attribute with the value personality to the checkbox input element.

While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes.

<input id="loving" name="personality" type="checkbox"> <label for="loving">Loving</label>

[ProjectX]

Add another checkbox

Add another checkbox after the one you just added. The id attribute value should be lazy and the name attribute value should be the same as the last checkbox.

Also add a label element to the right of the new checkbox with the text Lazy. Make sure to associate the label element with the new checkbox using the for attribute.

<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label> <input id="lazy" type="checkbox" name="personality"> <label for="lazy">lazy</label>

[ProjectX]

Adding a final checkbox value


Add a final checkbox after the previous one with an id attribute value of energetic. The name attribute should be the same as the previous checkbox.

Also add a label element to the right of the new checkbox with text Energetic. Make sure to associate the label element with the new checkbox.

<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality"> <label for="energetic">Energetic</label>