HTML <button> form Attribute

HTMLWeb DevelopmentFront End Technology

The form attribute of the <button> element is used to specify the forms wherein the button belongs to.

Following is the syntax −

<button form="id">

The id above is the if of the form wherein the button belongs to.

Let us now see an example to implement the form attribute of the <button> element−

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>Points</h2>
<form action="" method="get" id="form1">
   Player: <input type="text"><br>
   Rank: <input type="number"><br>
   Points: <input type="number"><br>
</form>
<button type="submit" form="form1" value="Submit">Click to Submit</button>
</body>
</html>

This will produce the following output. The button is part of the form−

In the above example, we have set a form and added form elements−

<form action="" method="get" id="form1">
   Player: <input type="text"><br>
   Rank: <input type="number"><br>
   Points: <input type="number"><br>
</form>

With that, we have set a button outside the form−

<button type="submit" form="form1" value="Submit">Click to Submit</button>

Since we have set the form id in the button, therefore it would still belong to the same form. This is possible using the <button> form attribute.

raja
Published on 19-Jun-2019 08:51:24
Advertisements