HTML Form

HTML Form with Pure CSS


Create a Div in the middle of the screen with box-shadow

Div in the middle of the screen with box-shadow
Center Div
.main-div {
			width: 90%;
			margin: auto;
			padding: 20px;
			border: 1px solid rgb(161, 148, 148);
			box-shadow: 10px 5px 10px rgb(128, 123, 123);
		}


Materialize Input field with CSS

Materialize Input field with CSS
Enhance Input field with CSS
input,
		textarea {
			font-family: inherit;
			font-size: inherit;
		}

		input[type="text"],
		input[type="email"],
		select {
			margin: 8px;
			padding: 5px;
			box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
			border: solid 1px;
			border-radius: 4px;
		}

		select {
			padding: 10px;
			width: 46%;
		}


Custom Checkbox and Radio button with Pure CSS

Custom Checkbox and Radio button with Pure CSS
Custom Checkbox and Radio button

Custom Checkbox CSS Step by Step

.control-checkbox {
			position: relative;
			padding-left: 6%;
			cursor: pointer;
		}
		.control-checkbox input {
			opacity: 0;
		}
		.control-checkbox span {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 20px;
			background-color: #eee;
			border: 1px solid gray;
		}

		.control-checkbox input:checked + span {
			background-color: #2196f3;
		}
		.control-checkbox span::after {
			content: "";
			position: absolute;
			top: 4px;
			left: 6px;
			width: 5px;
			height: 10px;
			border: solid white;
			border-width: 0 3px 3px 0;
			transform: rotate(45deg);
			display: none;
		}
		.control-checkbox input:checked + span:after {
			display: block;
		}

Custom Radio button CSS step by step

.radio-control {
			position: relative;
			padding-left: 6%;
			cursor: pointer;
		}

		.radio-control input {
			opacity: 0;
		}
		.radio-control span {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 20px;
			background-color: #eee;
			border-radius: 50%;
			border: 1px solid gray;
		}

		.radio-control input:checked + span {
			background-color: #2196f3;
		}

		.radio-control span:after {
			content: "";
			position: absolute;
			top: 4px;
			left: 4px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: white;
			display: none;
		}

		.radio-control input:checked + span::after {
			display: block;
		}


Materialize type Button with Pure CSS

Button with Pure CSS
HTML buttons
input[type="submit"],
		input[type="button"] {
			padding: 10px;
			background-color: #4caf50;
			color: white;
			padding: 12px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 17px;
		}
		input[type="submit"]:hover {
			background-color: #45a049;
		}

		input[type="button"] {
			background-color: rgb(182, 174, 174);
		}

