8주 : html, css언어 : 폼(form)태그, lable, input, button

< form >

여러 입력 양식을 하나로 묶어주는 태그. 예를들어 로그인이나 회원가입
배송지 입력과 같은 다양한 입력양식들을 묶어서 서버로 보내는 태그이다.
form태그에는 서버에 내용을 보내기 위해 다양한 속성들을 함께 사용한다.
form태그는 block속성을 가진다.

  [속성]
  - name: 폼 양식의 이름을 지정한다. 한 문서안에 여러개의 form태그가 있을 경우
          폼들을 구분하기 위해 사용한다. class이름 짓듯이 지으면 된다.
  
  - action : 입력데이터들의 전달 위치를 지정한다. 보통 서버주소가 들어가고, 만약
            서버가 준비되지 않았다면 #(임시경로)를 넣는다.
  
  - method : 입력 데이터를 전달하는 방식.
  1. get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시되고, 
                      256~4096byte까지의 데이터만 서버로 전송할 수 있다.
                      보안에 취약하고 서버 전송속도가 굉장히 빠르다.
                      보통 광고성 수신문자같은 내용을 보낼때 사용한다.
  2. post★ : 대부분의 방식에 사용되며 사용자의 입력을 표준입력으로 전송하여
            입력 내용 길이에 제한받지 않고 사용자가 입력한 내용을 주소표시줄에
            노출하지 않는다.

  [기본형]
  <form name="폼이름" action="서버주소" method="post" id="아이디값">
    입력양식들
  </form>
  

< label >

폼 요소에 레이블(이름표)을 붙일때 사용하는 태그이다. input태그끼리 서로 구분하는 용도로 사용된다. for속성은 해당 폼요소를 서버로 넘길때 어떤 input과 세트인지 알려주는 역할을 한다. 또한 브라우저에서 세트인 input을 구별할때도 사용한다. 이때 for에 붙인 이름과 input에 있는 name속성값이 동일해야한다. lable태그는 inline속성이다.

  [기본형]
  1. <label for="폼요소 이름">
      레이블 텍스트(폼요소 이름)
      <input type="값" name="폼요소 이름"/>
    </label>

  2. <label for="폼요소 이름">레이블 텍스트(폼요소 이름)</label>
     <input type="값" name="폼요소 이름"/>
     
     <form>
  <!-- 폼요소와 레이블 연결 -->
  <label for="user_id">
  아이디<input type="text" name="user_id" id="user_id" />
  </label>

  <label for="user_name">이름</label>
  <input type="text" name="user_name" id="user_name" />
</form>

< fieldset >,< legend >

  form 양식을 만들때 각 요소들을 그룹으로 묶어주는 <fieldset>태그와
  해당 영역의 이름을 붙여주는 <legend>태그가 있다. 
  예를 들어 쇼핑몰 사이트의 주문서 양식을 만들때 작성하는 폼에서
  '사용자 정보'와 '배송지 정보'를 구분해 표시하면 입력하기 편하고
  깔끔하게 정리할 수 있다.

  [기본형]
  <fieldset>
    <legend>사용자 정보</legend>
  </fieldset>
  
  <form action="#">
  <!-- 사용자 정보 -->
  <fieldset>
    <legend>주문자 정보</legend>
    <!-- input과 label연결 -->
    <label for="user_info">성명</label>
    <input type="text" name="user_info" />
  </fieldset>

  <!-- 배송지 정보 -->
  <fieldset>
    <legend>받을 주소</legend>
    <!-- input과 label연결 -->
    <label for="address">주소</label>
    <input type="text" name="address" />
  </fieldset>
  

< input />

