유효성검사로 회원가입 페이지 구현하기(1)

제이쿼리에 js파일을 이용하여 간단한 회원가입 페이지를 구현해 보려고 합니다.

먼저 오늘은 html5와 CSS를 이용하여 기본 골격을 구성해 보도록 하겠습니다.

회원가입에 들어갈 양식은 form태그 안에 위치하게 구성하고 적당한 클래스값을 줍니다.

보통 회원가입 페이지에 들어가는 양식에 비슷하게 하기 위해 "아이디" "비밀번호" "비밀번호확인" "이름" "이메일" "연락처"로 만들겠습니다.

각 div태그를 만들고 안에 라벨을 이용하여 입력창을 만들어 줍니다.

그럼 어떻게 만들어 졌는지 확인해 보겠습니다.

이제 기본 틀이 만들어 졌으니 안에 내용물 좀 넣어 보겠습니다.

input으로 각 양식의 입력창에 맞는 값(비밀번호의 경우 input에 "password"값을 줘야 문자 입력시 ***으로 표시됩니다.)을 주고 적당한 name과 id값을 줍니다.

maxlength으로 최대 입력 가능한 글자의 수를 지정해 제한을 주고, placeholder로 문자 입력전 입력창에 표시될 글자를 넣어줍니다.

      

다시 실행해 보니 위와 같이 페이지가 구현되었습니다.

각 입력창에 placeholder를 사용해 넣어준 기본 문구가 표시되고 입력시 사라집니다. 

또한 비밀번호의 경우 가림 처리가 적용되었고, maxlength를 이용해 최대 입력값을 넣어준 만큼 문자가 입력됩니다.

이제 CSS를 이용해 간단한 디자인을 꾸며 보겠습니다.

먼저 각 클래스값에서 width로 적당한 넓이를 주고 margin으로 중앙에 위치하게 합니다.

패딩을 이용하여 간격을 주고 float로 양식과 입력창의 위치를 설정해 줍니다.

마지막으로 font로 적당한 글자 스타일과 크기를 지정해 주면 다음과 같이 페이지가 구성됩니다.

다음과 같이 페이지가 구현되었다.

조금씩 가입페이지가 완성되가는군요, 이제 다시 input을 이용하여 아래 위치할 선택창을 만들어 보겠습니다.

input값에 체크박스를 주고 적당한 밸류값과(1을 줘도 상관없습니다.) 아이디값을 줍니다.

그리고 아래와 같이 클래스값과 화면에 표시될 "선택"이나 "필수"등 글자를 넣어줍니다.

다시 페이지를 열어 보겠습니다.

이제 필수 입력창인 아이디~연락처 앞에 별표를 표시해 필수 입력창 처럼 표현한 후 CSS를 이용해 체크 창을 꾸며보겠습니다.

먼저 다음과 같이 스판 태크를 각 항목에 넣어준 후 적당한 클래스 값을 줍니다.

그리고 리스트스타일을 none으로 처리해 앞에 있는 검정색 포인트를 없애고 폰트사이즈로 적당한 글자 크기를 지정해 줍니다.

width로 적당한 넓이를 주고 float를 이용해 위치를 고정 한 후 특정 문자의 컬러를 주고 패딩으로 다음에 위치할 녀석과 간격을 주면~

위와 같이 페이지가 구현되었군요,

그럼 다음 리뷰 때 가입 버튼과 js를 이용해 유효성 검사를 구현해 보도록 하겠습니다^^