Programing/HTML

[HTML] Form 정리 (3)

쿠크 2021. 7. 7. 17:06
  • type="url"
    • input 태그의 type 속성값을 "url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.
    • 입력 값은 양식을 제출하기 전에 비어 있거나 형식이 올바른 URL인지 확인하기 위해 자동으로 유효성 검증이 된다.
    • pattern 속성을 사용하여 값이 유효하도록 값과 일치해야 하는 정규식을 지정할 수 있다.

      <input id="myURL" name="myURL" type="url" required pattern=""..myco.."" title="hte URL must be in a Myco domain">
  • type="email"
    • email 사용자가 전자 우편 주소를 입력하고 편집 할 수 있도록 해준다.
    • multiple 속성이 지정된 경우 전자 우편 주소 목록을 표시하는 데 사용된다.
    • list속성을 지정하여 사용자가 선택할 수 있는 기본 옵션 목록을 제공 할 수 있다.
    • 사용자가 해당 옵션으로 제한되지는 않지만 자주 사용하는 전자 메일 주소를 더 빨리 선택 할 수 있다.

<input type="email" size="40" list="defaultEamils">  
   <detalist id="defaultEamils">
      <option value="abcd@test.gov.uk">
      <option value="abcd111@test.net">
      <option value="abcd111@test.net">
   </datalist>

  • type="password"
    • 사용자가 비밀번호를 안전하게 입력 할 수 있는 방법을 제공.
    • 일반적으로 각 문자를 별표("*") 또는 점("•") 과 같은 기호로 바꿔서 읽을 수 없도록 텍스트가 가려지는 한 줄 일반 텍스트 편집기 컨트롤로 표시됨.
    • 다음 예는 4자리 이상 8자리 이하의 16진수만을 구성된 값만 유효한다.
       

<label for="hexId">Hex ID : </label>
    <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" title="Enter an ID consisting of 4-8 hexadecimal digits" autocomplete="new-password">
 

  • type="date"
    • 사용자가 날짜를 입력 할 수 있는 입력 필드 작성 요소.
    • 결과 값은 년, 월 및 일을 포함하지만 시간은 포함하지 않는다.
    • UI는 브라우저마다 다르다.(ie는 지원 안됨)
     <input type="data" value="2021-07-07">

 

  • type=datetime-local"
    • datetime-local 입력 컨트롤을 생성해서 사용자가 년,월,일 을 포함하여 날짜와 시간을 시간과 분으로 쉽게 입력 할 수 있도록 한다.(파이어폭스, 사파리, ie는 지원안됨)
  • type="month"
    • 사용자가 월과 연도를 쉽게 입력 할 수 있도록 월과 연도를 입력 할 수 있는 입력 필드를 만든다.
    • 값은 "YYYY-MM" 형식의 문자열 이며 여기서 YYYY는 연도, MM는 월 이다.(DD는 일을 뜻함) (파이어폭스, 사파리, ie는 지원안됨)
  • type="week"
    • 입력 필드를 작성하여 연도를 쉽게 입력 할 수 있다.
    • 해당 연도의 몇번째 주를 입력 할 수 있다.(파이어폭스, 사파리, ie는 지원안됨)
  • type="time"
    • 사용자가 시간 (시간 및 분, 선택적으로 초)을 쉽게 입력 할 수 있도록 설계된 입력 필드를 만든다.(사파리, ie는 지원안됨)
  • type="number"
    • 사용자가 숫자를 입력하는 데 사용.
    • 숫자가 아닌 항목을 거부하는 기본 제공 휴효성 검사가 포함.
    • 브라우저는 stepper 화살표를 제공해서 사용자가 마우스를 사용하거나 손가락으로 가볍게 눌러 값을 늘리거나 줄일 수 있음.(ie10부터 지원)
  • type="range"
    • 사용자가 주어진 값 이상이어야 하고, 다른 주어진 값 이상이어야 하는 숫자 값을 지정할 수 있게 한다.
    • 정확한 값은 중요하지 않는다.
    • 일반적으로 숫자 입력 유형과 같은 텍스트 입력 상자 대신 슬라이더 또는 다이얼 컨트롤을 사용하여 표시.(ie10부터 지원)
  • type="color"
    • 시각적 색상 선택기 인터페이스를 사용.
    • #rrggbb16 진수 형식으로 텍스트 필드에 색상을 입력하여 사용자가 색상을 지정할 수 있는 사용자 인터페이스 요소를 제공(ie는 지원안됨)
  • type="checkbox"
    • 체크박스는 활성화 되면 체크 표시(✔)가 나타나는 사각형 모양의 박스 형태로 표시됨
    • 체크박스는 사용자가 여러 선택사항 중에서 하나 이상의 값을 선택할 수 있게 해준다.

 

(참고) 

  • name : 체크박스의 이름
            - 같은 분류의 체크박스는 같은 이름으로 지정해 준다
            - 성별을 선택하는 체크박스에는 모두 ‘gender’라는 이름을 지정했고, 좋아하는 과일을 선택하는 체크박스는 사과든, 바나나든 모두 ‘fruits’라는 이름을 지정     
  • value : 선택 항목들이 가지는 고유한 값
            - 여기에 지정한 값들이 ‘제출(submit)’ 버튼을 누르면 서버로 전송됨.
       
  • checked : 사전에 선택된 값
            - 사과항목에는 ‘checked’라는 속성이 하나 더 적혀 있다.
            - ‘checked’라는 속성을 적어주면, 화면이 처음에 로딩될 때, 해당 항목은 기본으로 선택이 된 채로 보여진다.