1. How to create a Radio button for a form in HTML 5 with CSS styling By Elke Dunn

2. Creating the form…. First thing we need to do is open either notepad or notepad ++. If you choose notepad ++ you need to set the language to HTML and save the document as a.html document. Now we need to define the document type. You do this at the top of the page by using

3. The next step... Now you need to set up the basics of your code. Every piece of code you open you need to close. Put the name of your website here Your heading here

4. Now to create the form The form is apart of the Under your heading you have put in your body you need to declare that it is a form. your heading here *form info here*

5. The radio button We will create a radio button group. With this you need to pick what your options are going to say. Below is the question and the options that we are going to code. Who is your favourite sports personal? -Ian Thorpe -Harry Kewell -Rodger Feddera -Lance Armstrong -Other

6. Radio button in HTML We need to create a and also a that contains our question for the form. Then we also need to put the radio button in the form by using the following code. Harry Kewell (continued on next page)

7. What it should look like in the form Who is your favourite sports personal? Harry Kewell Ian Thorpe Rodger Feddera Lance Armstrong Other

8. Controls You can add some controls into your form. So that if you select an option you can submit it or reset the form. The code below goes just before the bottom of the form. Form controls

9. Footer Now before we finish up the html code and move on to the CCS styling there is one more thing. You can have a footer. This goes just after the close of the form and before the closing of the body as shown below. Made by Elke Dunn Incorporated

10. Now your code should look like……

11. QUIZZZZZZZ! Sports Quiz Who is your favourite sports personal? Harry Kewell Ian Thorpe Rodger Feddera Lance Armstrong Other Form controls Made by Elke Dunn Incorporated

12. CSS Now you need to create another notepad document and save it as a.css document In our html document you know need to link the two notepad documents together. By adding in the following code under our QUIZZZZZ continued….

13. Style In our CSS document we are going to make our back ground of the form Black and the text White. We are also going to make our heading a separate colour. Our footer is going to be a White back ground with Black text. The following code will help you style this. Colour is spelt color because of its background.

14. CSS elements body { background:#000000; color:#FFFFFF; width: 300px; } h1 { color:#9999FF; }

15. CSS elements continued…. legend { color:#FFFFFF; } fieldset { color:#FFFFFF; }

16. Elements continued… #footer { background-color:#FFFFFF; color:#000000; }

17. Viewing in a web page To view your website you need to go to the file location and double click the html file. Once you have done this try and open it in a verity of different web browsers. Hopefully this starts to help you develop your website.

18. The End...