BUTTON tag usage in html
The <button> tag defines a clickable button. You can put text or image inside the button. We often use buttons on web pages. Buttons are among the sine qua non of “Call to Action” structures. We create buttons with < button > structures.
Simple structure;
<button> .. </button>
Some new attributes (autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget) have been added with HTML5.
Images or texts can be added inside the <button> tag, this feature is the most important difference from the buttons created with the <input> tag. Always define the type property of the <button> tag. Different browsers may assign another value by default.
Use of with TYPE;
<button type="button">Normal button example</button>
<button type="submit">Example of button submitting the form</button>
<button type="reset">Example of button resetting the values of the form</button>
Use with the form; By using the form attribute, we can send the form even if the button tag is not in the form.
<button type="submit" form="form1">Submit form1</button>
<button type="submit" form="form2">Submit form2</button>
<form action="" id="form1">
<input type="text" name="value">
</form>
<form action="" method="get" id="form2">
<input type="text" name="value">
</form>
Linking Buttons in HTML
The purpose of the buttons is to perform an action when clicked. The most common of these operations is redirecting to another url. For this purpose, we can use buttons inside < a href="” > structures.
Sample:
<a href="codingsource.net" >
<button style="background-color:tomato;color:white;width:100%;">Home <button>
</a>
BUTTON Element
autofocus
autofocus
It automatically focuses the button when the page loads.
disabled
disabled
Overrides the function of the button.
form
form_id
Indicates the form to which it is attached. The button tag can be used to submit the corresponding form, even outside the form.
formaction
URL
Specifies where to send the form's information.
formenctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
It determines which method to send the form information to the server.
formmethod
GET
POST
It determines the method by which form information will be sent.
formnovalidate
formnovalidate
Specifies that form tags are submitted without validation.
formtarget
_blank
_self
_parent
_ball
framename
Determines how the form will open when submitted. eg. _blank is used to open in a new page.
name
name
It determines under which name the value will be sent when the form is submitted.
type
button
reset
submit
Specifies the type of button.