[HTML] 회원가입

- id = " "는 JavaScript나 jQuery 접근 시 주로 사용된다.

- name = " "은 backend에서 접근 시 주로 사용된다.

---

회원가입

<h3>회/원/가/입</h3>
<form id="A" name="A">
    이름 : 
    <input type="text" name="username" id="username" autofocus>
    <hr>
    
    아이디 : 
    <input type="text" 
          name="userid"
          id="userid"
          size="10"							
          maxlength="5" 		
          placeholder="ID"		
          required> 			
    <input type="button" value="중복확인">
    <hr>
    
    비밀번호 : 
    <input type="password"
           name="userpw"
           id="userpw"
           size="12"
           maxlength="12"
           placeholder="PASSWORD"
           required>
    <hr>
     
    우편번호 : 
    <input type="text" size="5" readonly>	<!-- readonly는 커서가 못 들어감 -->
    <input type="button" value="주소찾기"><br>
    
    나머지 주소 : 
    <input type="text">
    <hr>
    
    나이 : 
    <input type="radio" name="age" value="10"> 10대
    <input type="radio" name="age" value="20" checked> 20대
    <input type="radio" name="age" value="30"> 30대<br>
    <!-- name=""에 같은 것을 넣으면 같은 그룹으로 인식하여 중복선택불가 -->
    
    성별 : 
    <input type="radio" name="gender" value="male"> 남
    <input type="radio" name="gender" value="female"> 여 <br>
    <!-- 백엔드에서는 벨류값이 없으면 모르기 때문에 벨류값을 넣는다. -->
    
    취미 : 
    <input type="checkbox" id="movie" name="movie" value="movie"> 영화
    <input type="checkbox" id="cook" name="cook" value="cook"> 요리
    <input type="checkbox" id="travel" name="travel" value="travel"> 여행 <br>
</form>

 

- autofocus : 자동으로 커서가 미리 들어가있는 경우

- required : 해당 input을 입력하지 않고 제출할 경우, 경고창 팝업

- size : 텍스트 상자의 크기

- maxlength : 최대 글자수

- placeholder : 텍스트 입력 전 보이는 글씨

- readonly : 커서가 안나타나는 기능

- "radio"의 경우, name = " "에 같은 단어를 넣으면 같은 그룹으로 인식하여 중복선택불가

- backend에서는 value값이 없으면 모르기 때문에, value값을 삽입

---

여는태그와 닫는태그가 있는 폼 컨트롤 요소

<form id="myform" name="myform">
    <button>버튼1</button>
    <hr>
    
    생년월일 : 
    <select name="birthday" id="birthday">
        <option value="2021">2021년</option>
        <option value="2022">2022년</option>
        <option value="2023" selected>2023년</option>
    </select>
    
    <select name="month" id="month" multiple>
        <option value="April">4월</option>
        <option value="May">5월</option>
        <option value="June">6월</option>
        <option value="July">7월</option>
        <option value="August">8월</option>
    </select>
    <hr>
    
    배송메세지 : <br>
    <textarea col="50" rows="3" maxlength="200" placeholder="200자이내로 입력해주세요">
    </textarea>
    <hr>
    
    <input type="submit" value="전송">
    <input type="reset" value="취소">
</form>

 

- multiple = 다중선택기능 / ctrl + 클릭

- submit = <form id="myform" name="myform">이 서버로 전송된다.