Forms
E03b Form Fieldsets & Legends
- E03b
- (4:00)
- NOTE:
- At @3:15 of the video, the
<input>
tag with the name and id “landfav” is shown missing this attribute and value:type="text"
- I have not corrected the video but I have added the following to the code of this page
type="text"
in this context: <input type="text" name="landfav" id="landfav" size="20" maxlength="30" /
- Apologies for the error.
- At @3:15 of the video, the
- The fieldset and legend tags are used for organizing forms into discrete identified sections, without using a table.
- At times, it is useful to display groups of form objects within a border that contains a title for that mini-section.
- The section is called a fieldset.
- The section is intended to contain related form objects.
- A fieldset can be a better way to organize a form than using a table with multiple cells.
- Note that the table below uses a table, but one with only a single row and cell. In this example it is used only to control the form's width.
- A fieldset has a border to set it apart.
- The text used to identify the fieldset is called the legend.
- The legend is made part of the fieldset's top border.
- Summary of tags used:
- fieldset tag encompass the related form objects into a nice, tidy mini-section.
- legend contains the text that identifies the section, and appears in the top edge of the border.
- See example below:
- NOTE:
E03c - Assignment: (no video)
- Create a new html file.
- Save the file as:
yourlastname_E03c.html - Create a form tag.
- Action: mailto:dan@gottheknack.com&subject=coursenumber yourlastname - Forms E03c
- Replace coursenumber and yourlastname with the course number you have used in your email subject lines and use your last name.
- Give the form tag the name and id of location.
- Put inside the opening and closing form tags a single cell table with:
- width of 50%
- cellpadding of 20 pixels
- cellspacing of zero
- border of zero
- Note: Do not confuse the border of a table with the border created by a fieldset, they are two different things.
- In the one cell table create the following fieldsets and form objects in the following order. Make the fieldset names bold in your html file. The fieldset names below are in bold:
- Favorite country - Include in this fieldset a list of countries to chose from by using the code near the end of this html file for you list.
- Location of favorite country - Provide a list of continents - you will need to enter these menu items manually. Note that I'm leaving out Antarctica because it has no countries. The name & id are continent and the values are the characters in parentheses:
- Africa (afr)
- Asia (asi)
- Australia (aus)
- Europe (eur)
- North America (nam)
- South America (sam)
- Is it landlocked? - Provide two radio buttons. Use the name & id lock. Use the value that is shown in parentheses:
- Yes ( 1)
- No ( 0 )
- Oceans it touches (checkboxes). Name and id: ocean, values in parentheses:
- Arctic (arc)
- Atlantic (atl)
- Indian (ind)
- Pacific (pac)
- None (nil)
- Use break tags to provide spacing between rows as needed.
- Enclose each radio button or checkbox, with each one's text, inside <label> tags. Test to make sure the clicking on the label text will also select the checkbox or radio button.
- Add side-by-side standard submit and reset buttons, the same as the ones in the example on this page.
- Save your file and send it to me in a zip.