[HTML] 양식(2) - input

 

▶ <input />

• 사용자에게 입력 받을 데이터의 양식.

 

• 속성

  autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지의 여부를 설정.

  - on, off 값 지정. 기본값: on.

  - cf. <form>에서 autocomplete 속성 설정 시 범위 내의 모든 데이터 양식에 설정되는 데 비해 <input>의 경우 해당 요소 하나에 대해서만 설정됨.

  autofocus: 페이지가 load될 때 특정한 양식 부분에 자동으로 포커스 처리 여부 설정.

  - boolean값.

  - focus는 한 곳만 가능하기 때문에 문서 내 고유해야 함.

  checked: 양식이 선택되었음을 표시.

  - boolean값.

  - type 속성의 값이 radio, checkbox일 경우만 해당.

  readonly: 수정 불가한 읽기 전용 설정.

  - boolean값.
  - 포커스는 되지만 아무런 키도 입력되지 않음.
  

  disabled: 양식을 비활성화. boolean값.
  - disabled 속성 지정 시 focus조차 되지 않음.

  form

  - <form>의 id 속성 값을 지정. 단, 해당 <form>의 후손이 아닐 경우에만.
  - <form>의 범위 밖에서 특수하게 작동해야 하는 경우 <form> 외부에 위치한 채 연결해서 사용 가능하도록.
  - <form>이 submit될 때 연결이 되어 있다면 이에 연결된 <input>에 입력된 정보 또한 함께 제출됨.
  

  list: 참조할 <datalist>의 id 속성 값

 

  max: 지정 가능한 최대 값 숫자 값.

  - type 속성 값이 number일 경우에만 해당. min 속성보다 큰 값만 허용.

 

  min: 지정 가능한 최소 값 숫자 값.

  - type 속성 값이 number일 경우에만 해당. max 속성보다 작은 값만 허용.

 

  maxlength: 입력 가능한 최대 문자 수 지정.

  - 숫자 값을 지정. 기본값: 524288.

  - type 속성의 값이 text, email, password, tel, url일 경우에만 해당.

  multiple: 둘 이상의 값을 입력 할 수 있는지 여부 설정.

  - boolean값.

  - type 속성 값이 email, file일 경우만 해당.

  - type 속성이 email일 경우 ,(쉼표)로 구분.
  - <input>의 type이 file일 경우 multiple 속성을 같이 사용하면 여러 개의 파일 가능.

 

  name: 양식의 이름. 서버로 데이터 보낼 때 활용.

 

  placeholder: 사용자가 입력할 값에 대한 힌트 제공.

  - type 속성 값이 text, search, tel, url, email일 경우만 해당.

 

  step: 유효한 증감 숫자의 간격.

  - 숫자 값. 기본값: 1

  - type 속성 값이 number, range일 경우만 해당.

 

  src: 이미지의 URL 명시.

  - type 속성의 값이 image일 경우만 해당.

 

  alt: 이미지의 대체 텍스트 지정.

  - type 속성의 값이 image일 경우만 해당.

 

  type: 입력 받을 데이터의 종류를 명시.

  - text가 기본값이긴 하나 type이 text인 경우에도 <input type="text">와 같이 명시적으로 적어주는 것이 좋음.

 

  value: 양식의 초기 값

 

• 데이터 type의 값: type 속성에 입력할 수 있는 값의 목록.

  - 사용 예시

  <input type="button" /> 
  <input type="checkbox" /> 
  <input type="file" /> 
  <input type="text" /> 

  button: 일반 버튼 <button>처럼 사용.
  - 클릭 시 Javascript를 통해 기능을 넣어야 함.

  checkbox: 체크박스.

  - 동의하는 버튼을 만드는 경우에 활용.

  color: 색상.

  - IE 지원 불가

  email: 이메일

  file: 파일

  hidden: 화면상에 보이지는 않지만 전송할 양식.

  - value 속성으로 값을 지정

  image: 이미지 제출 버튼.

  - <img />처럼 사용.
  - 이미지를 삽입하는 것만으로 끝나지 않고 제출 기능으로도 사용 가능. 
  - <form> 범위 내에 <input type="image">를 넣고 삽입된 이미지 클릭 시 <form>에 지정된 action page로 이동.
  - <input type="image">는 <input type="submit">처럼 사용될 수 있는 것.

  number: 숫자

  password: 비밀번호. 

  - 입력 시 입력된 내용이 가려지는 양식.

  radio: 라디오 버튼.

  - 같은 name 속성 그룹 내 하나만 선택 가능함. 택 1 속성.

  - 보통 여러 개의 radio를 만들고 묶음으로 사용하겠다는 듯으로 name을 동일하게 지정.

  range: 범위 컨트롤.

  - min, max, step, value(기본값) 속성 사용.

  reset: 초기화 기능. 

  - 해당 <form> 범위 내의 모든 양식에 대해서만 초기화 가능. 

 

  search: 검색.

  submit: 제출 버튼.

  - 해당 <form> 범위 내 고유한 양식 

 

  tel: 전화번호.

  text: 일반 텍스트.

 

• input { display: inline-block; }