html3

input 태그의 속성

  • 1placeholder: 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
  • 2autofocus: 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
  • 3readonly: 내용을 보기만 하고 입력하지 X
    속성 값 없이 readly라고 쓰면 됨
  • 4required: 필수 필드 체크
    속성 값 없이 required 라고만 입력
    (필수 필드는 브라우저에서 직접 체크하느 것이므로 오류 메세지 내용은 브라우저들마다 다르게 나타남)

input 태그의 다양한 속성

  • 1size: 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할 지 결정
  • 2maxlength, minlength: 입력 가능한(해야 할) 최대 글자(최소 글자)

여러 데이터 나열해 보여주기

  • 1select: 시작과 끝 표시
  • 2option: 그 안에 들어가는 항목을 표시
  • 3optgroup: 여러 항목을 그룹으로 묶을 때 사용, label 속성을 사용해 그룹 제목 붙이기
  • 4datalist: 데이터 목록을 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
    데이터 목록에 id를 이용해 이름을 붙이고, input 태그의 list 속성에 데이터 목록 id를 지정
  • 5textarea: 여러 줄의 텍스트 입력할 때(게시판의 게시물 입력 창, 회원 가입 양식의 약관 등)
    -cols: 가로 너비의 문자 단위 지정
    -rows: 세로 길이를 줄 단위로 지정(최대 몇 줄까지 입력할 것인지)

기타 다양한 폼 요소들

  • 1button: 화면 낭독기에서 버튼임을 정확히 전달할 수 있음
    css를 이용해 원하는 형태로 꾸밀 수 있음
  • 2output: 계산 결과를 브라우저에 표시, 계산 결과값이라는 점을 웹 브라우저가 정확히 인식
  • 3progress: 작업 진행 상태 표시
    meter: 현재 상태(하드 디스크 사용량) 표시
    -low, high, optimum: 이 정도면 높다, 낮다, 적당하다