form 태그 / input 태그

form 태그

        - 입력 양식을 작성하는 영역(공간)
        - 내부에 작성된 입력 값을 지정된 공간으로 제출하는 역할

        속성
        1. action : 제출된 공간을 지정하는 속성(주소를 작성)
        2. method : 설정된 공간으로 데이터를 전달하는 방식
        3. name : 자바 스크립트에서 사용, form 의 이름을 지정하는 속성
        4. target : 제출된 페이지를 현재 또는 새 탭으로 열기 설정

input 태그

        - 웹 문서에사 사용자가 입력할 수 있는 양식을 제공해주는 태그
        - 많은 type 이 존재하고, input 의 변형 형태도 다양하게 존재
        - name 속성이 99% 이상 필수로 작성되어야 함 (작성해줘야 추후 개발할때 용의)

        name"변수명" 추후 개발에서 필요한 변수명을 작성해주는 후 기능연결

        type 속성을 환경에 맞게 설정
        type 종류
            text : 한 줄 텍스트 입력 상자(기본값)
            passworod : 비밀번호 입력 상자(모자이크 처리)
            url : 주소 설정
            search : 검색 기능
            tel : telephone 전화번호
            email : 모양은 텍스트와 동일하지만 이메일 작성 용도(@, . 사용했는지 확인)

            number : 숫자만 입력 가능한 상자
            range : 슬라이드바를 이용해서 숫자 지정 (단독사용X, 보통 js 같이 사용)
                - min(최소값), max(최대값), step(숫자가 증가/감소하는 단계), value(기본값 설정)

            date/month/week/time/datetime-local : 날짜 관련 태그
        input 태그의 경우 한 태그 안에서 열고 닫지만
        예외 상황이 생길 경우  으로 사용하기도 함

        input 은 무조건 form 태그 안에다가 작성해야하는 것은 아님
        단독으로 사용할 수도 있음

        추후 id 라는 속성을 이용할 것

        id : 자바스크립트에서 사용할 변수명 label 과 연결해주는 기능
        name :  form 으로 내용을 제출할 때 사용
                name 안에 변수명을 작성할 때는 속성이나 예약어는 피해서 작성할 것
                name : id 작성하면 id 속성과 혼동이 올 수 있음
                
        placeholder : 사용자가 입력을 해야하는 내용이나 정보를 미리보기처럼 양식을 작성해주는 공간 
        
        required : 폼을 제출할 때 필수로 작성해야하는 것을 의미
                   이메일의 경우 @ . 를 작성하지 않으면 작성해야한다는 요청 메세지가 보임

라벨 태그

        label 태그는 input 태그의 앞 뒤에 위치하며 input 에 관련된 설명을 제공하는데 사용
        label 에서 name 과 같은 for 속성의 이름을 사용
        input 과 label 태그를 연결해줄 때
        id 와 for 속성을 사용해서 연결

radio checkbox

      - 여러 연관된 값을 묶어서 선택하는 경우 사용
      - radio : 여러 값중 하나만 선택
          Ex) 성별
      - checkbox : 여러 값 중 원하는 모든 것 선택
          Ex) 상세검색, 관심분야, 취미
      
        연관된 radio 와 checkbox 는 같은 name 속성 값을 가져야 함
      
      radio, checkbox 추가 속성
      - value : 선택 되었을 때 제출될 값을 작성하는 속성
      - checked : 체크가 되어있게 하는 속성

날짜 / 시간 관련 input 태그

radio 확인

강아지
고양이
사자

checkbox 확인

내가 좋아하는 색상 고르기

빨강
노랑
초록

radio checkbox 에 value 와 checked 를 넣어보기

A팀 B팀

수영
독서
잠자기

버튼 태그

      - 버튼을 만드는 태그는

      - type 속성 값에 따라 동작이 잘라짐
          type="submit"
              type 에서 submit 을 작성하게 되면 form 을 제출하는 버튼을 만들 때 제출하겠다는 의미
              button 에서 type 을 지정해주지 않으면 기본으로 submit 지정

          type="reset"
              작성된 모든 값을 초기화

          type="button"
              버튼 동작을 개발자가 만들고자 할 때 사용

textarea

      여러 줄을 입력할 수 있는 입력 상자 

      속성 
      - name : 제출되는 곳에서 데이터를 읽을 때 필요한 이름
      - rows : textarea 행 크기를 지정(rows="3" 3행)
      - cols : textarea 열 크기를 지정(cols="10" 10열)
      - style="resize:none" : 크기 변경 불가

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>입력 관련 태그</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>form 태그 / input 태그</h1>
    <h3>form 태그</h3>
    <pre>
        - 입력 양식을 작성하는 영역(공간)
        - 내부에 작성된 입력 값을 지정된 공간으로 제출하는 역할

        속성
        1. action : 제출된 공간을 지정하는 속성(주소를 작성)
        2. method : 설정된 공간으로 데이터를 전달하는 방식
        3. name : 자바 스크립트에서 사용, form 의 이름을 지정하는 속성
        4. target : 제출된 페이지를 현재 또는 새 탭으로 열기 설정
    </pre>
    <h3>input 태그</h3>
    <pre>
        - 웹 문서에사 사용자가 입력할 수 있는 양식을 제공해주는 태그
        - 많은 type 이 존재하고, input 의 변형 형태도 다양하게 존재
        - name 속성이 99% 이상 필수로 작성되어야 함 (작성해줘야 추후 개발할때 용의)

        name"변수명" 추후 개발에서 필요한 변수명을 작성해주는 후 기능연결

        type 속성을 환경에 맞게 설정
        type 종류
            text : 한 줄 텍스트 입력 상자(기본값)
            passworod : 비밀번호 입력 상자(모자이크 처리)
            url : 주소 설정
            search : 검색 기능
            tel : telephone 전화번호
            email : 모양은 텍스트와 동일하지만 이메일 작성 용도(@, . 사용했는지 확인)

            number : 숫자만 입력 가능한 상자
            range : 슬라이드바를 이용해서 숫자 지정 (단독사용X, 보통 js 같이 사용)
                - min(최소값), max(최대값), step(숫자가 증가/감소하는 단계), value(기본값 설정)

            date/month/week/time/datetime-local : 날짜 관련 태그
        input 태그의 경우 한 태그 안에서 열고 닫지만
        예외 상황이 생길 경우 <input></input> 으로 사용하기도 함

        input 은 무조건 form 태그 안에다가 작성해야하는 것은 아님
        단독으로 사용할 수도 있음

        추후 id 라는 속성을 이용할 것

        id : 자바스크립트에서 사용할 변수명 label 과 연결해주는 기능
        name :  form 으로 내용을 제출할 때 사용
                name 안에 변수명을 작성할 때는 속성이나 예약어는 피해서 작성할 것
                name : id 작성하면 id 속성과 혼동이 올 수 있음
                
        placeholder : 사용자가 입력을 해야하는 내용이나 정보를 미리보기처럼 양식을 작성해주는 공간 
        
        required : 폼을 제출할 때 필수로 작성해야하는 것을 의미
                   이메일의 경우 @ . 를 작성하지 않으면 작성해야한다는 요청 메세지가 보임
                    
    
    
    </pre>
    <h3>라벨 태그</h3>
    <pre>
        label 태그는 input 태그의 앞 뒤에 위치하며 input 에 관련된 설명을 제공하는데 사용
        label 에서 name 과 같은 for 속성의 이름을 사용
        input 과 label 태그를 연결해줄 때
        id 와 for 속성을 사용해서 연결

    </pre>

    <h3>radio checkbox</h3>
    <pre>
      - 여러 연관된 값을 묶어서 선택하는 경우 사용
      - radio : 여러 값중 하나만 선택
          Ex) 성별
      - checkbox : 여러 값 중 원하는 모든 것 선택
          Ex) 상세검색, 관심분야, 취미
      <strong style="color: red;">
        연관된 radio 와 checkbox 는 같은 name 속성 값을 가져야 함
      </strong>
      radio, checkbox 추가 속성
      - value : 선택 되었을 때 제출될 값을 작성하는 속성
      - checked : 체크가 되어있게 하는 속성
    </pre>
    <hr>
    <!-- 자동정렬 alt shift f-->
    <form>
        아이디 : <input type="text" name="user_id">
        <br>
        비밀번호 : <input type="password" name="pw">
        <br>
        이메일 : <input type="email" name="email">
        <br>
        숫자 : <input type="number" name="num">
        <br>
        <input type="range" min="10" max="100" step="1" value="30" name="ran">
        <br>
    </form>

    <h4>날짜 / 시간 관련 input 태그</h4>
    <ul>
      <li>
        <input type="date">
      </li>
      <li>
        <input type="month">
      </li>
      <li>
        <input type="week">
      </li>
      <li>
        <input type="time">
      </li>
      <li>
        <input type="datetime-local">
      </li>
    </ul>
    <h4>radio 확인</h4>
    <input type="radio" name="동물"> 강아지
    <br>
    <input type="radio" name="동물"> 고양이
    <br>
    <input type="radio" name="동물"> 사자

    <hr>
    <h4>checkbox 확인</h4>
    <p>내가 좋아하는 색상 고르기</p>
    <input type="checkbox" name="색상"> 빨강
    <br>
    <input type="checkbox" name="색상"> 노랑
    <br>
    <input type="checkbox" name="색상"> 초록
    <br>
    <h4>radio checkbox 에 value 와 checked 를 넣어보기</h4>
    <input type="radio" name="팀" value="A팀 선택했음" checked>A팀
    <input type="radio" name="팀" value="B팀 선택했음">B팀
    <hr>
    <input type="checkbox" name="취미" value="수영" checked> 수영
    <br>
    <input type="checkbox" name="취미" value="독서" checked> 독서
    <br>
    <input type="checkbox" name="취미" value="잠자기" checked> 잠자기

    <h3>버튼 태그</h3>
    <pre>
      - 버튼을 만드는 태그는

      - type 속성 값에 따라 동작이 잘라짐
          type="submit"
              type 에서 submit 을 작성하게 되면 form 을 제출하는 버튼을 만들 때 제출하겠다는 의미
              button 에서 type 을 지정해주지 않으면 기본으로 submit 지정

          type="reset"
              작성된 모든 값을 초기화

          type="button"
              버튼 동작을 개발자가 만들고자 할 때 사용

    </pre>

    <h3>textarea</h3>
    <pre>
      여러 줄을 입력할 수 있는 입력 상자 

      속성 
      - name : 제출되는 곳에서 데이터를 읽을 때 필요한 이름
      - rows : textarea 행 크기를 지정(rows="3" 3행)
      - cols : textarea 열 크기를 지정(cols="10" 10열)
      - style="resize:none" : 크기 변경 불가

    </pre>
    <textarea name="데이터에 필요한 이름" cols="20" rows="10">
      이름:
      나이:
      주소:
    </textarea>
  </body>
</html>