input태그는 사용자의 정보를 입력받기 위해 사용하는 태그로 type속성값에 의해 모양과 기능이 결정된다. input태그는 inline속성을 가지며, 박스형태의 type들은 inline-block속성을 가진다.

  [기본형]
  <input type='기능' name='폼요소의 이름(label과 연결)' id="아이디명"/>

  input의 type속성값
  --------------------------------------------
  1. type='hidden'
  : 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할때
    함께 전송되는 요소이다. 사용자가 알 필요는 없지만 관리자가 알아야하는
    내용이 있을 경우 사용한다.
  
  2. type='text'★
  : 가로로 짧은 글을 입력할때 사용하는 입력창. 아이디, 이름, 주소와 같은 
    내용을 입력받을때 사용한다. '텍스트 필드'라고도 한다.
  
  3. type='password'★
  : 텍스트필드와 모양은 같지만 사용자가 입력하면 특수문자로 나타난다.
    단, 패스워드 필드가 비밀번호 양식이 맞는지 확인해주지 않는다.
    단순히 글자를 특수기호로 바꾸는 역할만 한다.

  4. type='search'
  : 검색 필드를 만들때 사용한다. 예전에는 텍스트필드를 사용했지만 html5에서
    필드들이 세분화되면서 검색어를 입력할때 search를 사용할 수 있게 되었다.
    검색 키워드를 입력하면 키워드를 지울 수 있도록 x아이콘이 함께 표시된다.

  5. type="url"
  : 사용자로부터 웹 주소를 입력받을때 사용한다.

  6. type="email"★
  : 메일 주소를 입력할 경우 email필드를 사용하면 실제 폼 양식이
    동작했을 때 이메일 양식에 맞게 작성되었는지 브라우저 자체에서
    체크한다.

  7. type='tel'★
  : 사용자가 입력한 정보를 일반 텍스트가 아닌 전화번호로 인식하며
    바로 전화번호를 입력할 수 있도록 숫자 키패드를 보여준다.
    pc화면에서는 일반 텍스트 필드 형태로 보이지만 모바일 환경에서는
    숫자 키패드로 자동 전환되며 전화를 걸 수 있도록 해준다.
  
  8. type="number" min='최솟값' max='최댓값' step='증감값' value='초기값' ★
  : 숫자 생성 양식을 만들때 사용한다. min은 최솟값을 말하고 max는
    최댓값을 말한다. step은 증가하거나 감소하는 값으로 여기에 쓰인
    숫자만큼 증가하거나 감소한다.

  9. type='range' min='최솟값' max='최댓값' step='증감값' value='초기값'
  : 슬라이드 막대를 움직여 값을 입력하는 창. 

  10. type='radio' name='폼요소이름' checked
  : 라디오버튼은 짧은 항목에 대한 선택이 필요할 때 주로 활용되며
    반드시 한 가지 항목만 선택해야 할 때 사용한다. 
    라디오 필드에서는 name값이 같아야만 같은 그룹으로 인식하여
    한가지만 선택하게 만들 수 있다. checked속성을 사용하면 방문자의
    편의를 위해 미리 항목에 체크된 상태를 보여줄 수 있다.

  11. type="checkbox" checked ★
  : 체크박스는 여러 항목을 다중선택할때 주로 사용한다.
    라디오 버튼과 마찬가지로 checked속성을 이용하여 방문자의 편의
    를 높일 수 있다.

  12. type='color'
  : 색상 선택 양식을 만든다. 선택 시 색상 선택 화면이 나타나고
    색상을 선택할 수 있다.

  13. type='date'★ | type='month' | type='week' 
  : 생년월일과 같이 년/월/일에 대한 정보를 달력을 통해 선택할 수 있다.
    month는 월과 연도를 선택할 수 있고, week은 연도와 주를 선택할 수 있다.

  14. type='time' | type='datetime' | type='datetime-local'★
  : 시간을 지정할때 사용하는 type이다. 시간만 지정할 경우에는 time을 사용하고
    날짜와 시간을 함께 지정할 경우 datetime, datetime-local을 사용한다.

  15. type='submit' | type='reset'
  : 사용자가 입력폼에 입력한 내용을 서버로 전송할때 type='submit'을 이용할 수 있다.
    입력 내용을 초기화할때는 type='reset'을 이용한다. 둘 다 버튼형태로 출력된다.
    버튼 이름을 바꾸고 싶을때에는 value속성을 이용한다.

  16. type='file' accept='파일형식1, 파일형식2...' multiple ★
  : 사용자가 가지고 있는 특정 이미지나 파일들을 첨부할때 사용한다.
    만약 사용자가 첨부할 파일의 확장자를 제한하고 싶다면 accept
    속성으로 파일을 제한 할 수 있고, multiple속성을 사용하면
    파일을 여러 개 첨부할 수 있다.
    
    <form action="#" method="post">
  <!-- hidden -->
  <div>
    <input type="hidden" />
  </div>
  <!-- text -->
  <div>
    <label for="user_name">이름</label>
    <input type="text" name="user_name" value="김땡땡" />
  </div>
  <!-- password -->
  <div>
    <label for="user_pw">비밀번호</label>
    <input type="password" name="user_pw" />
  </div>
  <!-- search -->
  <div>
    <label for="search_word">검색어</label>
    <input type="search" name="search_word" />
  </div>
  <!-- url -->
  <div>
    <label for="url">포트폴리오 주소</label>
    <input type="url" name="url" />
  </div>
  <!-- email  -->
  <div>
    <label for="user_email">이메일</label>
    <input type="email" name="user_email" />
  </div>
  <!-- tel -->
  <div>
    <label for="user_phone">전화번호</label>
    <input type="tel" name="user_phone" />
  </div>
  <!-- number -->
  <div>
    <label for="num">수량</label>
    <input type="number" min="0" max="20" step="5" value="0" />
  </div>
  <!-- range -->
  <div>
    <label>범위</label>
    <input type="range" min="0" max="5" value="3" />
  </div>
  <!-- radio -->
  <div>
    <!-- 라디오버튼은 name값이 모두 같아야함 -->
    <input type="radio" name="gender" />
    <label for="gender" id="female">여성</label>

    <input type="radio" name="gender" checked />
    <label for="gender" id="male">남성</label>

    <input type="radio" name="gender" />
    <label for="gender" id="none">선택안함</label>
  </div>

  <!-- checkbox -->
  <div>
    <input type="checkbox" checked name="chk1" />
    <label for="chk1">수영</label>

    <input type="checkbox" name="chk2" />
    <label for="chk2">독서</label>

    <input type="checkbox" name="chk3" />
    <label for="chk3">음악감상</label>
  </div>

  <!-- color -->
  <div>
    <input type="color" />
  </div>

  <!-- date/month/week -->
  <div>
    <input type="date" />
  </div>
  <div>
    <input type="month" />
  </div>
  <div>
    <input type="week" />
  </div>

  <!-- time / datetime / datetime-local -->
  <div>
    <input type="time" />
  </div>
  <div>
    <input type="datetime" />
  </div>
  <div>
    <input type="datetime-local" />
  </div>

  <!-- submit / reset -->
  <div>
    <input type="submit" value="회원가입" />
    <input type="reset" value="다시 쓰기" />
  </div>

  <!-- file -->
  <div>
    <!--.jpg, .png, .jpeg만 첨부 가능 -->
    <input type="file" accept=".jpg, .png, .jpeg" />
    <!-- 이미지파일 형식이라면 뭐든지 가능, 파일 다중 첨부-->
    <input type="file" accept="image/*" multiple />
  </div>
