Sunday, 24 July 2016

HTML Button Element

Button Element
It is used to add button control on the form. Button can be used to perform various task such as submitting or resetting the details of the form elements.
Button control can placed in the form using the Input element, but you cannot change the appearance of the button in this case.
If button is created using button element than we can change the appearance of the button.
The text, images, multimedia embedded between the opening and closing tag of the button element become the content of the button element.
The button element provides type attribute that allows you to create three type of button

  • submit
  • reset
  • normal
submit is used for submitting the form, reset for erasing all the data from the form.
we can create submit button by setting type attribute submit, reset button by setting type attribute reset and normal button by setting type attribute button.

Attributes of Button Element
  • autofocus- allows the button control to get the focus as soon as the page loads.
  • disabled- disabled the button control.
  • form- refers to the id of the form.
  • formaction- refers to the value of the action attribute of the form,
  • formenctype- specifies the value that is used to encode the content while submitting the form to the server.
  • formmethod- specifies the methods of the HTTP at the time of submitting the button control. possible values are get, post, put and delete.
  • formnovalidate- specifies that the form is not to validate at the time of submitting of button control.
  • formtarget- specifies the destination,such as new tab or a new window, to load the browsing  context.
  • name- provides the name to the button control
  • type- specifies the type of button control. values are submit, reset, button.
  • value- provides a value to the button control. you can use this attribute is the form attribute is present.
example 1

<!Doctype Html>
<html>
<body>
<h1>Button element</h1>
<form>
Username : <input type="text" name="username" ><br />
Password : <input type="password" name="password"><br />
<button type="submit" style="color:blue; font-size:20px;">Submit </button>
<button type="reser" style="color:green; font-size:20px;">Reset </button>
<button type="button" style="color:yellow; font-size:20px;">Normal </button>
</form>
</body>
</html>
example 2
<!Doctype Html>
<html>
<body>
<h1>Button element</h1>
<form>
Username : <input type="text" name="username" ><br />
Password : <input type="password" name="password"><br />
<button type="submit"><img src="submit.jpg" width="70" height="50" /> </button>
<button type="reset"><img src="reset.jpg" width="70" height="50" /> </button>
</form>
</body>
</html>



0 comments:

Post a Comment