input 요소

(2022-05-01)

input type


1. input (입력) 요소에서, type 속성

  ㅇ input 요소에서 type 속성 : <input type=... >

  ㅇ 거의 대부분의 폼 컨트롤들이 지원됨     ☞ 폼 요소 참조
     - type 例) button, checkbox, color, datetime-local, date, email, file, hidden, image, month,
                number, password, radio, range, reset, search, submit, tel, text, time, url, week


2. input (입력) 요소에서, 지원되는 (type=''), 폼 컨트롤 유형들

  ㅇ 기존 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 (입력) 요소에서, 기타 속성

  ㅇ 입력 내용에 대한 힌트 제공 : placeholder
     - 폼 필드 값이 비어있으면, 좀더 밝은 회색 글씨체로 표시하며, 입력 힌트 제공

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

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

  ㅇ 자동 완성 기능 : autocomplete

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



Copyrightⓒ written by 차재복 (Cha Jae Bok)
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"