01. 회원가입 html form 잡기

1. form태그로 회원가입 양식 감싸는 폼 잡기

• <form name="join_form" id="join_form"> ... </form>

2. 그 안에 회원가입 양식 종류대로 작성

• <input> type : text, password

  아이디, 비밀번호, 비밀번호 확인, 이름, 이메일, 연락처
  div.form-group > ( label > span, div > input )

2-1.아이디

<div class="form-group">
  
	<label for="user_id">
      아이디 <span class="identify">*</span>
    </label>
  
	<div>
		<input type="text" name="user_id" id="user_id"/>
	</div>
  
</div>

2-2.비밀번호, 비밀번호 확인

<div class="form-group">
	<label for="user_pw">
      비밀번호 <span class="identify">*</span>
  	</label>
	<div>
      <input type="password" name="user_pw" id="user_pw" />
  	</div>
</div>

<div class="form-group">
  	<label for="user_pw">
      비밀번호 확인 <span class="identify">*</span>
  	</label>
	<div>
      <input type="password" name="user_pw_re" id="user_pw_re" />
  	</div>
</div>

2-3.이름

<div class="form-group">
  
	<label for="user_name">
      이름 <span class="identify">*</span>
    </label>
  
	<div>
		<input type="text" name="user_name" id="user_name"/>
	</div>
  
</div>

2-4.이메일

<div class="form-group">
  
	<label for="email">
      이메일 <span class="identify">*</span>
    </label>
  
	<div>
		<input type="text" name="email" id="email"/>
	</div>
  
</div>

2-5.연락처

<div class="form-group">
  
	<label for="tel">
      연락처 <span class="identify">*</span>
    </label>
  
	<div>
		<input type="text" name="tel" id="tel"/>
	</div>
  
</div>

• <input> type : radio, checkbox

  성별, 수강과목
  div.form-group > ( label > span, div > label > input )

2-6.성별

<div class="form-group">
  
  	<label for="gender1">
      성별 <span class="identify">*</span>
  	</label>
  
	<div>
      <label>
        <input type="radio" name="gender" id="gender1" value="M" />
        남자
      </label>
      <label>
        <input type="radio" name="gender" id="gender2" value="F" />
        여자
      </label>
	</div>
  
</div>

2-7.수강과목

<div class="form-group">
  <label for="gender1">
    수강과목<span class="identify">*</span>
  </label>
  <div>
    <label>
      <input type="checkbox" name="subject" id="subject1" value="html">
      HTML
    </label>
    <label>
      <input type="checkbox" name="subject" id="subject2" value="css">
      CSS
    </label>
    <label>
      <input type="checkbox" name="subject" id="subject3" value="javascript">
      JAVASCRIPT
    </label>
    <label>
      <input type="checkbox" name="subject" id="subject4" value="jquery">
      jQuery
    </label>
    <label>
      <input type="checkbox" name="subject" id="subject5" value="php">
      PHP
    </label>
  </div>
</div>

3. 가입하기, 다시 작성 버튼

• <button> type : submit,reset

• button의 기본값이 submit 이기때문에 <button></button>해도 문제없음.
• reset은 버튼을 감싸고 있는 form 데이터의 값을 초기화시킨다.
  div.form-group > ( div > button )

<div class="form-group">
  <div>
    <button type="submit">가입하기</button>	
    <button type="reset">다시 작성</button>
  </div>
</div>

4. 최종 html 회원가입 양식 폼