input radio

input radio

Setting the HTML input element's type attribute to "radio" will render a component that allows users of your web <form> to select one item from a list of radio buttons.

HTML CODE EXAMPLE

<h3>Which is your favorite food?</h3>
<input type="radio" name="fav_food" id="food1" value="Pizza">
<label for="food1">Pizza</label> <br />
<input type="radio" name="fav_food" id="food2" value="Cereal">
<label for="food2">Cereal</label> <br />
<input type="radio" name="fav_food" id="food3" value="Ramen Noodles">
<label for="food3">Ramen Noodles</label> <br />
<input type="radio" name="fav_food" id="food4" value="Hamburger">
<label for="food4">Hamburger</label>

 

Which is your favorite food?

 Pizza
 Cereal
 Ramen Noodles
 Hamburger

 click here to code.

Radio input programming tip: My code example above adds radio button grouping by setting each one in the group with the same exact "name" attribute value "fav_food". Without doing that you have just a bunch of independent radio buttons that are not grouped. The php parse file will access the "name" to scoop up the value of what the user chose.

Attributes for this 

element:

type - specify the type of input
Value: "checkbox"

name - specify the input's name that your form parsing script will access
Possible Values: "short descriptive name"

checked - specify that the input be checked by default
Possible Values: "checked"

value - specify the checkbox's value that your form parsing script will access
Possible Values: "a string"

disabled - specify that the input be disabled
Possible Values: "disabled"

global attributes - global core attributesSee: list of global attributes

New HTML5 attributes for this 

element:(applies 2014)

required - specify that the input is a required form field
Possible Values: "required"

form - set a relationship between the input and a form
Possible Values: "a form's id attribute value"

autofocus - specify that the input receive focus when page is loaded
Possible Values: "autofocus"

Event handlers for this 

element:

global event handlers - global event handler attributesSee: list of global event handlers

Tweet