</form>

<select>,<option>
  ===============================================
  보통 쇼핑몰에서 물건의 옵션을 선택할때 주로 사용하는 태그로
  사용자가 여러 데이터중에서 하나를 선택하거나 다중선택하게 할때
  사용한다. 
  select태그는 option태그를 활용하여 옵션을 나열할 수 있고 
  형식은 기본값 1개만 선택이 가능하지만 multiple속성을 함께
  쓰면 다중선택하게 만들 수 있다. 다중 선택할때는 ctrl키를
  누른 상태에서 다중 선택한다. 
  selected속성을 사용하면 사용자에게 맨처음 보여줄 데이터를
  지정할 수 있다.
  disabled를 사용하면 option중 선택이 불가한 항목을 지정할 수 있다.

  [기본형]
  <select>
    <option>데이터1</option>
    <option>데이터2</option>
    <option>데이터3</option>
  </select>

  [속성]
  - multiple : 데이터를 다중선택하게 만들때 사용한다. select태그안에
               속성으로 선언한다.
  - selected : 사용자의 편의를 위해 옵션을 미리 선택하여 보여준다.
               option태그에 속성으로 선언하여 사용한다.


  <textarea>
  =======================================
  장문의 글을 입력할때 사용하는 입력칸. 이메일양식에서 메일 내용을
  적거나 블로그 포스트처럼 긴 글을 작성할때 텍스트에디터에 들어있는
  태그이다.
  <textarea>태그를 쓸때는 태그 사이에 아무런 내용도 넣지 않아야
  한다. 만약 공백이나 글자가 들어가면 pre태그처럼 그대로 보여준다.
  글자수를 제한하고 싶다면 minlength,maxlength속성을 이용할 수 
  있다. 여기에 적힌 숫자만큼만 글자를 입력할 수 있다.
  length는 '총 개수'를 뜻한다.
  
  [속성]
  - cols : 영문 소문자를 기준으로 텍스트 영역의 넓이를 지정한다.
           여기에 쓰여진 숫자만큼 영역의 넓이가 결정됨.
  - rows : 줄을 기준으로 텍스트 영역의 높이를 지정한다. 지정한
           줄보다 글자가 많아지면 스크롤바가 생긴다.
  - wrap : 폼 데이터가 서버로 제출될때 입력된 텍스트의 줄바꿈 방식을
           지정한다.

< button >★

  기본 기능은 <input type='submit'>과 동일하다.
  버튼 태그를 이용하면 다양한 기능을 만들 수 있다. 예를들면
  버튼을 클릭했을때 화면에서 창이 뜬다던가 어떤 '기능'을 해야 할
  경우 해당 태그를 사용한다.
  button태그는 뒤에 닫는 태그가 있어 내용자리에 이미지나 텍스트
  이모지등을 넣을 수 있어 더 예쁘게 디자인된 버튼을 만들 수 있다.
  button태그도 type속성에 의해 기능이 결정된다.

  [속성]
  - submit : 기본기능으로, 폼요소를 서버에 제출한다.
  - reset : 초기화 버튼
  - button : 아무런 기능이 없는 버튼.(=깡통버튼) 자바스크립트로
             어떤 기능을 연동할때 사용한다.

  [기본형]
  <button type='기능'>버튼이름</button>

  <input type='image' src='경로' />
  =====================================
  제출버튼대신 사용할 이미지를 지정할 수 있다.
  src로 이미지를 불러오면 해당 이미지가 제출 버튼의 기능을 한다.
  
