
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
HTML DOM Input Button form Property
The HTML DOM input button form property returns the reference of the form which enclose the input button.
Syntax
Following is the syntax −
object.form
Example
Let us see an example of input button form property −
<!DOCTYPE html> <html> <head> <title<HTML DOM form Property</title< <style> body{ text-align:center; } .btn{ display:block; margin:1rem auto; background-color:#db133a; color:#fff; border:1px solid #db133a; padding:0.5rem; border-radius:50px; width:20%; } .show-message{ font-weight:bold; font-size:1.4rem; color:#ffc107; } </style> </head> <body> <h1>form Property Example</h1> <form id="form1"> <fieldset> <legend>Form 1</legend> <input type="button" class="btn" value="button 1"> <input type="button" class="btn" value="button 2"> </fieldset> </form< <form id="form2"> <fieldset> <legend>Form 2</legend> <input type="button" class="btn" value="button 1"> <input type="button" class="btn" value="button 2"> </fieldset> </form> <div class="show-message"></div> <script> var btnArr= document.querySelectorAll(".btn"); var showMessage= document.querySelector(".show-message"); btnArr.forEach((ele)=>{ ele.addEventListener("click",(e)=>{ showMessage.innerHTML=""; if(e.target.form.id === 'form1'){ showMessage.innerHTML="I'm from form 1"; } else { showMessage.innerHTML="I'm from form 2"; } }) }); </script> </body> </html>
Output
This will produce the following output −
Click on “button 1/button 2” of form 1 −
Now, Click on “button 1/button 2” of form 2 −
- Related Articles
- HTML DOM Input Button type Property
- HTML DOM Input Button value Property
- HTML DOM Input Button name Property
- HTML DOM Input Button disabled Property
- HTML DOM Input URL form Property
- HTML DOM Input Week form Property
- HTML DOM Input Password form Property
- HTML DOM Input Search form Property
- HTML DOM Input Submit form property
- HTML DOM Input Text form Property
- HTML DOM Input Radio form Property
- HTML DOM Input Range form property
- HTML DOM Input Reset form property
- HTML DOM Input FileUpload form Property
- HTML DOM Input Hidden form Property

Advertisements