The <button> element defines a clickable button:

Click Me!

The <button> element defines a clickable button:

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

ਰੇਡੀਓ ਬਟਨ ਕੰਟਰੋਲ (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

A link can also be styled as a button, by using CSS:

Example

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

<button onclick="document.location='index.html'">Button Link</button>