HTML5 form, 폼 태그(Forms Tag)에서 추가된 태그

 

 

필드 타입

필드 타입	설명
이메일 필드	<label for="email">이메일 연락처</label> <input type="email" name="email" id="email">
URL 필드	<label for="url">테스트 URL</label> <input type="url" name="url" id="url">
전화번호 필드	<input type="tel">
검색 필드	<input type="search">
슬라이더(범위) 필드	<label for="priority">중요도</label> <input type="range" min="0" max="10" name="priority" value="0" id="priority">
숫자 필드	<label for="estimated_hours">예상 시간</label> <input type="number" name="estimated_hours" min="0" max="1000" id="estimated_hours">
날짜 필드	<label for="start_date">시작 날짜</label> <input type="date" name="start_date" value="2011-02-01" id=" start_date">
날짜와 시간 필드	<input type="datetime">
색상 필드	<label for="project_color">프로젝트 색상</label> <input type="color" name="project_color" id="project_color">
Search	검색 필드 하나 혹은 그 이상의 검색어를 입력하기 위한 한 줄 텍스트 입력창을 제공

 

 

속성

속성	설명
autofocus	·       자동 포커스 <input type=”text” autofocus>
required	·       해당 필드가 제대로 채워졌을 때만 폼을 전송합니다 ·       필수 필드임을 표시
placeholder	·       플레이스홀더 (힌트 문구) <input type=”email” placeholder=”me@example.com”>
pattern	·       사용자가 입력한 내용이 유효한 값이 되기 위해 반드시 일치해야 하는 정규 표현식을 지정합니다.
disabled	·       모든 필드가 정확하게 채워지기 전까지 전송 버튼이 비활성화되어 있게 할 때 자주 사용됩니다. ·       disabled 속성을 지닌 폼 컨트롤은 폼과 함께 전송되지 않습니다.
readonly	·       사용자가 해당 값을 수정할 수 없게 만듭니다. ·       disabled와 달리 이 필드는 포커스를 받을 수 있고, 해당 값이 폼과 함께 전송됩니다.
multiple	·       폼 컨트롤에 값을 여러 개 넣을 수 있음을 나타냅니다. ·       select, email, file에 적용가능합니다.
form	·       HTML5에서 form 속성을 이용하면 폼 요소를 그것들을 감싸고 있지 않은 다른 폼과 연관시킬 수 있습니다. ·       form 속성은 해당 필드셋이나 컨트롤이 연결돼야 하는 form 요소의 id를 값으로 묶입니다.
autocomplete	·       폼이나 폼 컨트롤의 자동완성 기능 사용 유무를 지정합니다.

 

 

 

폼 태그(Forms Tag)에서 추가된 태그

폼 태그에서 새롭게 추가된 태그들 입니다.

·       <datalist>,

·       <keygen>,

·       <meter>,

·       <output>,

·       <progress>입니다.