Video is not available... Embedded is previous playlist.
ਰੇਡੀਓ ਬਟਨ ਕੰਟਰੋਲ (Radio Button control):
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
ਰੇਡੀਓ ਬਟਨ control ਦੀ ਵਰਤੋ ਉਹਨਾ ਸਥਿਤੀਆ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿੱਥੇ ਅਸੀ ਯੂਜ਼ਰ ਦੁਆਰਾ ਇਨਪੁੱਟ ਕੀਤੇ ਗਏ ਮੁੱਲ ਨੂੰ ਇਕ ਬੂਲੀਅਨ ਮੁੱਲ ਵਜੋ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਜਾਂ ਅਸੀ ਕਈ ਆਪਸ਼ਨਾਂ ਵਿੱਚੋਂ ਸਿਰਫ ਇਕ ਇਨਪੁੱਟ ਦੀ ਹੀ ਉਮੀਦ ਕਰਦੇ ਹਾਂ। ਸਾਧਾਰਣ ਸ਼ਬਦਾਂ ਵਿਚ ਅਸੀ ਕਹਿ ਸਕਦੇ ਹਾਂ ਕਿ ਰੇਡੀਓ ਬਟਨਾਂ ਦੀ ਵਰਤੋ ਆਪਸ਼ਨਾ ਦੇ ਦਿੱਤੇ ਸਮੂਹ ਵਿਚੋ ਕਿਸੇ ਇੱਕ ਆਪਸ਼ਨ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਰੇਡੀਓ ਬਟਨਾ ਦੀ ਵਰਤੋ ਆਮ ਤੌਰ ਤੇ ਲਿੰਗ (Gender) ਸੰਬੰਧੀ ਆਪਸ਼ਨਾ (Male/Female), ਕਰਮਚਾਰੀ ਦੀ ਕਿਸਮ (ਨਿਯਮਤ ਜਾਂ ਅਸਥਾਈ) ਆਦਿ ਦੀ ਸਿਲੈਕਸ਼ਨ ਕਰਵਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਬਣਾਉਣ ਲਈ ਅਸੀਂ type="radio" ਐਟਰੀਬਿਊਟ ਦੇ ਨਾਲ <input> ਟੈਗ ਦੀ ਵਰਤੋ ਕਰਦੇ ਹਾਂ। ਰੇਡੀਓ ਬਟਨ CONTROL ਦੀ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣ ਇਸ ਪ੍ਰਕਾਰ ਹੈ:
Select Gender:<br>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="female">female
ਇਹ ਕੋਡ ਯੂਜ਼ਰ ਤੋ Gender ਦੇ ਮੁੱਲ ਦੀ ਸਿਲੈਕਸ਼ਨ ਕਰਵਾਉਣ ਲਈ ਦੋ ਰੇਡੀਓ ਬਟਨ ਬਣਾ ਰਿਹਾ ਹੈ। ਯੂਜ਼ਰ ਦਿੱਤੀਆ ਗਈਆ ਆਪਸ਼ਨਾ ਵਿੱਚੋ ਸਿਰਫ ਇਕ ਆਪਸ਼ਨ ਦੀ ਹੀ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ । ਸਰਵਰ ਸਾਈਡ ਸਕਿਰਪਟਿੰਗ ਜਿਵੇ ਕਿ JSP, ASP, PHP ਆਦਿ ਲਈ ਇਸ ਕੰਟਰੋਲ ਦੇ name ਐਟਰੀਬਿਊਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਤਾਂ ਜੋ ਸਿਲੈਕਟ ਕੀਤੇ ਗਏ ਰੇਡੀਓ ਬਟਨ ਦਾ ਮੁੱਲ ( valueਐਟਰੀਬਿਊਟ ਵਿਚ ਲਿਖ ਗਏ)
ਰੇਡੀਓ ਬਟਨਾ ਦਾ ਇਕ ਗਰੁੱਪ ਬਣਾਉਣ ਲਈ ਸਾਰੇ ਰੇਡੀਓ ਬਟਨਾ ਦਾ ਇਕ ਹੀ ਨਾਮ ਰੱਖਿਆ ਗਿਆ ਹੈ।
D:/main/front.html
radio button example
select gender
○ Male
○ Female
ਯੂਜ਼ਰ ਦੁਆਰਾ ਸਿਲੈਕਸ਼ਨ ਕੀਤੇ ਜਾਣ ਤੋ ਬਾਅਦ
D./main/front.html
radio button example
select gender
○Male
○Female
Radio Butto
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your Class:</p>
<form method="post" action="/php/radiobutton.php">
<input type="radio" id="10" name="class" value="10th">
<label for="html">10th Class</label><br>
<input type="radio" id="11" name="class" value="11th">
<label for="css">11th Class</label><br>
<input type="radio" id="12" name="class" value="12th">
<label for="javascript">12th Class</label>
<BR><BR>
<input type="submit" value="Submit">
</form>
</body>
</html>
This is how the HTML code above will be displayed in a browser:
Choose your Class:
