Skip to content

Instantly share code, notes, and snippets.

@paulwababu

paulwababu/registration.html

Created March 30, 2022 13:03
Show Gist options
  • Save paulwababu/a88ea5de6ac499851632275dd7cea3bb to your computer and use it in GitHub Desktop.
Save paulwababu/a88ea5de6ac499851632275dd7cea3bb to your computer and use it in GitHub Desktop.
Download ZIP
On checking the married checkbox, the marriage annivasary date appears, and vice versa
Raw
registration.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495012/church_registration/fonts/icomoon/style_piie03.css">
<link rel="stylesheet" href="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495006/church_registration/css/owl.carousel.min_vwu7y3.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495006/church_registration/css/bootstrap.min_zepp7n.css">
<!-- Style -->
<link rel="stylesheet" href="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495005/church_registration/css/style_vuyd4w.css">
<title>Hebron City Membership Registration</title>
</head>
<body>
<div class="d-lg-flex half">
<div class="bg order-1 order-md-2" style="background-image: url('https://res.cloudinary.com/prometheusapi/image/upload/v1648498357/church_registration/does-God-use-technology__1_ydtugt.png');"></div>
<div class="contents order-2 order-md-1">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-7 py-5">
<h3 style="font-style: oblique;">Hebron City Registration Form</h3>
<br>
<style>
</style>
<form method="post">
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="fname">Title</label>
<select class="form-control">
<option selected>Click to Select Your Title</option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Dr(Mrs)</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group first">
<label for="fname">First Name</label>
<input type="text" class="form-control" placeholder="e.g. Paul" id="fname">
</div>
</div>
<div class="col-md-6">
<div class="form-group first">
<label for="lname">Last Name</label>
<input type="text" class="form-control" placeholder="e.g. Wababu" id="lname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="email">Date of Birth</label>
<input type="date" class="form-control" placeholder="Date of Birth" id="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="lname">Phone Number</label>
<input type="number" name="number" class="form-control" placeholder="e.g. 254797584194" id="contact">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="fname">Gender</label>
<select class="form-control">
<option selected>Click to Select Your Gender</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Marital Status</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" onchange="handleChange(this);" id="gridRadios1" value="Single" checked>
<label class="form-check-label" for="gridRadios1">
Single
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" onchange="handleChange(this);" id="gridRadios2" value="Married">
<label class="form-check-label" for="gridRadios2">
Married
</label>
</div>
<script>
function handleChange(src) {
if(src.value == 'Married'){
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
}
}
if(src.value == 'Single') {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
}
}
}
</script>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row" style="display: none;" id="myDIV">
<div class="col-md-12">
<div class="form-group first">
<label for="email">Marriage Annivasary</label>
<input type="date" class="form-control" id="marriageannivasary">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="email">Member Since</label>
<input type="date" class="form-control" id="membersince">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="email">Photo</label>
<input type="file" class="form-control" id="customFile" />
</div>
</div>
</div>
<div class="d-flex mb-5 mt-4 align-items-center">
<div class="d-flex align-items-center">
</div>
</div>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495013/church_registration/js/jquery-3.3.1.min_i7lmpu.js"></script>
<script src="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495013/church_registration/js/popper.min_wwwl3n.js"></script>
<script src="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495017/church_registration/js/bootstrap.min_ezrwd3.js"></script>
<script src="https://res.cloudinary.com/prometheusapi/raw/upload/v1648495012/church_registration/js/main_kr29tc.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment