Can Link & Button be Same or Act Like Similar Elements? Anchor Link VS Button Tags in HTML
An anchor link does not always redirect to another page. A form does not always reload page. Also a button or anchor link can behave and look like same - if need be. This is a conceptual tutorial. In real web development you have to improvise sometimes. You can use link as a button or you can use button as a link. You can make a link click at a button or make a button click at a link. You can create link that acts like a button or button that acts like a link. You can use 'event preventdefault' to stop propagation of any event whether it's a link click event or button click event. 'event prevent default' will stop a link to go to another URL and it can also stop form submission and then you can define your own custom action at a link or button however you like.
We will create a simple anchor link that will trigger a form submit
Form submission will not reload page
We will get submitted value at the same page
Link click will get submitted data and form submission will also get the submitted data without reloading page
Styling is no issue. You can use same CSS styles for link and button so that they may look like same. We also need an element that will show form submission result for our tutorial.
In document ready, we will use two functions: One for link click and second for form submission.
If button will be clicked or form will be submitted, we will fire another function that will contain our main logic. Link can trigger click at any other element in DOM. So our link click will trigger click at form button.
So, a button or link can be same and you can make a button behave like a link or link like a button.
But, do it only if you have to.
✅ Hide CSS Code
• Hide & Protect CSS Code
✅ Smooth Scroll with CSS Only
• Smooth Scroll to DIV on Different Page usi...
✅ Lazy Load with Only CSS
• Lazy Load HTML Elements (Pure CSS) | Lazy ...
✅ CSS Only Custom Radio Buttons and Checkboxes
• CSS Only Radio Button, Checkbox & Form Sty...
✅ Extend Content Beyond Container | Full Width Content in Container | Break Out of Container
• Extend Content Beyond Container | Full Wid...
✅ Break Out of Container for Half Screen Width | CSS Tutorial
• Break Out of Container for Half Screen Wid...
✅ CSS Only Toggle Divs
• CSS Only Toggle Divs | Pure CSS Toggle Sho...
✅ CSS Only Accordion
• CSS Only Accordion Tutorial | Pure CSS Acc...
✅ ONE LINE CSS Code for Smooth Transition Effects in Whole Site | Easy & Smooth Transitions
• ONE LINE CSS Code for Smooth Transition Ef...
✅ CSS Only Two Liner Toggle
• CSS Only Two Liner Toggle Show Hide | Togg...
✅ More CSS Tutorials:
• CSS
✅ How To Hide / Protect JavaScript Code - Techniques and Tools
• How To Hide / Protect JavaScript Code | Ja...
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
• How to Prevent TypeError Cannot Read Prope...
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
• How to Find Sum of An Array of Numbers in ...
✅ Get URL Parameters in JavaScript | URLSearchParams
• Get URL Parameters in JavaScript | URLSear...
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
• DIV to PDF, Iframe to PDF using JavaScript...
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
• How To UnMinify JavaScript Minified Files ...
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
• Toggle Class in Vanilla JavaScript
✅ How to Execute a JavaScript File by using NPM
• How to Run a JavaScript File using NPM
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
• Get User Location (Country, State, City) w...
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
• Replace jQuery with Vanilla JavaScript Cod...
✅ Toggle in Vanilla JavaScript
• Toggle in Vanilla JavaScript | Pure JavaSc...
✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)
• MINIFY JAVASCRIPT FILES & FOLDERS in Multi...
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
• JavaScript vs jQuery | Difference between ...
✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples
• VAR vs LET vs CONST | JavaScript Variable ...
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: https://www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
Instagram: / webstylepress
LinkedIn: / webstylepress
GitHub: https://github.com/webstylepress
#webstylepress #jquery #webdevelopment #html #htmltutorial #js #javascript