input 요소

(2024-07-16)

input type


1. input (입력) 요소 폼(web form) 구현을 위한 폼 요소 내 하위요소 중 하나로써,                ☞ 폼 요소 참조
     - 사용자가 데이터를 입력할 수 있도록, 다양한 입력 동작 유형의 필드를 생성하는 데 사용


2. input (입력) 요소에서, type 속성 및 폼 컨트롤 유형들 (type='') 

  ㅇ type 속성
     - 사용자가 입력할 수 있는 데이터의 종류를 지정

     - input 요소 내 type 속성을 지정하는 문법  :  <input type="폼 컨트롤 유형">

     * 거의 대부분의 폼 컨트롤(입력 필드의 동작 유형)들이 지원됨                
        . 例) button, checkbox, color, datetime-local, date, email, file, hidden, image, month,
              number, password, radio, range, reset, search, submit, tel, text, time, url, week

  ㅇ (기존 HTML 지원)
     - 텍스트 입력
        . text (텍스트)
        . password (암호, `***`로 표시됨)
     - 선택 항목 입력
        . checkbox (다중 선택)
        . radio (단일 선택)
     - 파일명 입력
        . file (파일명 입력 대화상자 나타남)
 	. [추가 속성 (Attribute)]
           .. accept (MIME 타입)
           .. capture
           .. files 
           .. multiple (다수 파일 선택)
     - 버튼 형식 입력 
        . submit (입력 데이터 웹서버 전송)
        . reset (초기화)
        . button (버튼)
     - 쓰지 못함 
        . readonly (form 전송 가능)
        . disabled (form 전송시 값이 전달되지 않음)

  ㅇ (HTML 5 지원)
     - 숫자 입력 (특정 범위내)
        . (직접 범위 지정) : number [min=최소값,max=최대값,step=간격,value=초기값]
        . (슬라이더 형태)  : range
     - 색상 입력 : color
     - 이메일 주소 (자동 유효성 검사) : email
     - URL 입력 (자동 유효성 검사) : url
     - 전화번호 입력 : tel
     - 검색어 입력 : search, image, hidden
     - 캘린더 형식으로 선택 입력 가능
        . date  : 날짜 (년 월 일)
        . month : 월 (년 월)
        . week  : 주 (년 몇번째주)
        . time  : 시간 컨트롤 생성 입력
        . datetime-local : 해당 지역의 날짜(년월일) 및 시간(시분초) 입력


2. input (입력) 요소에서, 기타 속성서버전송되는 값을 지정 : value
     - 해당 체크박스가 체크되고, 폼이 제출되었을 때, value 속성에 지정된 값이 서버전송됨

  ㅇ 입력 내용에 대한 힌트 제공 : placeholder
     - 폼 필드 (입력칸) 값이 비었을때, 입력 힌트로써, 좀더 밝은 회색 글씨체로 표시됨

  ㅇ 특정 폼 필드에 자동적으로 포커스를 줌 : autofocus

  ㅇ 입력 필드가 비었으면 폼 전송 못함 : required

  ㅇ 자동 완성 기능 : autocomplete

  ㅇ 옵션 리스트 선택 기능 : list
     - 옵션 리스트 내용은, datalist 요소 밑에 option value로써 넣어둠

form 요소
   1. form 요소   2. Input 요소  


"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"