HTML+CSS 기초 강의 - 20. 폼만들기 기초 9 - 로그인폼 만들기
간단한 로그인 폼을 만들어 보면서 폼을 어떤 방식으로 만드는지 간단하게 알아보겠습니다.
CSS 학습의 영역은 아니기 때문에 CSS와 관련된 부분들은 제외를 하고 순수하게 폼을 만드는 과정만 살펴보도록 하겠습니다.
먼저 미리 만들어진 간단한 폼을 보겠습니다.
<form method="post" id="authForm" action="https://www.tistory.com/auth/login"> <div> <label for="loginId">아이디</label> <input type="email" id="loginId" name="loginId" placeholder="ID" > <label for="loginPw">비밀번호</label> <input type="password" id="loginPw" name="password" placeholder="Password" > </div> <button type="submit" disabled="disabled">로그인</button> <div> <input type="checkbox" id="keepLogin" name="keepLogin"> <label for="keepLogin"><span>로그인 상태 유지</span></label> </div></form>
아주 간단한 완성된 로그인 폼을 불필요한 부분들을 모두 잘라낸 모습니다.
눈치채셨을지도 모르겠지만 티스토리 로그인 폼입니다.
티스토리 로그인 폼을 이용해 간단하게 폼을 만드는 방법을 알아보겠습니다.
레이아웃을 잡는데 필요한 <div> 태그들과 클래스(class) 정의들을 모두 걷어내고 폼과 관련있는 부분들만 남기면 위와 같은 아주 간단한 폼이 됩니다.
하나씩 살펴보겠습니다.
<form> 태그를 보면 메써드(method)는 post 로 전송합니다.
보안에 민감한 로그인 정보를 get 방식으로 전송하면 아이디나 패스워드가 쿼리스트링으로 다 노출되기 때문에 반드시 post 방식으로 해야 합니다.
action 은 로그인 아이디 패스워드 정보를 넘겨받아 로그인 처리를 하는 url 입니다.
그리고 id 값이 정의되어 있습니다. 폼 전송이 되기 전 자바스크립트로 아이디, 패스워드를 입력했는지 확인하고 전송하는 전처리 과정이 있기 때문에 폼 제어를 위해 id 값은 반드시 있어야 합니다.
이 폼에서는 name은 빠졌지만 폼 작성시 id, name, method, action 네가지 속성은 필수 입니다.
그리고 파일이나 이미지 업로드가 필요한 폼에서는 enctype="multipart/form-data" 를 추가로 사용해야 한다는 점을 꼭 기억해야 합니다.
속성들을 갖춰서 폼을 만들면 아래같은 폼의 형태를 가지게 됩니다.
<form method="post" id="authForm" name="authForm" action="./uploadproc" enctype="multipart/form-data"></form>
<div> 태그들은 영역을 구분하기 위해 묶음? 용도로 사용한 것이므로 넘어갑니다.
그 다음으로 아이디와 패스워드를 입력하는 입력필드 2개가 있습니다.
마찬가지로 type, id, name, placeholder 는 필수로 사용합니다.
placeholder는 입력 필드에 필수 사항은 아니지만, 사용자 편의성에서 중요하기 때문에 입력 필드에는 꼭 사용할 것을 권장합니다.
주의할 점이 있습니다.
티스토리의 경우 이메일로 회원가입을 하기 때문에 아디디가 이메일 주소가 됩니다.
때문에 ID에 사용하는 필드의 타입이 "email" 로 되어 있습니다.
일반적인 경우라면 type 이 "text" 여야 합니다.
<input type="text" id="loginId" name="loginId" value="" placeholder="ID" >
이렇게 입력 폼 요소를 작성하는 것일 일반적입니다.
그리고, 각 입력 요소가 어떤 요소인지 표시를 해주는 텍스트를 왼쪽에 표시를 해줘야 합니다.
일반 텍스트라면 <span></span> 태그를 붙여주면 되겠지만, 폼 필드는 기본적으로 <label></label> 태그를 이용해 표시를 해줍니다.
실무에서는 반드시 <label> 태그를 사용하는 것이 원칙이므로 초보자라면 <label> 태그를 사용하는 습관을 들이는 것이 좋습니다.
폼 필드와 함께 쌍으로 묶어서 사용하는 라벨(<label>) 태그에는 속성으로 "for" 가 사용됩니다.
이 라벨은 어떤 폼 요소를 위한 것이다. 라고 명시적으로 알려주는 뭐 그런 용도입니다.
속성값으로는 폼 요소의 ID를 사용합니다.
<label> 태그 전용 속성값입니다. <output> 태그에도 "for" 속성을 사용하지만, <output> 태그가 거의 사용하지 않는 죽은 태그이기 때문에 "for" 속성은 <label> 태그에만 사용하는 속성이라고 보면 됩니다.
가끔 "for" 속성의 정확한 용도를 몰라서 있으나 마나한 이 속성을 왜 쓰는지 궁금해 하는 경우가 있습니다.
먼자 <label> 태그를 앞서 만든 로그인 아이디 입력 입력 요소에 붙입니다. "for" 속성값으로 "loginId" 를 주면 로그인ID 입력 요소 한정으로 라벨이 정의됩니다. 텍스트 내용으로는 "아이디"를 입력합니다.<label for="loginId">아이디</label><input type="text" id="loginId" name="loginId" value="" placeholder="ID" >그리고 웹브라우저에서 이 코드를 띄운 후(아니면 위의 완성된 폼을 html 파일로 저장해 띄워도 됩니다.)"아이디" 텍스트를 마우스로 클릭합니다.ID 입력 요소에 포커스가 가면서 입력 커서가 깜빡거리는게 보일겁니다."for" 속성이 하는 역할이 바로 이것입니다. <label> 태그의 텍스트를 특정 입력 요소에 종속되도록 해서 텍스트를 클릭하면 해당 입력 요소와 연동되어 동작하도록 해주는 기능을 합니다.동일한 방법으로 패스워드 입력 요소도 만들어 붙입니다.아이디와 패스워드 입력 요소는 다 만들었으므로 이제 입력한 아이디와 패스워드를 담은 폼을 전송하는 기능을 하는 "로그인" 버튼을 만듭니다.위 로그인 폼 예를 보면 <button type="submit" disabled="disabled">로그인</button> 이런 로그인 버튼이 있습니다.HTML5 에서는 disabled 속성은 별도의 속성 값 없이 disabled 속성 정의만으로 해당 요소를 미사용 상태로 만듭니다.따라서
<button type="submit" disabled>로그인</button>
이렇게 사용하는 것을 더 추천합니다.
disabled 속성이 로그인 버튼에 붙은게 이상할텐데, 실제 티스토리 로그인 화면에서는 아이디와 패스워드를 입력하면 로그인 버튼의 "disabled" 속성이 사라지고 클릭할 수 있는 상태가 됩니다. 물론 자바스크립트로 구현되는 기능이기 때문에 이 강의에서는 이런 부분까지는 알아보지는 않습니다.
이렇게 로그인 폼을 만드는 이유는 이용자가 불필요한 액션(예를 들면 아이디, 패스워드 입력 없이 로그인 버튼을 클릭 한다던가 하는)을 아얘 차단함으로써 이용자에게 어떤 액션을 해야하는지 명확하게 해주는 효과가 있습니다.
일종의 이용자 편의, 또는 이용자 가이드와 같은 역할을 하는 것입니다. 물론 이런 기능을 위해서는 자바스크립트가 필요합니다.
초보 단계에서는 이런 것까지 고려하는 것은 너무 멀리 나가는 것이므로
<button type="submit">로그인</button>
이정도에서 만족해야 합니다.
이제 일정 시간이 지나면 보안을 위해 자동으로 로그아웃되도록 하는 사이트의 기본 룰을 무시하고 로그인한 이용자가 계속 로그인 되어있도록 해주는 옵션인 "로그인 상태 유지" 체크 박스를 만들어 붙입니다.
<input type="checkbox" id="keepLogin" name="keepLogin">
<label for="keepLogin"><span>로그인 상태 유지</span></label>
"for" 속성에 대해서는 위에서 이미 배웠습니다.
체크박스도 동일하게 체크박스와 텍스트가 연동되어 동작합니다.
<label></label> 태그 안의 텍스트를 클릭하면 체크박스가 체크되거나 해제 됩니다.
이렇게 간단하게 폼을 만들어 봤습니다.
완성한 위 예제는 아래와 같은 조금은 볼품없는 모양의 폼으로 웹브라우저에 표시됩니다.
실제로는 이렇게 만들어진 폼에 여러가지 것들이 더 붙게 됩니다.
로그인 후 되돌아가는 페이지 값을 담는 히든 필드가 아래처럼 추가로 붙게되고
<input type="hidden" name="redirectUrl" value="https://apost.dev/manage">
레이아웃을 위한 수많은 클래스(class) 정의가 태그와 <div> 태그에 붙게 됩니다.
최종적으로는 아래와 같은 티스토리 로그인에 실제로 사용하는 로그인 폼이 완성됩니다.
<form method="post" id="authForm" action="https://www.tistory.com/auth/login"> <input type="hidden" name="redirectUrl" value="https://apost.dev/manage"> <fieldset> <legend class="screen_out">로그인 정보 입력폼</legend> <div class="box_login"> <div class="inp_text"> <label for="loginId" class="screen_out">아이디</label> <input type="email" id="loginId" name="loginId" placeholder="ID" > </div> <div class="inp_text"> <label for="loginPw" class="screen_out">비밀번호</label> <input type="password" id="loginPw" name="password" placeholder="Password" > </div> </div> <button type="submit" class="btn_login" disabled>로그인</button> <div class="login_append"> <div class="inp_chk"> <!-- 체크시 checked 추가 --> <input type="checkbox" id="keepLogin" class="inp_radio" name="keepLogin"> <label for="keepLogin" class="lab_g"><span class="img_top ico_check"></span><span class="txt_lab">로그인 상태 유지</span> </label> </div> <span class="txt_find"> <a href="/member/find/loginId" class="link_find">아이디</a> / <a href="/member/find/password" class="link_find">비밀번호 찾기</a> </span> </div> </fieldset> </form>
그리고 이렇게 CSS까지 예쁘게 입힌 폼은 아래와 같은 모습이 되게 됩니다.
갈길이 좀 멀어보이나요?
하지만 위에서 만들어본 볼품없는 폼도 기능적으로는 동일하게 동작합니다.
나중에 CSS를 배우면서 레이아웃을 입히게 되면 이런 멀쩡한? 로그인 화면을 만들 수 있게 됩니다.
여기서는 폼의 기능적인 부분의 구현에만 신경을 쓰면 됩니다.
- 2019-12-16 추가
위 데모 로그인 폼은 티스토리 로그인 폼입니다.
그대로 구현하기에는 CSS양이 너무 많아져서 일부 생략된 부분을 제외한 나머지를 첨부파일로 첨부합니다.
체크박스 같은 경우는 티스토리는 이미지로 구현을 했기 때문에 제외하고 CSS파일을 첨부했으므로 다운로드받아 참고삼아 보시기 바랍니다.