https://coder-jason.github.io/sign-up-form/
회원가입
coder-jason.github.io
회원가입 페이지를 만들어봤다.
우선
1.form 을 만들고
2.그 안에 input type 3개를 만들어서
각각 이름, 이메일, 비밀번호를 구성했다.
3.button을 이용해서 회원가입 버튼을 만들었다.
1.form 만들기
html body탭에
<form></form>을 만들어주고
css form에서
box shadow 만들어주면
박스 형태의 폼이 나타난다.
2. input type 3개 만들기
html form 탭 안에 input type 3개 넣어주기.
placeholder는 어떤 문자를 입력하기 전까지 설정한 이름을 고정으로 나타내줌.
required를 설정해주면 꼭 입력해야하는 정보임. 입력안하면 안넘어가짐.
input type에서 email은 이메일 형식으로 써줘야만 넘어가짐.
input type ="password"는 비밀번호란에 입력시 자동으로 가려줌.
button type은 submit으로 해줬는데 회원가입을 위한 것임.
* 마지막 보너스
비밀번호 입력시 비밀번호 자리수에 따라서 위험하고 안전한 정도를 나타냄
(github에서 퍼옴)
이 분꺼 코드 다운로드 해와서
class name 이용해서 css에서 조금만 바꿔봄.
github.com/mariusschulz/jQuery.passwordStrength
mariusschulz/jQuery.passwordStrength
jQuery.passwordStrength is a small jQuery plugin that visualizes the strength of a password entered into an input field. - mariusschulz/jQuery.passwordStrength
github.com
전체코드
html
<!DOCTYPE html>
<html>
<head>
<title>회원가입</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.passwordstrength.js"></script>
</head>
<body>
<form>
<img src="user.jpg">
<div class="input-box">
<span><i class="fa fa-user-o"></i></span>
<input type="text" placeholder="이름" required>
</div>
<div class="input-box">
<span><i class="fa fa-envelope-o"></i></span>
<input type="email" placeholder="이메일" required>
</div>
<div class="input-box">
<span><i class="fa fa-key"></i></span>
<input type="password" id="password" placeholder="비밀번호" required>
</div>
<button type="submit"><i class="fa fa-sign-in"></i>회원가입</button>
</form>
<script type="text/javascript">
$(function() {
$("#password").passwordStrength();
});
</script>
</body>
</html>css
body
{
background: #54f570;
}
form
{
width: 500px;
height: 200px;
text-align: center;
box-shadow: 0 20px 40px;
margin: 150px auto;
padding: 100px;
}
form .input-box
{
margin: 10px 0px 30px 0px;
}
.input-box
{
margin-top: 30px auto;
width: 90%;
position: relative;
box-shadow: 26px 8px 10px -8px;
}
.input-box input
{
width: 100%;
height: 40px;
border: none;
background: #efefef;
padding-left: 50px;
}
span
{
position: absolute;
left: 0;
top: 0;
height: 40px;
width: 40px;
background: linear-gradient(to right, purple, gray);
}
span .fa
{
padding: 11px;
color: white;
}
button
{
width: 130px;
height: 40px;
display: block;
border: 0;
font-size: 16px;
outline: none;
background: linear-gradient(to right, purple, gray);
color: white;
cursor: pointer;
}
button .fa
{
margin-right: 10px;
}
form img
{
width: 100px;
height: 100px;
clip-path: circle(50%);
margin: -150px -50px;
position: absolute;
}
.password-strength-indicator
{
font-size: 12px;
display: inline-block;
height: 15px;
min-width: 20%;
text-align: center;
transition: 1s;
margin: 50px 0;
color: white;
}
.password-strength-indicator.very-weak
{
background: red;
width: 20%;
}
.password-strength-indicator.weak
{
background: orange;
width: 40%;
}
.password-strength-indicator.mediocre
{
background: yellow;
width: 60%;
}
.password-strength-indicator.strong
{
background: green;
width: 80%;
}
.password-strength-indicator.very-strong
{
background: blue;
width: 110%;
}'페이지 만들기' 카테고리의 다른 글
| 카드 뒤집기 연습 (0) | 2020.08.31 |
|---|---|
| 비전공자 - 페이지 만들기 (ft 요리 레시피) (0) | 2020.08.30 |
| 비전공자 - 웹페이지 만들기(ft 토트넘 프로필) (0) | 2020.08.29 |
| 비전공자 - 영화페이지 만들기 (ft 영화 Begin Aagin) (0) | 2020.08.28 |