*****Complete Code*********

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>HTML Form</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<style>
		/* GLOBAL CSS START */
		*,
		*:before,
		*:after {
			box-sizing: border-box;
			font-family: sans-serif;
		}
		/* GLOBAL CSS END */

		.main-div {
			width: 90%;
			margin: auto;
			padding: 20px;
			border: 1px solid rgb(161, 148, 148);
			box-shadow: 10px 5px 10px rgb(128, 123, 123);
		}

		/* Input field text, email and select classes START */
		input,
		textarea {
			font-family: inherit;
			font-size: inherit;
		}

		input[type="text"],
		input[type="email"],
		select {
			margin: 8px;
			padding: 5px;
			box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
			border: solid 1px;
			border-radius: 4px;
		}

		select {
			padding: 10px;
			width: 46%;
		}
		/* Input field text, email and select classes END */

		/* Row and Col classes START */
		.row {
			padding: 10px;
			width: 100%;
			display: flex;
		}
		.col {
			width: 45%;
		}
		.col .control-label {
			display: inline-flex;
			font-weight: 600;
			width: 25%;
		}

		.col .control-label::after {
			content: ":";
		}
		/* Row and Col classes END */

		/* Custom Radio Button Classes START */
		.radio-control {
			position: relative;
			padding-left: 6%;
			cursor: pointer;
		}

		.radio-control input {
			opacity: 0;
		}
		.radio-control span {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 20px;
			background-color: #eee;
			border-radius: 50%;
			border: 1px solid gray;
		}

		.radio-control input:checked + span {
			background-color: #2196f3;
		}

		.radio-control span:after {
			content: "";
			position: absolute;
			top: 4px;
			left: 4px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: white;
			display: none;
		}

		.radio-control input:checked + span::after {
			display: block;
		}
		/*Custom Radio Button Classes END*/

		/*Custom Checkbox Classes START */

		.control-checkbox {
			position: relative;
			padding-left: 6%;
			cursor: pointer;
		}
		.control-checkbox input {
			opacity: 0;
		}
		.control-checkbox span {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 20px;
			background-color: #eee;
			border: 1px solid gray;
		}

		.control-checkbox input:checked + span {
			background-color: #2196f3;
		}
		.control-checkbox span::after {
			content: "";
			position: absolute;
			top: 4px;
			left: 6px;
			width: 5px;
			height: 10px;
			border: solid white;
			border-width: 0 3px 3px 0;
			transform: rotate(45deg);
			display: none;
		}
		.control-checkbox input:checked + span:after {
			display: block;
		}
		/*Custom Checkbox Classes END */

		/* Button CSS START */

		input[type="submit"],
		input[type="button"] {
			padding: 10px;
			background-color: #4caf50;
			color: white;
			padding: 12px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 17px;
		}
		input[type="submit"]:hover {
			background-color: #45a049;
		}

		input[type="button"] {
			background-color: rgb(182, 174, 174);
		}
		/* Button CSS END */

		/* Field Control CSS START for validation START */

		.field-control {
			display: inline-grid;
		}
		.field-control span {
			font-size: 12px;
			margin-left: 8px;
			color: red;
		}
		/* Field Control CSS START for validation END */
	</style>

	<body>
		<!-- Created a parent div with class main-div -->
		<div class="main-div">
			<h2>
				This is Sample Form with Pure CSS (with Customize Radio and Checkbox)
			</h2>
			<!-- Create a form  -->
			<form id="my-form">
				<!-- Create a div with class row and inside this create two div with class col -->
				<div class="row">
					<div class="col">
						<label class="control-label">First Name</label>
						<!-- Create a field-control div for input field and validation message -->
						<div class="field-control">
							<input
								type="text"
								name="fName"
								placeholder="First Name"
								required
								onblur="onFieldBlur(this)"
							/>
							<!-- Create a span tag with validation message. Initially it is display: none -->
							<span style="display: none">First Name is required</span>
						</div>
					</div>

					<div class="col">
						<label class="control-label">Last Name</label>
						<input type="text" name="lName" placeholder="Last Name" />
					</div>
				</div>
				<div class="row">
					<div class="col">
						<label class="control-label">Email Id</label>
						<div class="field-control">
							<input
								type="email"
								name="email"
								placeholder="Enter valid Email"
								required
								onblur="onFieldBlur(this)"
							/>
							<span style="display: none">Enter a valid email</span>
						</div>
					</div>

					<div class="col">
						<label class="control-label">Gender</label>
						<!-- Custom radio input - first create a label and inside this create input type radio -->
						<label class="radio-control"
							>Male
							<input type="radio" name="gender" value="Male" checked />
							<span></span>
						</label>
						<label class="radio-control"
							>Female
							<input type="radio" name="gender" value="Female" />
							<span></span>
						</label>
					</div>
				</div>

				<div class="row">
					<div class="col">
						<label class="control-label">Education</label>
						<select name="education">
							<option value="postGraduate">Post Graduate</option>
							<option value="graduate">Graduate</option>
							<option value="Intermediate">Intermediate</option>
							<option value="highschool">Highschool</option>
						</select>
					</div>

					<div class="col">
						<label class="control-label">Job Location</label>
						<!-- Custom checkbox input - first create a label and inside this create input type checkbox -->
						<label class="control-checkbox"
							>NCR
							<input type="checkbox" name="ncr" value="ncr" />
							<span></span>
						</label>
						<label class="control-checkbox"
							>Mumbai
							<input type="checkbox" name="mumbai" value="mumbai" />
							<span></span>
						</label>
						<label class="control-checkbox"
							>Bangalore
							<input type="checkbox" name="bangalore" value="bangalore" />
							<span></span>
						</label>
					</div>
				</div>

				<div class="row">
					<div>
						<input type="submit" value="Submit" onclick="onSubmit()" />
					</div>
					<div style="margin-left: 10px">
						<input type="button" onclick="onReset()" value="Reset" />
					</div>
				</div>
			</form>
		</div>
	</body>
	<script>
		/**
		 * Bind onFieldBlur where you want show validation message
		 */
		onFieldBlur = (e) => {
			// check field validity
			if (!e.checkValidity()) {
				e.nextElementSibling.style = { display: "block" };
				e.style.border = "solid 1px red";
			} else {
				e.nextElementSibling.style.display = "none";
				e.style.border = "solid 1px black";
			}
		};
		onSubmit = ($event) => {
			alert("submitted");
			return false;
		};

		onReset = () => {
			alert("Reset");
		};
	</script>
</html>

Complete Code –
https://stackblitz.com/edit/html-form-with-pure-css-javascript?file=index.html

HTML advance Interview Questions and Answers for Experienced – Part 1

How to draw Canvas Image, Line & Circle With HTML & JavaScript

Top Interview Questions and Answer of HTML 5 Canvas

Leave a Reply

Your email address will not be published.