{"id":110811,"date":"2021-02-25T16:38:47","date_gmt":"2021-02-25T11:08:47","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=110811"},"modified":"2024-04-12T14:31:16","modified_gmt":"2024-04-12T09:01:16","slug":"button-control-3","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/","title":{"rendered":"Button Control"},"content":{"rendered":"\n

They interact with users usually to submit a form for processing or data transfer. They are displayed as rectangles with squared-off edges by default. These clickable buttons are made by using <input> tag. Both the <input> or <button> tag can be used to create any of the different types of buttons but the <input> tag is supported by many browsers. HTML has three types of buttons which are specified using the type attribute as shown<\/p>\n\n\n\n

Submit<\/strong> \u2013 It creates a button that submits the form for processing or data transfer as shown<\/p>\n\n\n\n

HTML code<\/strong> <form action=\u201c\/process.php\u201d method=\u201cget\u201d> <input type=”submit” value=”Submit” \/> or <button type=”submit”>Submit <\/button> <\/form><\/td>Browser output<\/strong> \"Button<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Reset<\/strong> \u2013 It creates a button which when pressed, resets form controls back to their initial values.<\/p>\n\n\n\n

HTML code<\/strong> <form action=\u201c\/process.php\u201d method=\u201cget\u201d> <input type=”reset” value=”Reset” \/> or <button type=”reset”>Reset<\/button> <\/form><\/td>Browser output<\/strong> \"Button<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Button<\/strong> \u2013 It creates a button which when pressed, an action or event is triggered, based on a predefined script or function.<\/p>\n\n\n\n

HTML code<\/strong> <form action=\u201c\/process.php\u201d method=\u201cget\u201d> <input type=”button” value=”Click Me” \/> or <button type=”button”>Click Me<\/button> <\/form><\/td>Browser output<\/strong> \"Button<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Graphical Buttons<\/strong><\/p>\n\n\n\n

An image can also be used as a button with both the <input> and <button> tag even though <input> tag has no closing tag. And both are discussed as<\/p>\n\n\n\n

<button> Tag<\/strong> \u2013 In it <img> tag is included between the opening and closing <button> tags and the image is displayed in the center of the button when viewed in the browser as shown<\/p>\n\n\n\n

HTML code<\/strong> <button type=”submit” name=”Submit” value=”Submit”><img src=”Vskills_logo.jpg” width=”100″ height=”68″ alt=”Vskills”><\/button><\/td>Browser output<\/strong> \"Button<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Buttons have a grey background colors by default hence, for seamless image on the button then the background of image is either grey or transparent.<\/p>\n\n\n\n

<input> Tag<\/strong> – It is used by assigning the value of type attribute to \u2018image\u2019 and using the \u2018src\u2019 attribute to specify path to image file. The \u2018alt\u2019 attribute is also used to show text description as substitute if the image is not found as shown by using the \u2018alt\u2019 attribute as shown<\/p>\n\n\n\n

HTML code<\/strong> <input type=”image” src=”Vskills_logo.jpg” name=”Submit” alt=”Vskills” \/><\/td>Browser output<\/strong> \"Button<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Apply for HTML Certification<\/strong><\/h3>\n\n\n\n

https:\/\/www.vskills.in\/certification\/certified-html-designer<\/a><\/p>\n\n\n\n

Back to Tutorials<\/a><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"

They interact with users usually to submit a form for processing or data transfer. They are displayed as rectangles with squared-off edges by default. These clickable buttons are made by using <input> tag. Both the <input> or <button> tag can be used to create any of the different types of buttons but the <input> tag…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-110811","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nButton Control - Tutorial<\/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:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button Control - Tutorial\" \/>\n<meta property=\"og:description\" content=\"They interact with users usually to submit a form for processing or data transfer. They are displayed as rectangles with squared-off edges by default. These clickable buttons are made by using <input> tag. Both the <input> or <button> tag can be used to create any of the different types of buttons but the <input> tag...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T09:01:16+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/\",\"name\":\"Button Control - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png\",\"datePublished\":\"2021-02-25T11:08:47+00:00\",\"dateModified\":\"2024-04-12T09:01:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Button Control\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Button Control - Tutorial","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:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/","og_locale":"en_US","og_type":"article","og_title":"Button Control - Tutorial","og_description":"They interact with users usually to submit a form for processing or data transfer. They are displayed as rectangles with squared-off edges by default. These clickable buttons are made by using <input> tag. Both the <input> or <button> tag can be used to create any of the different types of buttons but the <input> tag...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T09:01:16+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/","name":"Button Control - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png","datePublished":"2021-02-25T11:08:47+00:00","dateModified":"2024-04-12T09:01:16+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/06\/Button-Control.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/button-control-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Button Control"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/110811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=110811"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/110811\/revisions"}],"predecessor-version":[{"id":126963,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/110811\/revisions\/126963"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=110811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=110811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=110811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}