HTML Form - input type="radio" - Learn coding, chatgpt Tutorials

When we have a set of options, but only one can be selected, we must use radio-type input element.

To define controls of type radio, we also use the input element by initializing the type property with the value radio

Let's see an example, suppose we need to indicate the type of studies we have using radio type input:

<!DOCTYPE html>
<html>
<head>
  <title>Form radio button - Robort Gabriel</title>
  <meta charset="UTF-8">
</head>
<body>
<form action="registion.php" method="post">
  Enter your name:
  <input type="text" name="name" size="30"><br>
  Select the highest level of education you have:
  <br>
  <input type="radio" name="studios" value="1">Sin
  studies<br>
  <input type="radio" name="studios" value="2">Primary<br>
  <input type="radio" name="studios" value="3">Secondary<br>
  <input type="radio" name="studios" value="4">University<br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The result in the browser is:

html radio button example

Let's see how the radio type form are defined:

<input type="radio" name="studios" value="1">Sin studios<br>
<input type="radio" name="studios" value="2">Primary<br>
<input type="radio" name="studios" value="3">Secondary<br>
<input type="radio" name="studios" value="4">University<br>

As we can see, they all have the same value in the name property, with this you can see that when we select one, the current one is deselected.

The value that is retrieved on the server is the data stored in the value attribute.

If we want to have several groups of radio type inputs, we must define the name property for each group with different names.

Robort Gabriel

Lagos, Nigeria

Skills