[웹페이지 제작 #1] 회원가입-(1) html 페이지 만들기

제가 만드는 환경입니다.

bitnami로 apache(web server)+php+mysql(database) 사용

atom text editor

w3schools.com 참고

짧게 핵심만을 전달하는 것에 중점을 두었습니닷

회원가입-(1) html 페이지 만들기

1. 구상

---

웹페이지의 가장 기본인.. 이것만 하면 다인.. 회원가입+로그인 부분입니다.

회원가입 시 필요한 정보들을 추려냅니다. 

간단하게 이름, 비밀번호, 아이디..만 해도 되겠지만 html과 css를 연습하는 단계이기 때문에 비주얼적으로!! 쓸데없더라도 최대한 많은 정보를 쓰도록 해보겠습니다.

*이름/*ID/*비밀번호(●●●으로 보이도록)/*비밀번호확인/생일(달력 클릭 이용)/이메일(~@~형식)/전화번호(~-~ 형식)/좋아하는 색깔(color picker)/관심 분야(체크박스)/성별(라디오버튼)/홈페이지(url)

*는 반드시 입력해야 하는 항목이고, 비밀번호 확인 및 아이디 중복체크 등의 부분은 javascript로 따로 하겠습니다

+) type="tel" is only supported in Safari 8 and newer versions. 

    type="url" is not supported in IE9 and earlier versions.

라고 합니다.

2. 구현

---

register.html

<form> <h1>회원 가입</h1> <br />이름 <input type="text" id="Name" value="이름을 입력하세요" required> <br />ID <input type="text" id="Id" required> <br />PW <input type="password" id="Pw" required> <br />PW 확인 <input type="password" id="PwCheck" required> <br />이메일<input type="email" name="Email"> <br />성별 <input type="radio" name="gender" value="male" checked>남자 <input type="radio" name="gender" value="female">여자 <input type="radio" name="gender" value="other">그외 <br />전화번호<input type="tel" name="Tel"> <br />홈페이지<input type="url" name="Homepage"> <br />생일<input type="date" name="Bd"> <br />좋아하는 색깔 <input type="color" name="Color" value="#000000"> <br />관심분야 <br /><input type="checkbox" id="interest1" value="Economy">경제 <input type="checkbox" id="interest2" value="IT">IT <input type="checkbox" id="interest3" value="Society">사회 <input type="checkbox" id="interest4" value="Science">과학 <input type="checkbox" id="interest5" value="Music">음악 <input type="checkbox" id="interest6" value="Art">미술 <br /><br /> <input type="submit" value="확인"> <input type="reset" value="취소"> </form><p><br /></p>

body 부분입니다.

html 결과 화면입니다. 굉장히 1차원적인 모습입니다. 

밑으로는 type 적용내용에 대해 하나씩 알아보도록 하겠습니다.

---

required로 설정한 부분을 작성하지 않았을 때의 모습입니다.

위에 비밀번호 항목이 type="password" 설정하므로써 제대로 나타나는 것을 알 수 있습니다.

type="radio" 된 모습도 성별 부분에 나타나 있습니다. checked 되어있는 남자 부분이 기본값으로 설정되어 있습니다.

이름 부분에, 위에 value로 설정한 값이 인풋 박스에 들어가 있는 것을 알 수 있는데요, 이렇게 value를 미리 넣어주게 되면 이름이 required 된 상태에서, 실질적으로 사용자가 입력한 값이 없는데도 submit이 되어버립니다. 다음 포스팅에서부터 제대로 고치도록 하겠습니다 ㅠ;

type="email" 설정한 모습입니다.

type="url" 설정한 모습입니다. .com과 같이 붙으면 통과되는 방식입니다.

(헌데 저는.. 왜인지 안되더라구요 웹 브라우저 때문인지..)

type="date" 설정한 모습입니다.

w3schools에 보면 week, time 등 시간과 관련하여 다양한 input을 볼 수 있습니다.

http://www.w3schools.com/html/html_form_input_types.asp

type="color" 설정한 모습입니다. 색을 고를 수 있습니다.

UI는 이런 형태 외에도 검색하면! 다양하게 나타납니다.

하단의 확인/취소는 php로 제출, 이동/적은 값 초기화의 기능을 가집니다.

각각 type="submit", type="reset" 입니다.

type="checkbox"입니다.

----

부족하지만 읽어주셔서 감사합니다.. 차후에

회원가입(2)는 css, (3)은 간단한 DB 사용, (4)는 javascript 적용, (5)는 php를 이용하여 서버 db에 값 전송

을 목표로 하고 있습니다. 차후 다듬어나가는 과정에서 바뀔 수도 있을 것 같아요! (3)의 경우 데이터베이스 부분과 겹쳐서 다른 부분과 합쳐지거나..