[HTML 5 반응형 웹디자인_2015.03.27] 7. 웹폼

[ HTML5에서 웹폼 구성 ]

ㅇ <input> .... type으로 구분

            - 모든 폼 태그는 <form></form>사이에 위치

            - <input>,<select>와 같은 폼태그에 <label>태그를 붙임

<lable for=“name”>이름</label>

<input type=“text” id=“name”/>

      ㅇ <fieldset>태그를 사용해 관련된 태그를 그룹화

<fieldset >

<legend>취미</legend>

<input type=“checkbox” name=“h1” id=“h1”/>

<lable for=“h1” >낮잠</label>

<input type=“checkbox” name=“h2” id=“h2”/>

<lable for=“h2” >TV시청</label>

</fieldset>

 

<form id=“tform” action=“a.jsp” method=“post”>

     <fieldset >

<legend>취미</legend>

<input type=“checkbox” name=“h1” id=“h1”/>

<lable for=“h1” >낮잠</label>

<input type=“checkbox” name=“h2” id=“h2”/>

<lable for=“h2” >TV시청</label>

  </fieldset>

</form>

      ㅇ <input>태그의 기존 타입

<input type=“text”> :텍스트 필드

<input type=“password”> : 패스워드 필드

<input type=“checkbox”> : 체크박스

<input type=“radio”> : 라디오 버튼

<input type=“file”> : 파일 선택기

<input type=“submit”> :[submit]버튼

<input type=“reset”> :[reset]버튼

<input type=“button”> :[button]버튼

      ㅇ <input>태그에 추가된 타입

<input type=“email”> :이메일 필드

<input type=“url”> :URL필드

<input type=“tel”> :전화번호 필드

<input type=“number”> :숫자 필드, ▲/▼눌러 선택

<input type=“range”> :숫자 필드, 슬라이드 막대를 사용해 숫자 선택

<input type=“date”> :날짜 선택 필드

<input type=“datetime”> :시간 선택 필드

<input type=“search”> :검색 필드

<input type=“color”> : 색상선택

ㅇ 폼태그에서 새로 추가된 속성

list, max, min, pattern, placeholder(입력도우미, input 칸에 예시가 떠있다), valid, invalid, required(필수 요소 지정),

autocomplete, autofocus등등