[Spring] 회원가입 화면 예시 폼
2024. 7. 19. 20:04ㆍWebBack/Spring
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
* { box-sizing:border-box; }
form {
width:400px;
height:600px;
display : flex;
flex-direction: column;
align-items:center;
position : absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%) ;
border: 1px solid rgb(89,117,196);
border-radius: 10px;
}
.input-field {
width: 300px;
height: 40px;
border : 1px solid rgb(89,117,196);
border-radius:5px;
padding: 0 10px;
margin-bottom: 10px;
}
label {
width:300px;
height:30px;
margin-top :4px;
}
button {
background-color: rgb(89,117,196);
color : white;
width:300px;
height:50px;
font-size: 17px;
border : none;
border-radius: 5px;
margin : 20px 0 30px 0;
}
.title {
font-size : 50px;
margin: 40px 0 30px 0;
}
.msg {
height: 30px;
text-align:center;
font-size:16px;
color:red;
margin-bottom: 20px;
}
.sns-chk {
margin-top : 5px;
}
</style>
<title>Register</title>
</head>
<body>
<form>
<div class="title">Register</div>
<div id="msg" class="msg"> </div>
<label for="">아이디</label>
<input class="input-field" type="text" name="id" placeholder="8~12자리의 영대소문자와 숫자 조합">
<label for="">비밀번호</label>
<input class="input-field" type="text" name="pwd" placeholder="8~12자리의 영대소문자와 숫자 조합">
<label for="">이름</label>
<input class="input-field" type="text" name="name" placeholder="홍길동">
<label for="">이메일</label>
<input class="input-field" type="text" name="email" placeholder="example@fastcampus.co.kr">
<label for="">생일</label>
<input class="input-field" type="text" name="birth" placeholder="2020/12/31">
<div class="sns-chk">
<label><input type="checkbox" name="sns" value="facebook"/>페이스북</label>
<label><input type="checkbox" name="sns" value="kakaotalk"/>카카오톡</label>
<label><input type="checkbox" name="sns" value="instagram"/>인스타그램</label>
</div>
<button>회원 가입</button>
</form>
<script>
function formCheck(frm) {
var msg ='';
if(frm.id.value.length<3) {
setMessage('id의 길이는 3이상이어야 합니다.', frm.id);
return false;
}
return true;
}
function setMessage(msg, element){
document.getElementById("msg").innerHTML = `<i class="fa fa-exclamation-circle"> ${msg}</i>`;
if(element) {
element.select();
}
}
</script>
</body>
</html>form에는 action="전송할 URL"과 method="get(디폴트값) or post"를 작성해야 입력된 값이 이동된다. Get은 Head가 있고 body는 없다. 그래서 입력한 값은 쿼리스트링을 통해 서버로 넘겨진다. action의 디폴트는 자기 자신이기 때문에 자신에게 다시 전송된다. input 태그에 넣은 name에 의해서 키의 이름이 정해진다.
참고로 label의 경우에는 모두 이름이 같아서 값만 다르고 이름이 같은 값이 넘어간다. 이럴 때에는 ${paramValues.이름[인덱스]}을 통해서 배열로 받을 수 있다.
그런데 입력을 제대로 하지 않아도 빈칸으로 값이 넘어간다. 이는 자바스크립트로 해결해야한다.
'WebBack > Spring' 카테고리의 다른 글
| [Spring] EL에서 템플릿 리터럴 인식시키기 (0) | 2024.07.20 |
|---|---|
| [Spring] HTML 파일 인코드 설정 변경 (0) | 2024.07.19 |
| [Spring] 리소스 불러올 때 URL 경로에 resources 빼는 방법 (0) | 2024.07.19 |
| [Spring] @ModelAttribute (0) | 2024.07.19 |
| [Spring] 한글 변환 필터 (0) | 2024.07.18 |