Buttons in HTML5

How to create different types of Buttons in HTML5?

Buttons:

Buttons are called as actions of the element, It is used to click the button, it is defined by the tag <button>

 <p><h3> AM Button click me</h3></p>
    <button type="button">submit</button>

In the above code snippet we have created the button. We have <button> element to create the button .

output

Button disable:

We can disable the button using disable element

 <p><h3> AM Button click me</h3></p>
    <button type="button" disabled>Disabled Button</button>
    <button type="button">Active Button</button>

Disable button

In the above code snippet we have disabled button, In ordere to create the disable button we have to give the value as disable

output

Button with links

Buttons are used to provide the links , To provide the link we should this approach

 <h3> Button link with different types of buttons</h3>
    <a class="btn" href="http://www.dotnetfunda.com">dotnetfunda</a>
    <button class="btn" type="submit">Button</button>
    <input class="btn" type="button" value="Input">
    <input class="btn" type="submit" value="Submit">

Button links

In the above code snippet we have assigned the link to the button. We have taken <a> tag to provide link we have given link as www.dotnetfunda.com and in the next line we are createing the button element as

<button class="btn" type="submit">Button</button> - It provides the submit button with value as button

<input class="btn" type="button" value="Input"> - It provides the input button with value as input

<input class="btn" type="submit" value="Submit"> - It provides the input button with the value as submit

output

Radio button:

Radio button is used to select selected button among random buttons

<h3>Radio button</h3>
    <input type="radio" id="radio1" name="radio1" value="1"/>DotNetfunda
    <input  type="radio" id="radio2" name="radio1" value="2"/>TechFunda
    <input type="radio" id="radio3" name="radio1" value="3"/>ITFunda
    <input  type="radio" id="radio4" name="radio1" value="4"/>KidsFunda

Radio button

In the above code snippet we have defined the radio button

<input type="radio" id="radio1" name="radio1" value="1"/>DotNetfunda - Defines the radio button with value1 as and name as radio1 which defines to select the single button as dotnetfunda

<input type="radio" id="radio2" name="radio1" value="2"/>TechFunda - Defines the radio button with value2 as and name as radio1 which defines to select the single button as TechFunda

<input type="radio" id="radio3" name="radio1" value="3"/> ITFunda - Defines the radio button with value3 as and name as radio1 which defines to select the single button as ITFunda

<input type="radio" id="radio4" name="radio1" value="4"/>KidsFunda - Defines the radio button with value4 as and name as radio1 which defines to select the single button as KidsFunda

output

Image button:

Image button is used to add the image to the button

<h3>Image button</h3>
    <p>Image button is used to add the image to the button</p>
    Image button <input type="image" id="image1" name="image1" img src="Capture.JPG" />

Image button

In the above code snippet we are adding the image as button,

<input type="image" id="image1" name="image1" img src="Capture.JPG" /> - It defines input type as image and id as image 1 which defines the id and name as image1 defines the name of the image1 and we have to give the reference of the image in the <img src>.

output

Reset button:

Reset button is used to reset the button or restart the button

 <h3>Reset button</h3>
    <p>Reset button is used to reset or restart the button</p>
  <input  type="reset" id="reset1" name="reset1" value="Reset Button"/>

Reset button

In the above code snippet we have defined the reset the button. It is used to reset the button or it is used to restart the button

output