HTML 및 CSS를 사용한 간단한 로그인 양식
로그인 양식은 승인된 사용자가 전체 사이트 또는 웹사이트 일부에 액세스할 수 있도록 하는 웹사이트 또는 앱의 가장 중요한 구성 요소 중 하나입니다. 웹 사이트를 방문했을 때 이미 보았을 것입니다. 그것을 만들기 위해 머리하자
가입 양식이든 로그인 양식이든 눈에 잘 띄고 사용자 친화적이며 사용하기 쉬워야 합니다. 이러한 유형의 양식은 판매 증가, 리드 생성 및 고객 성장으로 이어집니다.
데모
Click 데모 보기!
HTML CSS(소스 코드)를 사용한 간단한 로그인 양식
HTML 코드
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="styledfer.css">
</head>
<body>
<div id="login-form-wrap">
<h2>Login</h2>
<form id="login-form">
<p>
<input type="email" id="email" name="email" placeholder="Email " required><i class="validation"><span></span><span></span></i>
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i>
</p>
<p>
<input type="submit" id="login" value="Login">
</p>
</form>
<div id="create-account-wrap">
<p>Don't have an accout? <a href="#">Create One</a><p>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js'></script>
</body>
</html>
CSS 코드
body {
background-color: #020202;
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #2b3e51;
}
h2 {
font-weight: 300;
text-align: center;
}
p {
position: relative;
}
a,
a:link,
a:visited,
a:active {
color: #ff9100;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a:focus, a:hover,
a:link:focus,
a:link:hover,
a:visited:focus,
a:visited:hover,
a:active:focus,
a:active:hover {
color: #ff9f22;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#login-form-wrap {
background-color: #fff;
width: 16em;
margin: 30px auto;
text-align: center;
padding: 20px 0 0 0;
border-radius: 4px;
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
}
#login-form {
padding: 0 60px;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
outline: none;
height: 60px;
line-height: 60px;
border-radius: 4px;
}
#email,
#password {
width: 100%;
padding: 0 0 0 10px;
margin: 0;
color: #8a8b8e;
border: 1px solid #c2c0ca;
font-style: normal;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: inline-block;
background: none;
}
#email:focus,
#password:focus {
border-color: #3ca9e2;
}
#email:focus:invalid,
#password:focus:invalid {
color: #cc1e2b;
border-color: #cc1e2b;
}
#email:valid ~ .validation,
#password:valid ~ .validation
{
display: block;
border-color: #0C0;
}
#email:valid ~ .validation span,
#password:valid ~ .validation span{
background: #0C0;
position: absolute;
border-radius: 6px;
}
#email:valid ~ .validation span:first-child,
#password:valid ~ .validation span:first-child{
top: 30px;
left: 14px;
width: 20px;
height: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#email:valid ~ .validation span:last-child
#password:valid ~ .validation span:last-child
{
top: 35px;
left: 8px;
width: 11px;
height: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.validation {
display: none;
position: absolute;
content: " ";
height: 60px;
width: 30px;
right: 15px;
top: 0px;
}
input[type="submit"] {
border: none;
display: block;
background-color: #ff9100;
color: #fff;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
font-size: 18px;
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
}
input[type="submit"]:hover {
background-color: #ff9b17;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#create-account-wrap {
background-color: #eeedf1;
color: #8a8b8e;
font-size: 14px;
width: 100%;
padding: 10px 0;
border-radius: 0 0 4px 4px;
}
축하합니다! 이제 HTML 및 CSS를 사용하여 간단한 로그인 양식을 성공적으로 만들었습니다.
잠깐, 다른 놀라운 CSS 및 Javascript 자습서를 살펴보십시오.
Random Password Generator using Javascript
고맙습니다!
Reference
이 문제에 관하여(HTML 및 CSS를 사용한 간단한 로그인 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codewithayan/simple-login-form-using-html-and-css-3g14텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
