<div class="wrapper">
<h1>The importance of the type attribute for buttons</h1>
</div>
<div class="wrapper">
<form action="" id="my-form">
<fieldset>
<legend>The Form</legend>
<p>These buttons are within the <code>form</code> tag.</p>
<p>When the form is submitted, the background colour changes.</p>
<button type="submit">"Submit" type</button>
<button type="button">"Button" type</button>
<button type="reset">"Reset" type</button>
<button>No type</button>
</fieldset>
</form>
</div>
<div class="wrapper">
<p>For comparison, these buttons are outside the form. They don't trigger the <code>submit</code> event, and therefore do nothing.</p>
<p>
<button type="submit">"Submit" type</button>
<button type="button">"Button" type</button>
<button type="reset">"Reset" type</button>
<button>No type</button>
</p>
</div>
<div class="wrapper">
<p>The form above executes a JavaScript function on the <code>submit</code> event. The function changes the background colour of this page. The form contains four buttons, each with a different <code>type</code> attribute value: <code>type="submit"</code>, <code>type="button"</code>, <code>type="reset"</code> and no <code>type</code> attribute. Click each button and notice which ones trigger the <code>onsubmit</code> event. You may be surprised! Or not.</p>
</div>
$color-button: #d32f2f;
$color-button: #d32f2f;
$color-button-background: #fdfdfd;
$color-shadow: #222;
$color-wrapper-background: #f3f3f3;
$color-submit-button: #388e3c;
$color-button-button: #1565c0;
$color-reset-button: #f57c00;
button {
height: 36px;
border: 3px solid $color-button;
font-size: 16px;
background-color: $color-button-background;
cursor: pointer;
color: $color-button;
box-shadow: 3px 3px $color-shadow;
margin-right: 10px;
margin-top: 10px;
padding: 0 20px;
&:hover {
opacity: 0.7;
}
&:active {
background-color: #eee;
opacity: 1;
}
}
button[type="submit"] {
border: 3px solid $color-submit-button;
color: $color-submit-button;
}
button[type="button"] {
border: 3px solid $color-button-button;
color: $color-button-button;
}
button[type="reset"] {
border: 3px solid $color-reset-button;
color: $color-reset-button;
}
.wrapper {
background-color: $color-wrapper-background;
border-radius: 3px;
padding: 5px;
margin-bottom: 15px;
box-shadow: 5px 5px $color-shadow;
border: 1px solid $color-shadow;
margin-bottom: 25px;
}
body {
font-family: Raleway, sans-serif;
padding: 0 5%;
}
h1 {
margin: 0;
}
fieldset {
border: 3px dashed $color-shadow;
}
View Compiled
let changeBackground = function(e) {
// Thnx https://www.paulirish.com/2009/random-hex-color-code-snippets/
let newRandomHex = "#" + Math.floor(Math.random() * 16777215).toString(16);
console.log(newRandomHex);
document.body.style.backgroundColor = newRandomHex;
};
let form = document.querySelector("#my-form");
form.addEventListener(
"submit",
function(e) {
e.preventDefault();
changeBackground();
},
false
);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.