However, as with all input elements, you need to define a name for it to be usable – without a name, the element won’t be identifiable when posting the form back to a server for processing. You also want to set a value – this will be the value sent to the server if the radio button has been selected. Here’s an example:
With that in mind, allow me to show you a much more complete example, where we have several radio buttons, which offers you to select your favorite pet:
If you check out the previous examples, you will notice that none of the radio buttons are checked by default. For checkboxes, this might make sense, but with radio buttons you usually want to force the user to select one of the options. This can of course be done with validation, but it’s a lot simpler to just pre-check one of the options. This is very simple – just use the checked property:
Either way should work in all modern browsers, but the first way is shorter and more “HTML5-like”.
The label is very simple – it uses the for attribute to attach itself to a form element with a matching id attribute (notice how I have “dogs” in both places).