Skip to content

Instantly share code, notes, and snippets.

@localdevm

localdevm/HTML & CSS

Last active March 10, 2016 13:20
Show Gist options
  • Save localdevm/ca4a50741e90845c0c29 to your computer and use it in GitHub Desktop.
Save localdevm/ca4a50741e90845c0c29 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTML & CSS
<!DOCTYPE html>
<html>
<head>
<title>Formulieren</title>
<link rel="stylesheet" type="text/css" href="formulieren.css">
</head>
<body>
<div class="wrapper">
<form name="test">
Jaar : <input type="text" name="jaar" id="jaar" value="" /><br />
Niveau : <select>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="Expert">Expert</option>
</select>
<br />
<br />
Omschrijving : <input type="text" name="omschrijving" value="" /><br />
Code : <input type="text" id="code" name="codeVak" value="2016-ABC-" />
<input class="submit" name="submit" type="button" onclick="validate(this)" value="Verzenden" />
<input type="reset" class="submit2">
</form>
<script type="text/javascript">
function validate(obj)
{
var form = document.test;
var reqString = "2016-ABC-";
console.log(this);
if((form.jaar.value > 2018 || form.jaar.value < 2016) || form.jaar.value == "")
{
alert("Het jaar moet tussen 2016 & 2018 zijn.");
}
if(form.omschrijving.value == "")
{
alert("Omschrijving mag niet leeg zijn");
}
if(form.codeVak.value.indexOf(reqString) == 0)
{
alert("Uw persoonlijke code moet beginnen met " + reqString);
}
if(form.codeVak.value.length > reqString.length + 3)
{
alert("Uw moet nog 3 extra cijfers invullen.");
}
}
</script>
</div>
</body>
</html>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ CSS @
@ @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200);
body {
font-family: 'Source Code Pro', Sans-serif ;
font-weight: 400;
font-size: 16px;
color: #00465c
;}
input {
display: block;
border: 1px solid #00465c;
height: 30px;
box-shadow: 3px 3px 0px #00465c;
width: 98%;
padding: 1%;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
}
.wrapper {
width: 30%;
margin: 0 auto;
}
.submit {
display: inline-block;
background: #00465c;
-webkit-box-shadow: 4px 4px 0 #4ae1b1;
-moz-box-shadow: 4px 4px 0 #4ae1b1;
box-shadow: 4px 4px 0 #4ae1b1;
color: #ffffff;
font-size: 0.750em;
padding: 1em 2.5em 2.25em 2.5em;
text-decoration: none;
text-align: center;
font-weight: 500;
text-transform: uppercase;
margin-top: 1em;
letter-spacing: 2px;
width: 150px;
cursor: pointer;
}
.submit:hover {
background: #4ae1b1;
border-color: #4ae1b1;
}
.submit2 {
display: inline-block;
background: #00465c;
-webkit-box-shadow: 4px 4px 0 #4ae1b1;
-moz-box-shadow: 4px 4px 0 #4ae1b1;
box-shadow: 4px 4px 0 #4ae1b1;
color: #ffffff;
font-size: 0.750em;
padding: 1em 2.5em 2.25em 2em;
text-decoration: none;
text-align: center;
font-weight: 500;
text-transform: uppercase;
margin-top: 1em;
letter-spacing: 2px;
width: 150px;
cursor: pointer;
}
.submit2:hover {
background: #4ae1b1;
border-color: #4ae1b1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment