Organization

Question 1

label element

Answer 1

• helps to organize forms by assigning some helpful text to a form control
• this text helps the user to understand what kind of data they should add to each form field

Question 2

for attribute

Answer 2

tied with the label element, it associates with a particular form element by matching id attribute values

Question 3

• Create a label with a for attribute that matches the input element’s ID. Between the label tags, write the text “Name:”.
• Create a label for the email field with the text “Email:”.
• Create a label for the textarea element, and give it the text “Comment:”.

(form action=”index.html” method=”post”)
(input type=”text” id=”name” name=”user_name” /)
(input type=”email” id=”email” name=”user_email” /)
(textarea id=”comment” name=”user_comment”)(/textarea)
(button type=”submit”)Submit Comment(/button)
(/form)

Answer 3

(label for=”name”)Name:(/label)

(label for=”email”)Email:(/label)

(label for=”comment”)Comment:(/label)

Question 4

fieldset element

Answer 4

• wraps multiple form elements into common groups
• this can help organize a form and make it easier to understand for users

Question 6

legend element

Answer 6

• similar to the label element, but instead of labeling a form control, it labels a fieldset
• adding a legend to a fieldset can provide some helpful context for users that are filling out a form

Question 7

• Create a fieldset element that wraps the name and email fields.
• Add a legend element to the fieldset and give it the text “Tell us about yourself.”
• Create another fieldset element that wraps the comment field.
• Add another legend element to the fieldset and give it the text “What’s on your mind?”

​

(form action=”index.html” method=”post”)
(label for=”name”)Name:(/label)
(input type=”text” id=”name” name=”user_name” /)
(label for=”email”)Email:(/label)
(input type=”email” id=”email” name=”user_email” /)
(label for=”comment”)Comment:(/label)
(textarea id=”comment” name=”user_comment”)(/textarea)
(button type=”submit”)Submit Comment(/button)
(/form)

Answer 7

(form action=”index.html” method=”post”)

(fieldset)

(legend)Tell us about yourself(/legend)
(label for="name")Name:(/label)
(input type="text" id="name" name="user\_name" /)
(label for="email")Email:(/label)
(input type="email" id="email" name="user\_email" /)

(/fieldset)

(fieldset)

(legend)What's on your mind?(/legend)
(label for="comment")Comment:(/label)
(textarea id="comment" name="user\_comment")(/textarea)

(/fieldset)
(button type=”submit”)Submit Comment(/button)
(/form)