EN
HTML - radio input
3
points
In this article, we would like to show you how to create and use radio input elementin HTML.
Quick solution:
// ONLINE-RUNNER:browser;
<input type="radio" name="field-name" value="some-value" />
Notes:
radioinputelements are assigned to groups bynameattribute,- one that group creates single field,
- only one radio button can be selected per field at the same time.
Practical examples
In this examples, we create radio input using the input element's type="radio" attribute, assigning elements for fields by name attributes.
1. Single field (one group)
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
Select color:
<label><input type="radio" name="color" value="red" checked /> Red</label>
<label><input type="radio" name="color" value="green" /> Green</label>
<label><input type="radio" name="color" value="blue" /> Blue</label>
</body>
</html>
2. Multiple fields (two groups)
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div>
Select color:
<label><input type="radio" name="color" value="red" checked /> Red</label>
<label><input type="radio" name="color" value="green" /> Green</label>
<label><input type="radio" name="color" value="blue" /> Blue</label>
</div>
<div>
Select animal:
<label><input type="radio" name="animal" value="cat" checked /> Cat</label>
<label><input type="radio" name="animal" value="dog" /> Dog</label>
<label><input type="radio" name="animal" value="bird" /> Bird</label>
</div>
</body>
</html>
Note: You can create more fields if needed, remembering to use different names.