{"id":402,"date":"2022-10-04T22:29:12","date_gmt":"2022-10-04T16:59:12","guid":{"rendered":"https:\/\/jassweb.com\/new22\/solved-why-boostrap-put-typebutton-in-button-tag\/"},"modified":"2022-10-04T22:29:12","modified_gmt":"2022-10-04T16:59:12","slug":"solved-why-boostrap-put-typebutton-in-button-tag-2","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/","title":{"rendered":"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag"},"content":{"rendered":"<h2> Introduction <\/h2>\n<p>[ad_1]<\/p>\n<p>The Bootstrap framework is a popular front-end development tool used to create responsive websites and web applications. One of the most common elements used in Bootstrap is the button tag. The button tag is used to create clickable buttons that can be used to trigger actions or navigate to other pages. One of the attributes that Bootstrap adds to the button tag is the type attribute, which is set to &#8220;button&#8221;. This article will discuss why Bootstrap puts type=&#8221;button&#8221; in the button tag.<\/p>\n<h2> Solution<\/h2>\n<p><\/p>\n<p>Bootstrap adds the type=&#8221;button&#8221; attribute to the button tag for two reasons:<\/p>\n<p>1. To ensure that the button is not treated as a submit button by default. This is important for accessibility, as it ensures that users who rely on assistive technologies can interact with the button without unintentionally submitting a form.<\/p>\n<p>2. To ensure that the button is styled correctly by the Bootstrap CSS. Without the type=&#8221;button&#8221; attribute, the button may not be styled correctly. <\/p>\n<p><\/p>\n<div class=\"entry-content\" itemprop=\"text\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1088640234840270\" crossorigin=\"anonymous\"><\/script><\/p>\n<p><script><\/p>\n<p><\/script><\/p>\n<p>\n<\/p>\n<div id=\"answer-44040347\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"44040347\" data-parentid=\"44040203\" data-score=\"-1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>This is used to specify the default action of the button. The button type states that \u201cit has no default behavior. It can have client-side scripts associated with the element\u2019s events, which are triggered when the events occur.\u201d Normally, this is how a button would act by itself. However, a button is normally found within a form, where when clicked it automatically submits the form. By specifying type=button, it overrides this default behavior, so it would not submit. See here: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/button\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/button<\/a><\/p>\n<\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p> <span class=\"d-none\" itemprop=\"commentCount\"><\/span> <\/p>\n<\/div>\n<\/div>\n<p>solved Why boostrap put type=\u201dbutton\u201d in button tag <\/p>\n<p><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1088640234840270\" crossorigin=\"anonymous\"><\/script><\/p>\n<p><script><\/p>\n<p><\/script> <\/div>\n<p>[ad_2]<\/p>\n<p>The <code>&lt;button&gt;<\/code> tag is an HTML element used to create a clickable button. It is often used in forms, where it can be used to submit or reset form data. By default, the <code>&lt;button&gt;<\/code> tag does not have a type attribute, but the Bootstrap framework adds the type=&#8221;button&#8221; attribute to the <code>&lt;button&gt;<\/code> tag for styling purposes.<\/p>\n<p>The type=&#8221;button&#8221; attribute is used to indicate that the button is not a submit or reset button. This is important because it allows the button to be styled differently than the other form elements. For example, the Bootstrap framework uses the type=&#8221;button&#8221; attribute to style the button with a different background color and font size than the other form elements.<\/p>\n<p>The type=&#8221;button&#8221; attribute also helps to prevent accidental form submission. If a user accidentally clicks the button, the form will not be submitted because the type=&#8221;button&#8221; attribute indicates that the button is not a submit or reset button.<\/p>\n<p>In summary, the type=&#8221;button&#8221; attribute is used by the Bootstrap framework to style the <code>&lt;button&gt;<\/code> tag differently than the other form elements and to prevent accidental form submission. It is an important attribute to include when using the Bootstrap framework.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction [ad_1] The Bootstrap framework is a popular front-end development tool used to create responsive websites and web applications. One of the most common elements used in Bootstrap is the button tag. The button tag is used to create clickable buttons that can be used to trigger actions or navigate to other pages. One of &#8230; <a title=\"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\" aria-label=\"More on [Solved] Why boostrap put type=\u201dbutton\u201d in button tag\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[3166,346],"class_list":["post-402","post","type-post","status-publish","format-standard","hentry","category-solved","tag-bootstrap-modal","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Why boostrap put type=\u201dbutton\u201d in button tag - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag - JassWeb\" \/>\n<meta property=\"og:description\" content=\"Introduction [ad_1] The Bootstrap framework is a popular front-end development tool used to create responsive websites and web applications. One of the most common elements used in Bootstrap is the button tag. The button tag is used to create clickable buttons that can be used to trigger actions or navigate to other pages. One of ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-04T16:59:12+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag\",\"datePublished\":\"2022-10-04T16:59:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\"},\"wordCount\":470,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"bootstrap-modal\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\",\"name\":\"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-04T16:59:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag - JassWeb","og_description":"Introduction [ad_1] The Bootstrap framework is a popular front-end development tool used to create responsive websites and web applications. One of the most common elements used in Bootstrap is the button tag. The button tag is used to create clickable buttons that can be used to trigger actions or navigate to other pages. One of ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/","og_site_name":"JassWeb","article_published_time":"2022-10-04T16:59:12+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag","datePublished":"2022-10-04T16:59:12+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/"},"wordCount":470,"commentCount":0,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["bootstrap-modal","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/","url":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/","name":"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-04T16:59:12+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-why-boostrap-put-typebutton-in-button-tag-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Why boostrap put type=\u201dbutton\u201d in button tag"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}