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:
xxxxxxxxxx1
<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.
In this examples, we create radio input using the input element's type="radio" attribute, assigning elements for fields by name attributes.
xxxxxxxxxx1
2
<html>3
<body>4
Select color:5
<label><input type="radio" name="color" value="red" checked /> Red</label>6
<label><input type="radio" name="color" value="green" /> Green</label>7
<label><input type="radio" name="color" value="blue" /> Blue</label>8
</body>9
</html>
2. Multiple fields (two groups)
xxxxxxxxxx1
2
<html>3
<body>4
<div>5
Select color:6
<label><input type="radio" name="color" value="red" checked /> Red</label>7
<label><input type="radio" name="color" value="green" /> Green</label>8
<label><input type="radio" name="color" value="blue" /> Blue</label>9
</div>10
<div>11
Select animal:12
<label><input type="radio" name="animal" value="cat" checked /> Cat</label>13
<label><input type="radio" name="animal" value="dog" /> Dog</label>14
<label><input type="radio" name="animal" value="bird" /> Bird</label>15
</div>16
</body>17
</html>Note: You can create more fields if needed, remembering to use different names.