-->
<div>
  <h3>색상 선택</h3>
  <select>
    <option>선택</option>
    <option selected>red</option>
    <option>orange</option>
    <option>blue</option>
  </select>
</div>

<!-- multiple -->
<div>
  <h3>다중 선택</h3>
  <select multiple>
    <option>선택</option>
    <option selected>red</option>
    <option>orange</option>
    <option>blue</option>
  </select>
</div>

<!-- textarea -->
<div>
  <h3>글 작성</h3>
  <textarea cols="20" rows="5"></textarea>
</div>

<!-- input:image -->
<div>
  <h3>제출버튼대신 사용할 이미지</h3>
  <input type="image" src="./img/heart.svg" />
</div>

form태그에 사용하는 공통속성★
  =================================
  1. autocomplete : 자동완성. 값을 on으로 명시하면 브라우저는
     사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과
     비슷한 값들을 드롭다운해준다. 기본값은 off로 되어있다.

  2. target : action에서 지정한 서버주소를 현재 창이 아닌 다른
     위치에서 열도록 지정한다

  3. enctype : 폼 데이터가 서버로 제출될때 해당 데이터가 인코딩되는
     방식을 명시한다. 
     - application/x-www-form-urlencoded : 기본값으로 모든 문자들을
       서버로 보내기전에 인코딩됨을 명시함.
     - multipart/form-data : 모든 문자들을 인코딩하지 않음을 명시함.
       이 방식은 form요소가 파일이나 이미지를 서버로 전송할때 주로 사용한다.
     - text/plain : 공백문자는 '+'기호로 변환하지만 나머지 문자는 인코딩되지
       않음을 명시한다.
  
  4. novalidate : 폼 데이터를 서버로 제출할때 해당 데이터의 유효성 검사를
     하지 않음을 명시한다. input태그에도 쓸 수 있다.


  input태그에 사용하는 공통속성 ★
  ==========================================
  1. readonly : 읽기전용 필드임을 명시한다. 사용자가 입력할 수 없고
     읽기만 가능한 필드를 지정할 경우 사용한다.
  
  2. placeholder : 사용자가 어떤 내용을 입력해야할지 힌트를 표시할때
     사용한다.

  3. autofocus : 페이지를 불러오자마자 특정 부분에 마우스 커서가 표시된다.
  
  4. autocomplete : 해당 폼요소에 자동완성 기능을 부여한다.
  
  5. maxlength : 텍스트 필드에 최대로 입력할 수 있는 문자의 개수를 지정한다.

  6. required : 필수 입력 필드임을 지정한다.(빈칸이면 안넘어감)

  7. value : 초기값을 지정한다. 실제로 필드에 나타나는 데이터로 
             placeholder와 다르게 입력필드를 포커싱해도 글자가 사라지지
             않는다. 서버에 넘겨야 하는 값이 있을때 주로 사용한다.
             수량 표시처럼 미리 값을 표시하는 용도로도 사용한다.
  
  8. size : select태그를 쓸때 화면에 한번에 표시할 목록의 갯수를 지정한다.
  
  <h2>폼양식 만들기</h2>
<form action="#" method="post" autocomplete="on" novalidate>
  <!-- 아이디 -->
  <div>
    <label for="user_id">아이디</label>
    <input type="text" id="user_id" name="user_id" required autofocus />
  </div>
  <!-- 비밀번호 -->
  <div>
    <label for="user_pw">비밀번호</label>
    <input
      type="password"
      id="user_pw"
      name="user_pw"
      required
      autocomplete="off"
      minlength="8"
      maxlength="16"
    />
  </div>
  <!-- 핸드폰번호 -->
  <div>
    <label for="phone">전화번호</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      placeholder="-은 제외하고 입력해주세요."
    />
  </div>
  <!-- 이용약관 -->
  <div>
    <h5>이용약관</h5>
    <label for="terms">
      <textarea
        name="terms"
        id="terms"
        rows="3"
        cols="20"
        wrap="soft"
        readonly
      >
	제1조(1항)여기에 회원가입한 사람은 영원히 탈퇴할 수 없다.</textarea
      >
    </label>
  </div>

  <!-- 제출버튼 -->
  <button>제출하기</button>
</form>