First draft of forms exercises

Author: NateWr

css/week3-forms.css

@@ -87,13 +87,23 @@ textarea:focus {
 	box-shadow: inset 2px 0 0 #4491db;
 }
 
+input[type="checkbox"],
+input[type="radio"] {
+	vertical-align: middle;
+}
+
 fieldset {
 	margin-left: 0;
 	margin-right: 0;
+	padding: 1em;
 	border: 1px solid rgba(0,0,0,0.5);
 	border-radius: 3px;
 }
 
+fieldset + fieldset {
+	margin-top: 2rem;
+}
+
 legend {
 	padding: 0 1em;
 }

images/19-shirts.jpg renamed to images/19/shirts.jpg

@@ -24,7 +24,7 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h2>
   				<tr>
   					<td>
               <div class="shopping-basket__product">
-    						<img src="/images/19-shirts.jpg" alt="CodeYourFuture t-shirts in black"/>
+    						<img src="/images/19/shirts.jpg" alt="CodeYourFuture t-shirts in black"/>
                 <p>CodeYourFuture t-shirt, black</p>
               </div>
   					</td>

images/19/solution.png

@@ -1,58 +1,16 @@
 # Checkout Form
 
-Notes:
-- combines 1/2 from carme's exercises.
-- write a bit of JS to check for correct labels
+This customer is ready to buy a CodeYourFuture t-shirt. We need ask them who they are and how we can contact them so that we can send them the t-shirt.
 
-## Exercise 1
+In this exercise you will add forms to collect checkout information. Follow the steps below to complete this exercise.
 
-We have seen how to create an `<input type="text">` field. Use what you have learned to start creating the **Check Out** for the CodeYourFuture shop.
+1. Open `index.html` and find the line that says `<!-- Add the form fields here -->`.
+2. Add an `<input>` field for the customer's name below this line. It should be a `text` field with a `name` attribute set to `customer-name`.
+3. Add an `<input>` field for the customer's email address. It should be an `email` field with a `name` attribute set to `customer-email`.
+4. Add an `<input>` field for the customer's phone number. It should be a `tel` field with a `name` attribute set to `customer-phone`.
+5. Did you remember to add a `<label>` for each one of your fields? If not, go back now and give each field a label, taking care to link each field to its label by using the `for` and `id` attributes.
+6. (Optional) Make the form easier to read by using `<p>` or `<div>` tags to add space between each field.
 
-Please notice that, because the data entered on this form is going to be used and stored by the server, we will need to use set the `method="POST"` instead of `GET`.
+When you're done, it should look like this.
 
-1. Open `index.html` and add a form tag where it says `<!-- Your new form goes here -->`.
-
-2. Add an input field to the form for the customer's first name. What type of input field will we need?
-
-3. Add a second field for the customer's surname.
-
-4. Add another field for the customer's email.
-
-5. Add an input field for the customer's contact telephone number.
-
-6. Finally, add the Submit button at the end of the form.
-
-
-## Exercise 2
-
-With the HTML tags we have seen so far, we can build a fully functioning form. We now need to make it user-friendly.
-
-For this, we will add a **label** for each field:
-
-`<label for="target-id">Some text here</label>`
-
-Labels are used to tell the user what data they are expected to enter in that field. The value of the `for` attribute is the `id` of the field to which the label makes reference. For example:
-
-```
-<form method="POST" action="/checkout">
-	<label for="first-name">First Name:</label>
-	<input type="text" name="first-name" id="first-name">
-	<input type="submit" value="Submit">
-</form>
-```
-
-The `label` in the example above is linked to the `input` field with id `first-name`.
-
-To the user it will look like this:
-
-![Form example](../../img/form-example-1.png)
-
-### Have a go!
-
-The form from exercise 1 works well but it is not user friendly. How does anyone know what they are supposed to enter in each field?
-
-1. Open exercise 2's `index.html` and add the form you created in [exercise 1](../1-input-fields/index.html) where it says `<!-- Your exercise 1 form goes here -->`.
-
-2. Add a label to all the input fields that need one.
-
-3. (Optional) Make the form easier to read by displaying each label+input pair in its own line. There are several ways of achieving this, how would you do it? Have a think before Google-ing it!
+![Screenshot of the checkout form solution](/images/19/solution.png)

