HTML 입력 관련 태그 모음

button

    - 버튼을 위한 태그
    - 자동으로 닫는 태그 X
    - 시멘틱 o
    - input은 value에 문자열만 들어가서 이미지는 못보냄, button은 태그의 내용란에 img태그로 이미지를 넣는게 가능함
    - 속성
        *autofocus  : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        *disabled        : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        type    : 버튼이 동작할 방식을 지정
            submit  : [기본값] 양식 제출 버튼으로 작동
            button  : 아무런 기능이 없는 버튼으로 작동
            reset   : 초기화 버튼으로 작동
        
        

form(양식)

    - 서버로 전송하고자 하는 사용자 입력 값을 받는 태그들(input, select, textarea)을 자식, 자손으로 가짐
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 하나의 양식 태그는 서로 관련있는 입력 태그만 가져야 함
    - 양식 태그들끼리는 선조, 부모, 자식, 자손 관계를 형성하면 안됨

input

    - 사용자로부터 입력값을 받기 위해 사용
    - 자동으로 닫는 태그 o
    - 시멘틱 o
    - 속성
        name    : [필수] 가지고 있는 값을 서버로 전송할 때 식별자. 특별한 경우가 아니라면 해당 양식 내에서 고유해야 함
        type    : [필수]
            *text       : [기본값] 일반 문자열

            *button     : 요청을 보내지 않는 일반 버튼

            *checkbox   : 여부 선택을 위한 체크 박스

            color       : 색상 선택 데이터 전송 시 HEX컬러 문자열로 전송

            date        : 날짜 선택. 모바일에선 년/월/일 선택 키패트들 표시해주기도 함

            datetime-local : 날짜 및 시간 선택. 모바일에선 맞춤형 키패드를 표시해주기도 함

            *emial      : 이메일 문자열, 모바일 기기에서는 앳(@), 마침표(.), 도메인 TLD(.com 등)을 표시해주기도 함

            *file       : 파일 선택
                          파일을 전송하기 위해서는 <form> 태그의 enctype 속성 값이 multipart/from-data이고 method 속성 값이 post여야 함

            *hidden     : 숨겨진 상태. 의도적으로 보이지 않게 하기 위해 사용. 
                          값의 형태는 문자열(text), 보통 보안을 위한 토큰(Salt)값을 저장하기 위해 사용

            number      : 숫자 입력. 자연상수(e), 소수점(.)등을 허용함으로 유의해야 함

            *password   : 비밀번호 입력. 입력한 값이 애스터리스크(*)로 대치되어 표시된다.

            radio       : 여러 선택지 중 하나를 선택하기 위한 라디오 박스.
                          name 속성 값이 같은 radio 중 하나밖에 선택할 수 없다

            range       : 숫자를 선택할 수 있는 막대

            reset       : 양식 태그내에 존재하는 입력 태그의 값을 초기화하는 버튼

            search      : 검색을 위한 입력. 검색창의 의미를 부여하는 시멘틱이 있을 뿐, 외관 및 기능상 text와 차이가 없다.(브라우저 별로 돋보기 아이콘을 추가하는 경우가 있음)

            *submit     : 해당 양식을 제출하기 위한 버튼

            tel         : 연락처 입력. 모바일 기기에서 숫자와 별표(*), 샾(#)을 표시해주기도 함

            url         : URL을 위한 텍스트 입력. URL 입력을 위한 시멘틱이 있을 뿐, 외관 및 기능상 text와 차이가 없다.

        accept          : type이 file일 때 허용할 확장자 혹은  MIME 타입을 지정한다.
            확장자는 마침표(.)를 적고 확장자를 적는 형식으로 작성
            MIME의 후행 타입은 애스터리스크(*)를 활용할 수 있다.
            콤마(,)를 구분하여 여러개의 타입을 나열할 수 있다.

        autocomplete    : (어떠한 형태의) 자동완성기능을 사용할 것인가에 대한 설정
            on          : 일반 자동완성기능 사용. 해당 입력 태그에 입력했던 적이 있던 내용을 기반으로
            off         : 자동완성기능 x
            name        : 이름 자동 완성
            new-password : 새로운 비밀번호 자동 완성(생성).
            one-time-code : 일회용 비밀번호(OTP, One-Time-Password) 자동 완성.

        *autofocus  : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
                     (마우스 커서로 클릭했을 때 깜빡이는거)

        *checked         : type 속성 값이 checkbox, radio일 때 기본적으로 체크된 상태로 설정 <!--checkbox의 초기값같은 개념-->
                        
        *disabled        : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        max             : type 속성 값이 number, range 등일 때의 최댓값
        min             : type 속성 값이 number, range 등일 때의 최소값

       *maxlength       : 문자열의 최대 길이 
        *minlength      : 문자열의 최소 길이

        multiple        : type 속성값이 file일 때, 여러 개의 파일을 선택할 수 있게 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        *placeholder     : 값이 비어있을 때 대신하여 보여줄 텍스트.

        *readonly        : 읽기 전용 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        *required        : 값이 비어있을 수 없음에 대한 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        spellcheck      : 브라우저에 내장된 철자 확인 기능을 사용할 것인가에 대한 설정.
            default : [기본값] 브라우저 설정을 따름
            true    : 강제 사용
            false   : 강제 미사용
            
        step            : type 속성 값이 range일 때 한 틱(Tick)에 변화할 단계 값.

        *value   : 해당 입력 태그의 값. 단, 버튼 형식(button, reset, submit 등)일 때에는 표시할 문자열로 작동.
    - <form> 태그의 자식, 자손이어야 의미를 가짐

label

    - 입력 태그와 관련하여 이에 관한 설명을 작성하고 연결시키기 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - label 태그는 연결된 입력 태그에 대한 설명을 문자열로 가짐, 스크린 리더가 연결된 태그에 대한 설명으로 label 내부의 내용을 사용하므로 반드시 작성해야 함, 누락시 HTML5 표준 위반
    - 작성 방법은 두개
        label 태그의 for 속성 값을 입력 태그가 가지는 id 속성 값과 일치시키는 방법

<label for="emailInput">이메일</label>
<input type="email" id="emailInput" name="email" placeholder="이메일 입력">

id 속성이 가지는 속성값은 하나의 HTML 문서 내에서 중복되면 안되서 각별히 유의

label 태그가 직접 입력 태그를 자식, 자손으로 가지게 하는 방법

<label for="">
        <span>이메일</span>                 
        <!-- span은 별 뜻 없는 건데 그렇다고 안쓰면 HTML5 표준 위반이라고 함-->
        <input type="email" name="email" placeholder="이메일 입력">
</label>

optgroup(Option Group)

    - 서로 관련있는 option태그를 묶음
    - 자동으로 닫는 태그x
    - 시멘틱 o
    - 하나 이상의 option 태그가 서로 유관함을 알리는 시멘틱이 있으나, 선택이 불가하고 시각적 효과 외에 특별한 기능을 가지지는 않는다.
    - select 태그의 자식이어야함, 자식으로 option 태그를 가져야 함
    - 속성
        label       : [필수]표시할 텍스트를 지정
        disabled    : 해당 입력 태그를 비활성화 한다. <optgroup>태그가 비활성화 될 경우, 이가 포함하는 <option>태그들도 함께 비활성화 된다.
                      속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

option

    - <select>가 가지는 실질적인 값이 있는 항목 태그
    - 자동으로 닫는 태그 X
    - 시멘틱 o
    - <select>나 <optgroup>의 자식이어야 함
    - 속성
        *disabled   : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
        selected    : 초기에 선택된 상태로 지정한다. 속성 값을 가지지 않으며 부여된 것으 로 의미를 가짐
        value       : 실질적으로 서버에 전송될 값. 생략할 경우 <option>태그가 가지는 내부 내용을 전송한다.  

     

select

    - 드롭다운(Drop Down)방식 혹은 리스트(List) 방식의 항목선택을 위한 입력태그
    - 자동으로 닫는 태그 X
    - 시멘틱 o
    - 직접 값을 가지지 않음, 자식, 자손으로 값을 직접 가지는 <option> 태그를 가짐
    - 속성
        성
        name    : [필수] 가지고 있는 값을 서버로 전송할 때 식별자. 특별한 경우가 아니라면 해당 양식 내에서 고유해야 함

        *autofocus  : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
                     (마우스 커서로 클릭했을 때 깜빡이는거)
                        
        *disabled       : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        multiple        : 여러 개의 <option>을 선택할 수 있게 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        *required       : 값이 비어있을 수 없음에 대한 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐        

textarea

    - 개행이 가능한 문자열 값을 입력받기 위한 태그
    - 자동으로 닫는 태그 X
    - 시멘틱 o
    - input과 다른 점은 쓰는 중에 엔터(줄바꿈)가 가능함, 초기값 설정할 때 value 대신 태그 내용에 직접 적어야 함
    - 속성
        name    : [필수] 가지고 있는 값을 서버로 전송할 때 식별자. 특별한 경우가 아니라면 해당 양식 내에서 고유해야 함

        autocomplete    : (어떠한 형태의) 자동완성기능을 사용할 것인가에 대한 설정
            on          : 일반 자동완성기능 사용. 해당 입력 태그에 입력했던 적이 있던 내용을 기반으로
            off         : 자동완성기능 x

        *autofocus  : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
                     (마우스 커서로 클릭했을 때 깜빡이는거)
        
        cols        : 초기에 설정될 열의 개수(가로방향 글씨 개수)를 지정. 자연수여야 함. 기본값은 20
                      
        *disabled       : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        *maxlength      : 문자열의 최대 길이 
        *minlength      : 문자열의 최소 길이


        *placeholder    : 값이 비어있을 때 대신하여 보여줄 텍스트.

        *readonly       : 읽기 전용 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        *required       : 값이 비어있을 수 없음에 대한 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐

        rows        : 초기에 설정될 행의 개수(세로방향 글씨 개수)를 지정. 자연수여야 함. 기본값은 2

        spellcheck  : 브라우저에 내장된 철자 확인 기능을 사용할 것인가에 대한 설정.
            default : [기본값] 브라우저 설정을 따름
            true    : 강제 사용
            false   : 강제 미사용