<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Registration form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration form - Programming in Java II.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner"></div>
<div id="inner-data">
<h1 id="title">Registration form</h1>
<p id="description">
<p>Advanced Java course application - please read carefully the information below.</p>
<p id="note">* A required field</p>
</p>
<form id="survey-form" method="GET">
<div class="row">
<div class="label-data">
<label id="name-label" for="name">Name*</label>
</div>
<div class="input-data">
<input id="name" class="input-area" type="text" name="name" placeholder="Enter your name" required><br>
</div>
</div>
<div class="row">
<div class="label-data">
<label id="email-label" for="email">Email*</label>
</div>
<div class="input-data">
<input id="email" class="input-area" type="text" name="email" placeholder="Enter your email"
required><br>
</div>
</div>
<div class="row">
<div class="label-data">
<label id="phone-label" for="phone number">Phone number*</label>
</div>
<div class="input-data">
<input id="phone-number" class="input-area" type="tel" name="phone number" placeholder="Enter your phone number"
required><br>
</div>
</div>
<div class="row">
<div class="label-data">
<label id="number-label" for="age">Age*</label>
</div>
<div class="input-data">
<input id="number" class="input-area" type="number" name="age" placeholder="Enter your age" min="15"
max="99" required><br>
</div>
</div>
<div class="row">
<div class="label-data">
<label for="roles">What is your current role?</label>
</div>
<div class="input-data">
<select id="dropdown" name="role" class="dropdown" required>
<option value="" disabled selected>Please choose...</option>
<option value="high school student">High school student</option>
<option value="college student">College student</option>
<option value="it worker">IT worker</option>
<option value="non IT worker">Non IT worker</option>
<option value="maternity/parental leave">Currently on maternity/parental leave</option>
<option value="unemployed">Currently unemployed</option>
</select>
</div>
</div>
<div class="row">
<div class="label-data">
<label for="experience">Do you have any experience with the course subject?*</label><br>
</div>
<div class="input-data" required>
<ul style="list-style: none;">
<li class="radio"><label>I have no clue what it is.<input name="experience" value="1" type="radio" class="experience"></label></li>
<li class="radio"><label>I tried.<input name="experience" value="2" type="radio" class="experience"></label></li>
<li class="radio"><label>Java is my friend. :)<input name="experience" value="3" type="radio" class="experience"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="label-data">
<label for="source">How did you find out about the course?</label><br>
</div>
<div class="input-data">
<ul style="list-style: none;">
<li class="checkbox"><label><input name="source" type="checkbox" value="personal recommendation">Personal recommendation</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="public press">Public press</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="TV">TV</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Radio">Radio</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Our web">Our web</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Internet">Internet</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Facebook">Facebook</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Linkedin">Linkedin</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Twitter">Twitter</label></li>
<li class="checkbox"><input name="source" type="checkbox" value="Other">Other</label></li>
</ul>
</div>
</div>
<div class="row">
<div class="label-data">
<label for="city">In which city do you live?</label>
</div>
<div class="input-data">
<select id="dropdown" name="city" class="dropdown" required>
<option value="" disabled selected>Please choose...</option>
<option value="high school student">Prague</option>
<option value="college student">Berlin</option>
<option value="it worker">Vienna</option>
<option value="non IT worker">Krakow</option>
<option value="maternity/parental leave">Bratislava</option>
</select>
</div>
</div>
<div class="row">
<div class="label-data">
<label for="textarea">What is your motivation for applying for the course?</label>
</div>
<div class="input-data">
<textarea id="motivations" class="input-area" name="motivation" placeholder="Your response"></textarea>
</div>
</div>
<button id="submit" type="submit">Submit</button>
</form>
</div>
</body>
</html>
<!-- partial -->
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Roboto|Scada');
body {
text-align: center;
background-color: rgb(252, 228, 236);
margin: 0;
}
.banner {
position: relative;
height: 278px;
background-color: rgb(233, 30, 99);
}
#inner-data {
font-family: 'Roboto', sans-serif;
max-width: 900px;
width: 80vw;
background-color: white;
border-radius: 5px;
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 30px;
padding-bottom: 20px;
}
h1 {
color: #373737;
font-family: 'Scada', sans-serif;
font-size: 2em;
padding: 30px;
padding-bottom: 5px;
}
#note {
color: tomato;
font-size: 90%;
padding-bottom: 20px;
}
.label-data {
display: inline-block;
text-align: right;
padding: 10px;
width: 40%;
vertical-align: top;
margin-bottom: 20px;
}
.input-data {
display: inline-block;
text-align: left;
padding: 10px;
width: 50%;
vertical-align: middle;
margin-top: -5px;
}
.input-area {
width: 80%;
height: 20px;
padding: 5px;
font-family: 'Roboto', sans-serif;
border-radius: 2px;
border: 1px solid slategray;
}
.radio, .checkbox {
position: relative;
display: block;
left: -45px;
top: -10px;
margin-bottom: 5px;
}
.dropdown {
width: 85%;
height: 35px;
padding: 5px;
font-family: 'Roboto', sans-serif;
border-radius: 2px;
border: 1px solid slategray;
}
.experience, input[type="checkbox"] {
float: left;
margin-right: 5px;
}
select:required:invalid {
color: gray;
}
option[value=""][disabled] {
display: none;
}
option {
color: black;
}
#motivations {
resize: vertical;
}
#submit {
background-color: rgb(233, 30, 99);
border-radius: 6px;
border:none;
color: #FFFFFF;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 105%;
padding: 5px;
height: 40px;
width: 96px;
cursor: pointer;
margin: 5%;
}
@media only screen and (max-width: 550px) {
p {
text-align: left;
padding-left: 2vw;
}
#inner-data {
width: 90vw;
}
.label-data {
width: 80%;
text-align: left;
margin-bottom: .5%;
margin-left: -13%;
}
.input-data {
width: 100%;
float: left;
width: 50vw;
margin-bottom: 2vw;
padding-left: 2vw;
}
.input-area {
width: 100%;
margin-left: 2%;
}
#dropdown {
width: 105%;
margin-left: 2%;
}
.radio, .checkbox {
white-space: nowrap;
margin-left: 4%;
}
#submit {
margin: 11%;
}
}
field_username = document.getElementById('username');
field_username.oninvalid = function(event) {
event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}