Programing/HTML

[HTML] Form 정리 (4)

쿠크 2021. 7. 7. 17:10
  • type="radio"
    • 서로 연관된 옵션들의 집합을 보통 하나의 라디오 버튼 그룹으로 나타낸다.
    • 그룹 내의 라디오 버튼은 checkbox와는 달리 오직 하나만이 선택될 수 있다.
    • checkbox처럼 name은 라디오버튼의 이름이다.
    • 같은 분류의 라디오버튼은 같은 이름으로 지정해 주고, value는 선택 항목들이 가지는 고유한 값이다.
    • 여기에 지정한 값들이 ‘제출(submit)’ 버튼을 누르면 서버로 전송된다.
    • checked 라는 속성을 적어주면, 화면이 처음에 로딩될 때 해당 항목은 기본으로 선택이 된 채로 보여진다.
  • type="file"
    • 업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼을 정의.
    • 이 입력 필드를 통해 사용자는 자신의 저장소(storage)에서 파일을 선택할 수 있으며, multiple 속성이 명시되어 있으면 여러 개의 파일을 동시에 선택할 수도 있다.
    • 이렇게 선택된 파일은 폼 제출을 통해 서버로 보내거나 자바스크립트 코드와 파일 API 등을 사용하여 조작할 수 있게 된다.
    • accept : 파일 입력 받아 들여야 파일 형식을 정의하는 문자열이다. 이 문자열은 쉼표로 구분 된 고유 파일 유형 지정자 목록이다.
    • multiple : 사용자가 하나 개 이상의 파일을 선택할 수있다.
  • type="submit"
    • 서버의 폼 핸들러(form handler)로 폼 데이터(form date)를 전송하는 제출 버튼(submit button)을 정의.
    • 폼 핸들러는 일반적으로 입력된 데이터를 처리하는 스크립트를 포함하고 있는 서버 페이지이며, 이러한 폼 핸들러의 주소는
    • 요소의 action 속성에 명시된다.
  • type="reset"
    • 모든 폼(form) 요소의 값을 초깃값으로 되돌리는 리셋 버튼(reset button)을 정의.
  • value : 입력 태그의 초기값을 설정하는 속성
  • name : 서버로 전달되는 이름을 설정하는 속성
  • readonly : 입력필드가 읽기전용(read only)임을 지정 (수정할 수 없음)
  • disabled : 입력필드가 사용불가임을 지정.
    disabled 요소는 사용할 수 없고(un- usable), 클릭할 수 없고(un-clickable), 제출되지 않는다.
  • size : size 속성은 입력 필드의 크기(문자들)를 지정.
  • maxlength : maxlength 속성은 입력필드에 대한 최대 허용 길이를 지정.
  • autocomplete :
    • autocomplete 속성은 폼이나 입력필드가 자동완성(autocomplete) 기능 을 지원할 지 여부를 지정.
    • autocomplete 를 켜면, 브라우져는 사용 자가 이전에 입력한 값들에 기초하여 자동으로 완성.
      Tip: 폼(form)에는 autocomplete 가 "on"이면서, 특정 입력필드는 "off" 로 하는 것이 가능하며, 그 반대의 경우도 마찬가지이다.
    • autocomplete 속성은 <form> 과 다음의 <input> 타입에서 작동. -->text, search, url, tel, email, password, datepickers, range, and color.
  • placeholder :
    • placeholder 속성은 입력필드에 기대되는 값을 설명해주는 힌트(샘플 값이나, 포맷에 대한 간단한 설명) 를 지정.
    • placeholder 속성은 다음의 입력 필드 타입에서 작동.
      -->text, search, url, tel, email, and password.
  • required :
    • required 속성은 부울(boolean) 속성이다.존재하는 경우, 폼을 제출 하기 전에 입력필드가 작성되어야만 함을 지정.
    • required 속성은 다음의 입력 필드 타입에서 작동한다.
      -->text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
  • step :
    • 요소에서 유효한 숫자 단계을 지정한다.
      Example: step="3" 이면, 유효한 숫자는 -3, 0, 3, 6, etc.
      Tip: step 속성은 유효한 값의 범위를 생성할 때 max 와 min 속성과 함께 사용될 수 있다.
    • step 속성은 다음과 같은 입력 필드와 함께 작동 된다. -->number, range, date, datetime, datetime-local, month, time and week.
  • label태그
    • 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용.
    • 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다.
    • 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있다.
      • 라디오 버튼이나 체크박스를 클릭할때 해당 버튼을 클릭하지 않고 버튼옆에 텍스트를 클릭해도그 버튼이 선택되도록 하는 태그.
      • 스크립트를 쓰지 않고 태그로 간단하게 사용이 가능.
      • 일반 사용예 : 체크박스1
      • label 사용예 :
        해당 input 태그에 사용할 id 를 정해주고, 라벨 태그의 for="해당id" 해주시면 된다.이러한 요소는 브라우저에 의해 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있다.

 

Label 과 Input 요소를 연결하는 방법(2가지)

      1.명시적 연결

          Label요소의 for 속성과 인풋 요소의 id 속성을 동일한 값을 사용하여 명시적으로 연결하는 것.

        label for="user-id">아이디</label>
         <input type="text" id="user-id">

 

      2.암시적 연결

          Input 요소를 레이블 요소로 감싸 연결하는 방법.

        <label> 태그를 사용할 수 있는 태그
           --<button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>

  • 각 연결방법의 차이점
    •   명시적, 암시적 연결 모두 동일한 결과를 제공. 다만, 접근성과 관련하여 차이가 있다.
    •   명시적연결은 label 요소를 이용해 input 요소와 label을 연결해주면 input 요소에 어떠한 내용을 입력해야 하는지 명확해지기 때문에 접근성이 향상된다. 그리고 연결된 레이블 콘텐츠를 사용자가 클릭할 경우, input 요소의 체크 상태가 변경 되므로 사용성 또한 향상 된다.
    •   암시적연결은 일부 정보 통신 보조기기에서 연결을 인식하지 못하는 문제가 있어, 접근성을 염두에 둔다면 명시적 연결을 사용하는 것을 보다 권장한다.