HTML form is created with the help of <form> </form> tag and within this tag you will have all the input elements for taking user input. Web Form or HTML form is very flexible and it can have many input fields of different types such as text field, password filed, radio button, combo box etc.
Below is the video tutorials. watch and practices
HTML forms are required to collect different kinds of user data inputs, such as contact information like name, email address, phone numbers and credit card information, etc.
Forms contain unique factors known as controls like inputbox, checkboxes, radio-buttons, submit buttons, and so on. Customers normally complete a form through enhancing its controls e.g. Entering textual content, choosing gadgets, and so forth. and submitting this form to a web server for further processing.
Neomorphism
Neomorphism, or Soft UI, is a visual style that mixes background colours, shapes, gradients, highlights, and shadows to make sure photograph severe buttons and switches. All that allows attaining a soft, extruded plastic look, and almost 3D styling. Neomorphism is a visual style that blends techniques from skeuomorphism, realism, and flat design.
Box-Shadow
You may like this:
- Sign Up and Login form with HTML and CSS
- Create Login form page with HTML and CSS
- Animated Search Bar with HTML and CSS
Source Code:
If you like this Neomorphism Login Form design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form | By Code Info</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-box">
<img src="images/icon.png" />
<h2>Member Login</h2>
<form>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button>Sign In</button>
</form>
<br />
<a href="#">Forgot Password?</a>
</div>
</body>
</html>
body {
background: rgb(214, 214, 214);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.login-box {
width: 350px;
height: 400px;
background: rgb(214, 214, 214);
margin: 150px auto;
border-radius: 10px;
box-shadow: 5px 5px 10px #b6a9a9, -5px -5px 10px #ffffff;
}
img {
width: 110px;
height: 110px;
position: relative;
top: -50px;
left: 35%;
}
h2 {
margin: -25px 0 20px 0;
text-align: center;
color: #8f8888;
}
form {
margin-left: 40px;
}
input {
display: block;
width: 80%;
margin-bottom: 20px;
padding: 10px;
border: none;
outline: none;
font-family: sans-serif;
background: transparent;
font-size: 16px;
border-radius: 25px;
text-shadow: 1px 1px 0 #fff;
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
}
button {
width: 87%;
border: none;
height: 35px;
border-radius: 25px;
background: rgb(82, 182, 221);
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: -5px -5px 20px rgb(224, 217, 217), 5px 5px 20px #babecc;
outline: none;
}
input:focus {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
button:active {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
a {
margin-left: 32%;
color: #8f8888;
font-size: 16px;
text-decoration: none;
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.