Practice 10

note

You can see a completed example here:

And you can see a second completed example here:

Create an index.html file and CSS file that uses a mobile-first, responsive layout.
You could use a layout from a previous exercise as a starting point.
Create an HTML form within the main element of the page.
tip
See the bottom of this page for an example form.
Add the method attribute to the form element. Optionally, you can add a class for use as a selector in the CSS:
```
<form class="whatever" method="post">
```
note
You can omit the action attribute, since we have not learned the server-side programming skills required for this.
Or you could use a free form processing service. Services like this do not require any server-side programming knowledge.
Use the following elements:
- 3 input elements: text, radio, and checkbox
- textarea
- select list
- submit button
Use labels for each input, textarea, and select element. And you will need to associate each label with its corresponding element for accessibility purposes.
One option is to nest the element within its label element. I used this option for the radios and checkboxes in this Practice 10 example.
The other option is to use the for attribute. And in order to use the for attribute, you must add ID's to each element. I used for attributes for all of the labels in this second Practice 10 example.

For your sets of radios and checkboxes, use a fieldset and legend, such as:

<fieldset>

    <legend>Choose a color:</legend>

    <label for="red">Red</label>
    <input type="radio" id="red" name="color" value="red">
    
    <label for="blue">Blue</label>
    <input type="radio" id="blue" name="color" value="blue">

</fieldset>

Style your form with external CSS in some way. Feel free to have fun with this! It doesn't have to be perfect while learning :)
Make sure it passes HTML and CSS validation.
Push your changes to your Github repository.

note

You can see a completed example here:

And you can see a second completed example here:

Example Form

<form class="practice-form" method="post">

    <label for="name">Name</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email</label>
    <input type="text" id="email" name="email">
      
    <fieldset>
     
        <legend>profession</legend>
     
        <label>Librarian <input type="radio" name="profession" value="librarian"></label>   
    
        <label>Not Librarian <input type="radio" name="profession" value="not librarian"></label>
    
    </fieldset>
     
    <fieldset>
    
        <legend>pets</legend>
        
        <label>Dog <input type="checkbox" name="pets" value="dog"></label>
            
        <label>Cat <input type="checkbox" name="pets" value="cat"></label>
            
        <label>Toad <input type="checkbox" name="pets" value="toad"></label>
     
    </fieldset>
     
    <label for="newsletter">Subscribe to newsletter?</label>
    <select name="newsletter" id="newsletter">
        <option value="no">No</option>
        <option value="yes">Yes</option>
    </select>
        
    <label for="comments">Comments</label>
    <textarea name="comments" id="comments"></textarea>
    
    <input type="submit" value="submit form">
    
</form>

Example Form​

Example Form