Close #6 Added Responsive HTML CSS form using JQuery

gdscmuet · Oct 21, 2021 · 7600bc2 · 7600bc2
1 parent 6596ed6
commit 7600bc2
Show file tree

Hide file tree

Showing 2 changed files with 231 additions and 0 deletions.
diff --git a/Reponsive Form Using JQuery/index.html b/Reponsive Form Using JQuery/index.html
@@ -0,0 +1,121 @@
+<!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">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
+
+
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="style.css">
+
+
+   <title>Form validation</title>
+  </head>
+
+
+  <body>
+  <section class="bg">
+  	<div class="container">
+  		<div class="row d-flex justify-content-center">
+  			<div class="col-md-4">
+  				<div class="form-wrap">
+  					<div class="form-heading">
+  						<h1>Registration Form</h1>
+  						<p>Enter your Personal Data</p>
+  					</div>
+  					<form name="regForm" id="regForm">
+  						<div class="form-group">
+  							<label>Name: </label>
+  							<input type="text" class="form-control" id="name"name="" placeholder="Name">
+  							<p id="p1"></p>
+  						</div>
+  						<div class="form-group">
+  							<label>Email: </label>
+  							<input type="email" class="form-control" id="email"name="" placeholder="Email">
+  							<p id="p2"></p>
+  						</div>
+  						<div class="form-group">
+  							<label>Password: </label>
+  							<input type="password" class="form-control" id="password"name="" placeholder="Password">
+  							<p id="p3"></p>
+  						</div>
+  						<div class="form-group">
+
+  							<input type="submit" class="btn btn-primary btn-block" id="submit">
+
+  						</div>
+
+  					</form>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </section>
+
+
+
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+
+
+  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+
+  <script>
+  	$(document).ready(function(){
+  		$("#submit").click(function(){
+  			var name = $("#name").val();
+  			var email = $("#email").val();
+  			var pass = $("#password").val();
+
+  			if(name.length == "")
+  			{
+  				$("#p1").text("Please enter your name");
+  				$("#name").focus();
+  				return false;
+  			}
+
+  			else if(email.length == ""){
+  				$("#p2").text("Please enter your email address");
+  				$("#email").focus();
+  				return false;
+  			}
+
+
+  			else if(pass.length == ""){
+  				$("#p3").text("Please enter your password");
+  				$("#password").focus();
+  				return false;
+  			}
+
+  			else{
+  				var con = confirm("Are you Done?");
+  				if(con == true)
+  				{
+  					alert("Welcome to our Website");
+  					return true;
+  				}
+  				else{
+  					return false;
+  				}
+  			}
+  		});
+  	});
+
+
+  </script>
+
+
+
+  </body>
+</html>
diff --git a/Reponsive Form Using JQuery/style.css b/Reponsive Form Using JQuery/style.css
@@ -0,0 +1,110 @@
+*{
+	margin:0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+
+.bg{
+	background: #e3e3e3;
+	padding: 80px 0px;
+	font-family: 'Montserrat', sans-serif;
+}
+
+.form-wrap{
+	position: relative;
+	box-shadow: rgba(221,230,237,0.4) 0px 3px 10px 0px;
+	background-color: white;
+}
+
+#regForm{
+	padding: 50px 30px 30px 30px;
+}
+
+.form-heading{
+	position: relative;
+	width:110%;
+	left: -5%;
+	top:15px;
+	padding: 15px 0px;
+	text-align: center;
+	color: white;
+	background-color: #8e2de2;
+	background:linear-gradient(to right, #4a00e0, #8e2de2);
+}
+
+.form-heading:before{
+	position: absolute;
+	content:'';
+	left:0;
+	bottom: -20px;
+	width: 18px;
+	height: 20px;
+	background-color: #5f2bc2;
+	clip-path: polygon(0 0, 100% 0, 100% 100%);
+}
+.form-heading:after{
+	position: absolute;
+	content:'';
+	right: 0px;
+	bottom: -20px;
+	width: 18px;
+	height: 20px;
+	background-color: #5f2bc2;
+	clip-path: polygon(0 0, 0 100% , 100% 0);
+}
+
+.form-heading h1{
+	text-transform: uppercase;
+	font-size: 22px;
+	font-weight: 700;
+	margin: 0px;
+}
+
+.form-heading p{
+	text-transform: capitalize;
+	font-size: 14px;
+	font-weight: 500;
+	padding: 0;
+	margin: 0;
+}
+
+#regForm label{
+	text-transform: uppercase;
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.form-control{
+	border:none;
+	padding:0px;
+	border-bottom: 2px solid #b5b5b5;
+	border-radius: 0px;
+}
+
+.form-control:focus{
+	box-shadow: none;
+}
+
+::placeholder{
+  text-transform: capitalize;
+  font-size: 11px;
+  font-weight: 500;
+  color: #b5b5b5;
+}
+
+.btn-primary{
+	background-color: #8e2de2;
+	border:none;
+	margin:20px 0px 0px 0px;
+	text-transform: capitalize;
+	font-size: 14px;
+	font-weight: 600;
+	background:linear-gradient(to right, #4a00e0, #8e2de2);
+}
+
+#p1, #p2, #p3{
+	color: #ff0000;
+	font-size: 13px;
+	font-weight: 600;
+}