images/20/solution.png

@@ -1,30 +1,13 @@
 # Blog Comments
 
-The `<textarea>` is used for bigger chunks of text that normally take up more than only line.
+The `<textarea>` is used for text that takes up more than one line. In this exercise, you'll add a form with a `<textarea>` for someone to leave their comment. Follow the steps below to complete this exercise.
 
-An example of this would be the Comments box:
+1. Find the line that says `<!-- Your comment form goes here -->` in this exercise's `index.html` file.
+2. Add a `<form>` with a `GET` method. _You do not need to add an `action` attribute to this form._
+3. Add a `<textarea>` field that is named `comment`.
+4. Don't forget to add a `<label>` so that users know what the field is for.
+5. Add a `<button>` that says "Send Comment".
 
-```
-<form action="/comments" method="POST">
-	<textarea name="comment" id="comment" cols="45" rows="8"></textarea>
-	<input type="submit" name="submit" value="Post Comment">
-	<input type="hidden" name="comment_article_ID" value="2741">
-</form>
-```
+When you're done, it should look like this.
 
-> Have a look at the example above. What do you think the **cols** and **rows** attributes are for?
-And what do you think the **hidden** input filed does?
-
-## Have a go!
-
-Shock, horror! The first article has been published in the CodeYourFuture blog, but we have no comments form!
-
-We'll need to have a break from the CodeYourFuture checkout to sort it out.
-
-1. Open exercise 3's `index.html` and add a `form` tag where it says `<!-- Your comment form goes here -->`.
-
-2. Add a `textarea`. Play around with the textarea columns and rows and see how it changes!
-
-3. Add a `label` so that users know what it is for.
-
-3. Add a Submit button.
+![Screenshot of the blog comment form solution](/images/20/solution.png)

images/21/solution-1.png

@@ -13,7 +13,7 @@
     <main>
       <h1>CodeYourFuture Summit</h1>
 
-      <p>Please let us know if you have any dietary requirements. Thanks!</p>
+      <p>Let us know if you have any dietary requirements so that we can provide you with the best, yummy food.</p>
 
       <form>
         <!-- Your multiple choice goes here -->

images/21/solution-2.png

@@ -1,3 +1,35 @@
 # Dietary Requirements
 
-Notes: use <fieldset> for checkboxes
+When using the `checkbox` or `radio` input types, you often need to group the options together. In this exercise, you will use a `<fieldset>` and `<legend>` to describe a group of options. Follow the steps below to complete this exercise.
+
+1. Add a `checkbox` input with a `<label>` for each of the following dietary requirements: Halal, Kosher, Vegetarian, Vegan, Gluten Free.
+2. Add a `<fieldset>` with a `<legend>` to describe all of the fields. The legend should say "Please select all of your dietary requirements".
+
+When you are done, it should look like the image below.
+
+![Screenshot of the dietary needs after the first steps](/images/21/solution-1.png)
+
+If you have used the `for` and `id` attributes properly, you should be able to click on the name of each dietary requirement to check that box.
+
+_Hint: If you click on one dietary requirement and it checks a different box, you may have used an `id` more than once. Each `id` on the page has to be unique._
+
+You may notice, however, that there is a small space between the checkbox and the label where you can click and the checkbox will not be changed. This can be frustrating for users. In this case, you can nest the checkbox _inside_ of your label.
+
+```
+<label>
+	<input type="checkbox" name="dietary">
+	Halal
+</label>
+```
+
+When `<input>` field is nested inside of a `<label>`, you don't have to use the `id` and `for` attributes. Follow the steps below.
+
+1. Change your code so that each `<input>` is nested inside of a `<label>`.
+
+When you're done, it should look exactly the same except that when you click on the gap between the checkbox and the text it still checks the box.
+
+## Extra Credit
+
+Can you make each item appear on it's own line like the image below?
+
+![Screenshot of the dietary needs with each item on its own line](/images/21/solution-2.png)

images/22/solution-1.png

@@ -6,6 +6,7 @@
   <title>22 - T-Shirt Size - HTML, CSS and Git Exercises</title>
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="/css/week3-forms.css">
+  <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
@@ -29,7 +30,15 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h2>
               </div>
   					</td>
   					<td>
-              Medium
+              <!-- Medium -->
+              <form>
+                <label class="screenreader">Choose a size</label>
+                <select>
+                  <option>Small</option>
+                  <option selected>Medium</option>
+                  <option>Large</option>
+                </select>
+              </form>
             </td>
   					<td>
               1

images/22/solution-2.png

@@ -1,21 +1,34 @@
 # T-Shirt Size
 
-Notes: change the instructions to reflect shirt sizes and replacing the size in the checkout
+The `<select>` field is used when you want the user to choose an option but you can not show all of the options at once. In this excercise, you will use the `<select>` field to let the user change the size of the t-shirt they want to order. Follow the steps below to complete this exercise.
 
-The `<select>` field is used for a dropdown list. Each of the items on the list is defined by an `<option>` field.
+1. Find the table cell where the t-shirt size is mentioned. _Hint: It is "Medium"._
+2. Replace the t-shirt size with a form that includes one `<select>` field with the following options: Small, Medium, Large.
+3. Use the `selected` attribute to make the Medium option selected by default.
 
-An example of this could be a choice of size for an online shop checkout:
+When you are done, it should look like the image below.
+
+![Screenshot of the size selection](/images/22/solution-1.png)
+
+It looks like you don't need the label "Choose a size". The table already tells us this column is for "Size". However, users who can not see use assistive technology to browse the web. This technology is often called a "screen reader". It reads what is on the screen for them. These tools do not work for forms unless _every_ field has a label.
+
+In this case, we need to keep the label in the HTML code, but we want to hide it to sighted users. The following CSS code can do that.
 
 ```
-<form action="/product" method="POST">
-	<select id="native_dropdown_selected_size" name="dropdown_selected_size">
-		<option value="-1">Please select your shoe size</option>
-		<option value="3">3</option>
-		<option value="4">4</option>
-		<option value="5" selected>5</option>
-		<option value="6">6</option>
-	</select>
-</form>
+.screenreader {
+	clip: rect(1px, 1px, 1px, 1px);
+	position: absolute !important;
+	left: -2000px;
+}
 ```
 
-> What do you think the **selected** attribute does?
+_Hint: You may have heard of `display: none`. This will also hide an element. However, using this property will hide it for screen readers too! We must use the CSS code above to hide something visually without hiding it from screen readers._
+
+Follow the steps below.
+
+1. Add the CSS code above to the `styles.css` file.
+2. Use the class name to hide the label without removing it from the HTML code.
+
+When you are done, it should look like the image below -- _but the `<label>` should still be in the HTML code._
+
+![Screenshot of the hidden label](/images/22/solution-2.png)

images/23/solution.png

@@ -0,0 +1,6 @@
+/* Add your CSS below */
+.screenreader {
+	clip: rect(1px, 1px, 1px, 1px);
+	position: absolute !important;
+	left: -2000px;
+}

images/24/solution-delivery.png

@@ -1,43 +1,16 @@
 # Checkout Groups - Fieldset
 
-Note: fieldset has been used in checkboxes, so update text to reflect it's already been mentioned, but this is a different usecase.
+In [exercise 21](/week-3/21-dietary), you used `<fieldset>` and `<legend>` to group checkboxes together. In this exercise, you will use these tags to describe a group of fields that are related to each other.
 
-The `<fieldset>` element is used to group together other form elements that are expected to be "related" to each other.
+To send the t-shirt to your customer you need to know where they want it to be delivered. This may be different from the address on the card they use to make payment. In this exercise, you will create two groups of fields: one for the billing address and one for the delivery address.
 
-A `<fieldset>` element is normally by a `<legend>` element that provides a brief description for the grouping.
+1. Find the line in the `index.html` page where it says `<!-- Add the form fields here -->`.
+2. Below this line, add a `<fieldset>` with a `<legend>` that says "Billing Address".
+3. Add text input fields nested inside of the `<fieldset>`. Add fields for the following: Address Line 1, Address Line 2, Postcode and City.
+4. Repeat steps 2 and 3 for a set of fields named "Delivery Address".
 
