Creating a radiobutton

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

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

<!DOCTYPE html>

The next step . . .
Now you need to set up the basics of your code.
Every piece of code you open you need to close.

<html>
<head>
<title>Put the name of your website here</title>
</head>
<body>
<h1>Your heading here</h1>
</body>
</html>

Now to create the form
The form is apart of the <body>
Under your heading you have put in your body you need to
declare that it is a form.

<body>
<h1>your heading here</h1>
<form>
*form info here*
</form>
</body>

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

Radio button in HTML
We need to create a <fieldset> and also a <legend> that
contains our question for the form.

Then we also need to put the radio button in the form by using
the following code.
<input type="radio" name="sports" value="Harry Kewell"
id="HarryKewell" />
<label for="Harry Kewell">Harry Kewell </label><br />

(continued on next page)

What it should look like in the form
<form>
<fieldset>
<legend>Who is your favourite sports personal?</legend>

<input type="radio" name="sports" value="Harry Kewell" id="HarryKewell" />
<input type="radio" name="sports" value="Ian Thorpe“ id=“IanThorpe” />
<label for="Ian Thorpe">Ian Thorpe </label><br />
<input type="radio" name="sports" value="Rodger Feddera" id=“RodgerFeddera” />
<label for="Rodger Feddera">Rodger Feddera </label><br />
<input type="radio" name="sports" value="Lance Armstrong“ id=“LanceArmstrong” />
<label for="Lance Armstrong">Lance Armstrong </label><br />
<input type="radio" name="sports" value="Other" id=“Other“ />
<label for="Other"> Other </label><br />
</fieldset>
</br>
</form>

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.

<p>Form controls</p>
<input type="reset" value="Reset"/>
<input type="submit" value="Submit"/> <br>
</form>

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.

<div id="footer">
<p> Made by Elke Dunn Incorporated
</p>
</div>
</body>
</html>

Now your code should look
like……

<!DOCTYPE html>
<html>

<head>
<title> QUIZZZZZZZ! </title>
</head>
<body>
<h1> Sports Quiz </h1>
<form>
<fieldset>
<legend>Who is your favourite sports personal?</legend>

<input type="radio" name="sports" value="Harry Kewell" id="HarryKewell" />
<input type="radio" name="sports" value="Ian Thorpe" id="IanThorpe" />
<label for="Ian Thorpe">Ian Thorpe </label><br />
<input type="radio" name="sports" value="Rodger Feddera" id="RodgerFeddera"/>
<label for="Rodger Feddera">Rodger Feddera </label><br />
<input type="radio" name="sports" value="Lance Armstrong" id="LanceArmstrong"/>
<label for="Lance Armstrong">Lance Armstrong </label><br />
<input type="radio" name="sports" value="Other" id="Other"/>
<label for="Other"> Other </label><br />
</fieldset>
<br />

<p>Form controls</p>
<input type="reset" value="Reset"/>
<input type="submit" value="Submit"/> <br>
</form>

<div id="footer">
<p> Made by Elke Dunn Incorporated
</p>
</div>

</body>

</html>

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
<title> QUIZZZZZ</title>

<link rel="stylesheet" type="text/css" href="css.css"
media="all"/>
continued….

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.

CSS elements

body
{
background:#000000;
color:#FFFFFF;
width: 300px;
}

h1
{
color:#9999FF;
}

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

fieldset
{
color:#FFFFFF;
}

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

}

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.

Creating a radiobutton

More Related Content

What's hot (19)

Viewers also liked (18)

Similar to Creating a radiobutton (20)

Recently uploaded (20)

Creating a radiobutton