<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Registration Form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="form_wrapper">
<div class="form_container">
<div class="title_container">
<h2>Responsive Registration Form</h2>
</div>
<div class="row clearfix">
<div class="">
<form id='register-form' autocomplete="off">
<div class="row clearfix">
<div class="col_half">
<div class="input_field">
<span>
<i aria-hidden="true" class="fa fa-user"></i>
</span>
<input type="text" name="name" placeholder="First Name" />
</div>
</div>
<div class="col_half">
<div class="input_field">
<span>
<i aria-hidden="true" class="fa fa-user"></i>
</span>
<input type="text" name="name" placeholder="Last Name" required />
</div>
</div>
</div>
<div class="input_field">
<span>
<i aria-hidden="true" class="fa fa-envelope"></i>
</span>
<input type="email" name="email" placeholder="Email" required />
</div>
<div class="input_field">
<span><i aria-hidden="true" class="fa fa-lock">
</i>
</span>
<input type="password" name="password" placeholder="Password" required />
</div>
<div class="input_field">
<span>
<i aria-hidden="true" class="fa fa-lock"></i>
</span>
<input type="password" name="password" placeholder="Re-type Password" required />
</div>
<div class="input_field radio_option">
<span class='radio_icon'>
<i class="fa fa-venus-mars" aria-hidden="true"></i>
</span>
<div class='radio_group'>
<input type="radio" name="gender" id="gender-m" checked="true">
<label for="gender-m">Male</label>
<input type="radio" name="gender" id="gender-f">
<label for="gender-f">Female</label>
</div>
</div>
<div class="input_field select_option">
<span><i id='country-icon' aria-hidden="true" class="fa fa-globe"></i>
</span>
<input name='country' type="text" id="country-list" list="country-datalist" placeholder='Country of Origin' autocomplete="off">
<datalist id="country-datalist" autocomplete="off">
</datalist>
<div id='country-error' class=''></div>
<!--div class="select_arrow"></div-->
</div>
<!-- <div class="input_field checkbox_option">
<input type="checkbox" id="cb1">
<label for="cb1">I agree with terms and conditions</label>
</div>
<div class="input_field checkbox_option">
<input type="checkbox" id="cb2">
<label for="cb2">I want to receive the newsletter</label>
</div>
<button id='check-data' class='button'>
Check Data
</button>
--> <input id='submit-data' class="button" type="submit" value="Register" />
</form>
</div>
</div>
</div>
</div>
<p class="credit">Developed by <a href="http://www.designtheway.com" target="_blank">Design the way</a></p>
<!-- partial -->
<script src='https://use.fontawesome.com/723b3db6c5.js'></script><script src="./script.js"></script>
</body>
</html>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
background: #f2f2f2;
}
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.form_wrapper {
background: #fff;
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 1% auto 0;
position: relative;
z-index: 1;
border-top: 5px solid #f5ba1a;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: scale3d(1, 1, 1);
transform-origin: 50% 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: none;
transition: none;
-webkit-animation: expand 0.8s 0.6s ease-out forwards;
animation: expand 0.8s 0.6s ease-out forwards;
opacity: 0;
}
.form_wrapper h2 {
font-size: 1.5em;
line-height: 1.5em;
margin: 0;
}
.form_wrapper .title_container {
text-align: center;
padding-bottom: 15px;
}
.form_wrapper h3 {
font-size: 1.1em;
font-weight: normal;
line-height: 1.5em;
margin: 0;
}
.form_wrapper label {
font-size: 12px;
}
.form_wrapper .row {
margin: 10px -15px;
}
.form_wrapper .row > div {
padding: 0 15px;
box-sizing: border-box;
}
.form_wrapper .col_half {
width: 50%;
float: left;
}
.form_wrapper .col_quarter {
width: 25%;
float: left;
}
.form_wrapper .input_field {
position: relative;
margin-bottom: 20px;
-webkit-animation: bounce 0.6s ease-out;
animation: bounce 0.6s ease-out;
}
.form_wrapper .input_field > span {
position: absolute;
left: 0;
top: 0;
color: #333;
height: 100%;
border-right: 1px solid #cccccc;
text-align: center;
width: 30px;
}
.form_wrapper .input_field > span > i {
padding-top: 10px;
}
.form_wrapper .textarea_field > span > i {
padding-top: 10px;
}
.form_wrapper input[type="text"], .form_wrapper input[type="email"], .form_wrapper input[type="password"] {
width: 100%;
padding: 8px 10px 9px 35px;
height: 35px;
border: 1px solid #cccccc;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.form_wrapper input[type="text"]:hover, .form_wrapper input[type="email"]:hover, .form_wrapper input[type="password"]:hover {
background: #fafafa;
}
.form_wrapper input[type="text"]:focus, .form_wrapper input[type="email"]:focus, .form_wrapper input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
-moz-box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
border: 1px solid #f5ba1a;
background: #fafafa;
}
.form_wrapper input[type="submit"] {
background: #f5ba1a;
height: 35px;
line-height: 35px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 1.1em;
margin-bottom: 10px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.form_wrapper input[type="submit"]:hover {
background: #e1a70a;
}
.form_wrapper input[type="submit"]:focus {
background: #e1a70a;
}
.form_wrapper input[type="checkbox"], .form_wrapper input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.form_container .row .col_half.last {
border-left: 1px solid #cccccc;
}
.checkbox_option label {
margin-right: 1em;
position: relative;
}
.checkbox_option label:before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.5em;
vertical-align: -2px;
border: 2px solid #cccccc;
padding: 0.12em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}
.checkbox_option label:after {
border-right: 2px solid #000000;
border-top: 2px solid #000000;
content: "";
height: 20px;
left: 2px;
position: absolute;
top: 7px;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
width: 7px;
display: none;
}
.checkbox_option input:hover + label:before {
border-color: #000000;
}
.checkbox_option input:checked + label:before {
border-color: #000000;
}
.checkbox_option input:checked + label:after {
-moz-animation: check 0.8s ease 0s running;
-webkit-animation: check 0.8s ease 0s running;
animation: check 0.8s ease 0s running;
display: block;
width: 7px;
height: 20px;
border-color: #000000;
}
.radio_option {
position: relative;
width: 100%;
}
.radio_option div.radio_group {
display: block;
height: auto;
padding: 5px 35px;
border: 1px solid #cccccc;
}
.radio_option span {
position: absolute;
left: 0;
top: 0;
color: #333;
height: 100%;
border-right: 1px solid #CCC;
width: -moz-fit-content;
float: left;
}
.radio_option label {
margin-right: 1em;
}
.radio_option label:before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.5em;
border-radius: 100%;
vertical-align: 3px;
border: 2px solid #cccccc;
padding: 0.15em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}
.radio_option input:hover + label:before {
border-color: #000000;
}
.radio_option input:checked + label:before {
background-color: #000000;
border-color: #000000;
}
.select_option {
position: relative;
width: 100%;
}
.select_option select {
display: inline-block;
width: 100%;
height: 35px;
padding: 0px 15px;
cursor: pointer;
color: #7b7b7b;
border: 1px solid #cccccc;
border-radius: 0;
background: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: all 0.2s ease;
}
.select_option select::-ms-expand {
display: none;
}
.select_option select:hover, .select_option select:focus {
color: #000000;
background: #fafafa;
border-color: #000000;
outline: none;
}
.select_arrow {
position: absolute;
top: calc(50% - 4px);
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-width: 8px 5px 0 5px;
border-style: solid;
border-color: #7b7b7b transparent transparent transparent;
}
.button {
background: #f5ba1a;
height: 35px;
line-height: 35px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 1.1em;
margin-bottom: 10px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.button:hover {
background: #e1a70a;
}
.button:focus {
background: #e1a70a;
}
.select_option select:hover + .select_arrow, .select_option select:focus + .select_arrow {
border-top-color: #000000;
}
.credit {
display: none;
position: relative;
z-index: 1;
text-align: center;
padding: 15px;
color: #f5ba1a;
}
.credit a {
color: #e1a70a;
}
@-webkit-keyframes check {
0% {
height: 0;
width: 0;
}
25% {
height: 0;
width: 7px;
}
50% {
height: 20px;
width: 7px;
}
}
@keyframes check {
0% {
height: 0;
width: 0;
}
25% {
height: 0;
width: 7px;
}
50% {
height: 20px;
width: 7px;
}
}
@-webkit-keyframes expand {
0% {
-webkit-transform: scale3d(1, 0, 1);
opacity: 0;
}
25% {
-webkit-transform: scale3d(1, 1.2, 1);
}
50% {
-webkit-transform: scale3d(1, 0.85, 1);
}
75% {
-webkit-transform: scale3d(1, 1.05, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
opacity: 1;
}
}
@keyframes expand {
0% {
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
opacity: 0;
}
25% {
-webkit-transform: scale3d(1, 1.2, 1);
transform: scale3d(1, 1.2, 1);
}
50% {
-webkit-transform: scale3d(1, 0.85, 1);
transform: scale3d(1, 0.85, 1);
}
75% {
-webkit-transform: scale3d(1, 1.05, 1);
transform: scale3d(1, 1.05, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translate3d(0, -25px, 0);
opacity: 0;
}
25% {
-webkit-transform: translate3d(0, 10px, 0);
}
50% {
-webkit-transform: translate3d(0, -6px, 0);
}
75% {
-webkit-transform: translate3d(0, 2px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes bounce {
0% {
-webkit-transform: translate3d(0, -25px, 0);
transform: translate3d(0, -25px, 0);
opacity: 0;
}
25% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
50% {
-webkit-transform: translate3d(0, -6px, 0);
transform: translate3d(0, -6px, 0);
}
75% {
-webkit-transform: translate3d(0, 2px, 0);
transform: translate3d(0, 2px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@media (max-width: 600px) {
.form_wrapper .col_half {
width: 100%;
float: none;
}
.bottom_row .col_half {
width: 50%;
float: left;
}
.form_container .row .col_half.last {
border-left: none;
}
.remember_me {
padding-bottom: 20px;
}
}
/* Utility functions*/
const _ = (id) => {
return document.getElementById(id);
};
const formToJSON = (elements) =>
[].reduce.call(
elements,
(data, element) => {
data[element.name] = element.value;
return data;
},
{}
);
/* Handler Functions*/
function checkData(event) {
event.preventDefault();
}
function submitData(event) {
event.preventDefault();
}
function registerForm(event) {
event.preventDefault();
var form = _("register-form");
var data = formToJSON(form.elements);
}
function countryList(event) {
var el = event.target;
_("country-error").innerText = "";
if (el.value.length < 1) {
_("country-datalist").innerHTML = "";
return false;
}
var cicon = _("country-icon");
cicon.classList.remove("fa-globe");
cicon.classList.add("fa-spinner", "fa-fw");
console.log(el.value);
var request = new Request(
window.location.protocol + "//www.pattaya-golfer.com/api.php",
{
method: "PUT",
mode: "cors",
headers: new Headers({
"Content-Type": "application/json"
}),
body: JSON.stringify({
action: "countrylist",
query: el.value
})
}
);
fetch(request)
.then(function (response) {
return response.json();
})
.then(function (jsonobj) {
if (jsonobj.success === true) {
var cdl = _("country-datalist");
cdl.options = {};
var countries = jsonobj.countries;
// var countries = JSON.parse(jsonobj.countries);
// _('country-datalist').options = jsonobj.countries;
/**/
while (cdl.firstChild) {
cdl.removeChild(cdl.firstChild);
}
countries.forEach(function (country) {
console.log(country.name, "Country");
var op = document.createElement("option");
op.id = "country-" + country.code;
op.value = country.name;
// op.text = country.name;
cdl.appendChild(op);
});
/**/
} else {
_("country-error").innerText = jsonobj.message;
}
})
.catch(function (error) {
_("country-error").innerText = "Catch: " + error;
});
cicon.classList.remove("fa-spinner", "fa-fw");
cicon.classList.add("fa-globe");
}
/* Document Ready Handler */
document.addEventListener("DOMContentLoaded", function () {
var countrylist = _("country-list");
countrylist.addEventListener("input", countryList);
countrylist.addEventListener("click", function (event) {
event.preventDefault();
});
/**
countrylist.addEventListener('focus',function(event){
event.target.value = '';
});
**/
_("check-data").addEventListener("click", checkData);
_("submit-data").addEventListener("click", submitData);
_("register-form").addEventListener("submit", registerForm);
});