Skip to content

Instantly share code, notes, and snippets.

@jalotra

jalotra/index.html

Created August 27, 2023 04:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jalotra/54d7f07a2084c72dc4df91a2582c0747 to your computer and use it in GitHub Desktop.
Save jalotra/54d7f07a2084c72dc4df91a2582c0747 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IEne=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Regisration Form </title>
</head>
<body>
<div class="container">
<header>Registration</header>
<form action="#">
<div class="form first">
<div class="details personal">
<span class="title">Personal Details</span>
<div class="fields">
<div class="input-field">
<label>First Name</label>
<input type="text" placeholder="Enter your First name" required>
</div>
<div class="input-field">
<label>Last Name</label>
<input type="text" placeholder="Enter your Last name" required>
</div>
<div class="input-field">
<label>Date of Birth</label>
<input type="date" placeholder="Enter birth date" required>
</div>
<div class="input-field">
<label>Email</label>
<input type="Email" placeholder="Enter your email" required>
</div>
<div class="input-field">
<label>Mobile Number</label>
<input type="number" placeholder="Enter mobile number" required>
</div>
<div class="input-field">
<label>Gender</label>
<select required>
<option disabled selected>Select gender</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
</div>
</div>
</div>
<div class="details AD">
<span class="title">Address Details</span>
<div class="fields">
<div class="input-field">
<label>Address</label>
<input type="text" placeholder="Enter your Address" required>
</div>
<div class="input-field">
<label>City</label>
<select name="city" required>
<option selected="selected" disabled > Select City </option>
<option value="De">Delhi</option>
</select>
</div>
<div class="input-field">
<label>Postal Code</label>
<input type="text" placeholder="Enter your Postal Code" required>
</div>
<!-- <div class="input-field">
<label>Issued State</label>
<input type="text" placeholder="Enter issued state" required>
</div>
<div class="input-field">
<label>Issued Date</label>
<input type="date" placeholder="Enter your issued date" required>
</div>
<div class="input-field">
<label>Expiry Date</label>
<input type="date" placeholder="Enter expiry date" required>
</div> -->
<div class="input-field2">
<label>Eligibility</label>
<input type="checkbox" required>
</div>
</div>
<button class="nextBtn">
<span class="btnText">Next</span>
</button>
</div>
</div>
<div class="form second">
<div class="details login">
<span class="title">Login Details</span>
<div class="fields">
<div class="input-field">
<label>User Name</label>
<input type="text" placeholder="Enter your user name" required>
</div>
<div class="input-field">
<label>Password</label>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="input-field">
<label>Confirm Password</label>
<input type="password" placeholder="Confirm your password" required>
</div>
<!--<div class="input-field">
<label>District</label>
<input type="text" placeholder="Enter your district" required>
</div>
<div class="input-field">
<label>Block Number</label>
<input type="number" placeholder="Enter block number" required>
</div>
<div class="input-field">
<label>Ward Number</label>
<input type="number" placeholder="Enter ward number" required>
</div>-->
</div>
</div>
<!-- <div class="details family">
<span class="title">Family Details</span>
<div class="fields">
<div class="input-field">
<label>Father Name</label>
<input type="text" placeholder="Enter father name" required>
</div>
<div class="input-field">
<label>Mother Name</label>
<input type="text" placeholder="Enter mother name" required>
</div>
<div class="input-field">
<label>Grandfather</label>
<input type="text" placeholder="Enter grandfther name" required>
</div>
<div class="input-field">
<label>Spouse Name</label>
<input type="text" placeholder="Enter spouse name" required>
</div>
<div class="input-field">
<label>Father in Law</label>
<input type="text" placeholder="Father in law name" required>
</div>
<div class="input-field">
<label>Mother in Law</label>
<input type="text" placeholder="Mother in law name" required>
</div>
</div>-->
<div class="buttons">
<div class="backBtn">
<span class="btnText">Back</span>
</div>
<button class="sumbit">
<span class="btnText">Submit</span>
</button>
</div>
</div>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment