This is the 3rd part of HTML input series. In this tutorial you will learn about check box and radio button in HTML. If you didn’t read the previous tutorials then please go back to HTML Inputs Part One and HTML Inputs Part Two read them before moving to the next.
Why Radio Button ?
Suppose someone is signing up for your website and you want to ask the user’s gender. In this situation you will use the radio buttons to select male or female from the given options.
HTML Radio Button
An HTML radio button allows the user to select one choice from the given options. There are some attribute that you have to remember before working on radio buttons in HTML.
Syntax of HTML Radio Button
Name Attribute in Radio Button
Name attribute allow you to name your radio button. To allow users to choose only one option from the selected box you have to name both radio buttons with same text. Name should be meaningful for radio buttons. See Example below.
In above output user can only select one option from the given two options.
Value Attribute in Radio Button
Value attribute is used to get the value of the selected button. Suppose user selected “female” from the options so how we will know that the user selected male or female from the options ?. To get the value of the selected option to store in the database we use value attribute in every radio button in HTML. Value attribute will not affect the output in the browser.
Checked Attribute in Radio Button
Checked attribute allows you to set the default value in the given options. If you think that the most of the users coming to you website are male so you can make the male radio button checked by default so that users don’t even have to select the option. You can add only “checked” word in radio button tag but as every attribute has a value so writing checked=”true” make sense. Both do the same job.