If we want to give the user a list of options where only one answer can be chosen then we use radio
buttons.
Let's use the example of a question again only this time only one answer can be chosen to create a radio
button.
We add an input element with the type of radio.
Let's add two more including some text next to them to describe each answer.
Now the end of each line.
I'm adding a B hour break element which just inserts and line break our carriage return.
Normally you do this in another way using styles which we'll see later on.
But for now I will use this to keep it simple
in the browser.
Radio buttons are normally rendered as circles that you can click on.
However unlike checkboxes you can't toggle them on and off by repeatedly clicking them.
If we click on some of the other answers they get checked to
to make radio buttons work as they should.
We need to give each input the same value for the name attributes like that.
Now in the browser we can select one but when we select another one it one checks the first one so we
can only select one answer for all the radio buttons with the same name.
We can only select one of them if we submit this.
We get the name of the control with the value of on but this doesn't tell us which one was checked when
the farm was submitted
to fix this.
We need to add a value to each radio inputs like that.
This value is what will be submitted if this input is selected.
When the farm is submitted.
So now if we select one of the radio buttons and submit the farm that's the value that we get on the
server.
Note that unlike a select element for example when the farm is first loaded no value is selected
to select one of the radio buttons we add the checked attribute like that.
So now when we first load the farm that radio button is our Will it be selected at the moment.
We have to click on the radio what in itself to select it we can't click on the text next to it will
look and how we can do that next.