<div id="app">
<form action="/">
<div>
<label for="name">Name:</label><br>
<input id="name" type="text" name="name" required/>
</div>
<div>
<label for="email">Email:</label><br>
<input id="email" type="email" name="email" required/>
</div>
<div>
<label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br>
<textarea id="caps" name="caps" required></textarea>
</div>
<button class="submit" type="submit">Submit</button>
<div>
<h3>Response from server:</h3>
<pre class="response"></pre>
</div>
</form>
</div>
$primary: #5968d7;
#app {
display: flex;
justify-content: center;
font-family: 'Work Sans', sans-serif;
}
form {
width: 300px;
padding: 10px 40px;
label {
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.03em;
font-weight: bold;
}
input, textarea {
border: 1px solid #ccc;
color: #333;
width: calc(100% - 30px);
}
input, textarea, button {
border-radius: 4px;
padding: 8px 15px;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
div {
margin: 20px 0;
}
}
button {
color: white;
border: none;
width: 100%;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: #ccc;
cursor: pointer;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
transition: 0.25s all ease;
&:hover {
transform: translateY(2px);
}
}
.active {
background: $primary;
}
pre-content {
width: 300px;
}
View Compiled
$(function() {
var button = $("button");
var name = $("input[name=name]");
name.keyup(function() {
if (name.val().length > 0) {
button.addClass('active');
} else {
button.removeClass('active');
}
});
$("form").submit(function(event) {
event.preventDefault();
//get the form data
var formData = {
name: $("input[name=name]").val(),
email: $("input[name=email]").val(),
caps: $("input[name=caps]").val()
};
// process the form
$.ajax({
type: "POST",
url: "//jsonplaceholder.typicode.com/posts",
data: formData,
dataType: "json",
encode: true
}).done(function(data) {
$(".response")
.empty()
.append(JSON.stringify(data, null, 2));
});
});
});
This Pen doesn't use any external CSS resources.