-An example of this would be, in an online shop checkout, separating the delivery address fields and cardholder address fields onto two different fieldsets.
+_Hint: Every field needs a unique `name` attribute. You can't have two fields named `postcode`, so you will need to name each set differently._
 
-```
-<form method="POST" action="/checkout">
-	<fieldset name="cardholder-address">
-		<legend>Cardholder address:</legend>
-		<label for="cardholder-address-1">Address line 1:</label>
-		<input type="text" id="cardholder-address-1" name="cardholder-address1" value required>
-		<label for="cardholder-address-2">Address line 2:</label>
-		<input type="text" id="cardholder-address-2" name="cardholder-address2" value>
-		<label for="cardholder-postcode">Postcode:</label>
-		<input type="text" id="cardholder-postcode" name="cardholder-postcode" value required>
-		<label for="cardholder-town">Town:</label>
-		<input type="text" id="cardholder-town" name="cardholder-town" value required>
-	</fieldset>
+When you are done, it should look like this.
 
-	<fieldset name="delivery-address">
-		<legend>Delivery address:</legend>
-		<label for="delivery-address-1">Address line 1:</label>
-		<input type="text" id="delivery-address-1" name="delivery-address1" value required>
-		<label for="delivery-address-2">Address line 2:</label>
-		<input type="text" id="delivery-address-2" name="delivery-address2" value>
-		<label for="delivery-postcode">Postcode:</label>
-		<input type="text" id="delivery-postcode" name="delivery-postcode" value required>
-		<label for="delivery-town">Town:</label>
-		<input type="text" id="delivery-town" name="delivery-town" value required>
-	</fieldset>
-
-	<input type="submit" value="Submit">
-</form>
-```
-
-The above example would look like this:
-
-![Fieldset example](../../img/fieldset-example.png)
+![Screenshot of the billing and delivery address fieldsets](/images/23/solution.png)

images/24/solution-required.gif

@@ -40,6 +40,55 @@ <h2 class="checkout__title">Checkout</h2>
         <form method="GET" id="checkout-form" class="checkout__form">
 
           <!-- Add the form fields here -->
+          <fieldset>
+            <legend>Billing Address</legend>
+            <p>
+              <label for="billing-address-1">Address Line 1</label>
+              <input type="text" name="billing-address-1" id="billing-address-1">
+            </p>
+            <p>
+              <label for="billing-address-2">Address Line 2</label>
+              <input type="text" name="billing-address-2" id="billing-address-2">
+            </p>
+            <p>
+              <label for="billing-postcode">Postcode</label>
+              <input type="text" name="billing-postcode" id="billing-postcode">
+            </p>
+            <p>
+              <label for="billing-city">City</label>
+              <input type="text" name="billing-city" id="billing-city">
+            </p>
+          </fieldset>
+          <fieldset>
+            <legend>Delivery Address</legend>
+            <p>
+              <label for="delivery-address-1">Address Line 1</label>
+              <input type="text" name="delivery-address-1" id="delivery-address-1">
+            </p>
+            <p>
+              <label for="delivery-address-2">Address Line 2</label>
+              <input type="text" name="delivery-address-2" id="delivery-address-2">
+            </p>
+            <p>
+              <label for="delivery-address-postcode">Postcode</label>
+              <input type="text" name="delivery-address-postcode" id="delivery-address-postcode">
+            </p>
+            <p>
+              <label for="delivery-address-city">City</label>
+              <input type="text" name="delivery-address-city" id="delivery-address-city">
+            </p>
+            <p>
+              <label for="delivery-country">Country</label>
+              <input type="text" name="delivery-country" id="delivery-country">
+            </p>
+            <fieldset>
+              <legend>Delivery Options</legend>
+              <label>
+                <input type="radio" name="delivery-option" id="delivery-option" value="standard">
+                Royal Mail
+              </label>
+            </fieldset>
+          </fieldset>
 
           <button type="submit">Complete Purchase</button>
         </form>