5. html5 웹폼
- 2. 유형 설명 코드 텍스트 텍스트를 입력합니다 <input type="text"> 패스워드 비밀번호 입력. <input type="password"> 체크박스 클릭할 때마다 on/off <input type="checkbox"> 라디오 버튼 그룹 중에서 한가지 선택 <input type="radio"> 파일 파일 업로드 <input type="file"> 전송 버튼 폼에 입력한 값 전송 <input type="submit"> 리셋 버튼 폼에 입력한 값 모두 취소 <input type="reset">
- 3. 유형 설명 코드 이메일 주소 이메일 주소를 입력합니다 <input type="email"> 웹 사이트 주소를 입력합니 웹 주소 <input type="url"> 다 숫자(스핀상자) 숫자를 ▲ /▼ 로 눌러 선택 <input type="nuber"> 슬라이드 막대로 지정된 범 숫자(슬라이드더) <input type="range"> 위의 숫자 선택 달력에서 날짜 선 택 , <input type="date"> 날짜/시간 등 스핀 박스에서 시간 선택 <input type="datetime"> 검색 상자 검색 상자 삽입 <input type="search"> 색상 색상 선택 <input type="color">
- 4. HTML 5 <input> 요소 이메일 주소 필드 type=“email” • 기존 HTML에서는 자바스크립트를 이용해서 이메일 형식에 맞는지 체크 • HTML5에서는 사용자 입력 단계에서 이메일 주소인지 아닌지 확인 가능
- 5. HTML 5 <input> 요소 이메일 주소 필드 type=“email” • <input type="email">로 지정해 놓으면 사용자가 해당 필드에 포커스를 갖다놓으면 자동으로 키보드 입력 화면이 전환됨 • 길게 <space> 키가 표시되었던 자리에 메일 주소를 입력하기 편하도록 작은 <space> 키와 <@> 키, 그리고 <.>키가 함께 표시됨
- 6. <form> <label for=mail>메일주소</label> <input id="mail" type="email" placeholder="example@domain.com" required> <input type="submit" value="등록"> </form>
- 7. HTML 5 <input> 요소 이메일 주소 필드 type=“url” • 기존 HTML에서는 텍스트 필드로 사용 • HTML5에서는 웹 주소 필드를 따로 인식
- 8. HTML 5 <input> 요소 이메일 주소 필드 type=“url” • <input type="url">로 되어 있는 필드에 입력하려고 할 경우 텍스트 필드나 이메일 필드에서 보였던 <space>키는 보이지 않는다. • <.com> 키를 오래 누르고 있으면 <.edu>나 <.org> 같은 다른 도메인도 선택할 수 있다.
- 9. HTML 5 <input> 요소 스핀 박스 숫자 필드 type=“number” <input type="number" min="최소값" max="최대값" step="간격" value="초기값"> • min="최소" : 필드에 입력할 수 있는 최소값 • max="최대값" : 필드에 입력할 수 있는 최대값 • step="간격" : 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자의 간격 지정. 기본값은 1이며 생략 가능. • value="기본값" : 필드에 표시할 초기값.
- 10. <ol> …… <li> <label>주문개수</label> <input id="num" type="number" min="1" max="3" value="1"> </li> </ol>
- 11. 아이폰의 숫자 필드 입력 화면
- 12. HTML 5 <input> 요소 날짜 필드 type=“date”, type=“datetime” 유형 설명 코드 날짜 연도와 월, 날짜까지 선택 <input type="date"> 월 연도와 월까지 선택 <input type="month"> 주 연도와 주까지 선택 <input type="week"> 시간 시간 표시 <input type="time"> 날짜 선택 후, 시간 함께 표 날짜와 시간 시 <input type="datetime"> UTC 시간대 기준 날짜와 시간 날짜 선택 후 시간 함께 표시 <input type="datetime-local">
- 13. <ol> …… <li> <label>원하는 배송일</label> <input id="wanted" type="date"> </li> </ol> 오페라에서만 제대로 지원함
- 14. HTML 5 <input> 요소 슬라이드 막대 숫자 필드 type=“range” <input type=“range” min="최소값" max="최대값" step="간격" value="초기값"> • min="최소" : 움직일 수 있는 최소값 • max="최대값" : 움직일 수 있는 최대값 • step="간격" : 숫자의 간격 지정. 기본값은 1이며 생략 가능. • value="기본값" : 슬라이드의 초기 위치. 생략하면 중간에 놓임.
- 15. <ol> …… <li> <label>주문개수</label> <input id="num" type="range" min="1" max="5" value="1"> </li> </ol>
- 16. HTML 5 <input> 요소 <input type="month"> • 달력에서 날짜를 선택하면 월까지만 입력된다. • 날짜 형식은 'yyyy-mm'
- 17. HTML 5 <input> 요소 <input type=“week”> • 달력에서 날짜를 선택하면 1월 첫째주를 시작으로 몇 번째 주인지, 그 날짜가 속한 주(week)가 자동으로 입력됨
- 18. HTML 5 <input> 요소 <input type=“time”> • 시간 지정 • 00:00부터 23:59까지 입력하거나 화살표로 조절
- 19. HTML 5 <input> 요소 검색 상자 필드 type=“search” <input type=“search”> • 검색어를 입력하자마자 검색 상자 오른쪽에 ×가 표시되고, ×를 클릭하면 검색 상자 안에 입력한 검색어를 손쉽게 지울 수 있다
- 20. HTML 5 <input> 요소 색상 필드 type=“search” <input type=“color”> 오페라에서만 제대로 지원함
- 21. <input> 태그의 새로운 속성들 자동 완성 제어 autocomplete • 사용할 수 있는 값 : on(기본값), off • 폼에서 개인 정보를 입력할 때 사용자가 따로 자동 완성 기능을 끄지 않더라도 문서에서 알아서 자동 완성 기능을 꺼줌.
- 22. <li> …… <input id="email" type="email" placeholder="example@domain.com" required autocomplete="off" > …… <input id="phone" name="phone" placeholder="02)1111- 1111" required autocomplete="off">
- 23. ܳٴdzdzٱ=※” ܳٴdzdzٱ=※ڴ”
- 24. <input> 태그의 새로운 속성들 입력 필드에 커서 표시 autofocus • 페이지 불러오자 마자 필드 안에 마우스 커서 표시 • HTML4에서는 자바스크립트 이용 HTML5는 autofocus 속성으로 해결
- 25. <li> <label for="name">이름</label> <input id=name type="text" placeholder="8자 미만 공백없이" autofocus> </li> <li> <label for=email>메일주소</label> <input id="email" type="email" placeholder="example@domain.com"> </li> ……
- 26. <li> <label for="name">이름</label> <input id=name type="text" placeholder="8자 미만 공백없이" autofocus> </li> <li> <label for=email>메일주소</label> <input id="email" type="email" placeholder="example@domain.com"> </li> ……
- 27. HTML 5 <input> 요소 사용 가능 값 제시 list=“...”, <datalist> <datalist> <option value="서버 값" label="사용자를 위한 레이블“> <option value="서버 값" label="사용자를 위한 레이블"> .... </datalist> • 사용자가 텍스트 필드에 내용을 입력할 때 몇 개의 입력 가능한 값들을 데이터 목록으로 보여준다
- 28. <li> <label for="prodid">색상</label> <input id="prod" type="text" list="mycolor"> <datalist id="mycolor"> <option value="black" label="검정색"> <option value="white" label="흰색"> <option value="skyblue" label="하늘색"> </datalist> </li> ……
- 29. <li> <label for="prodid">색상</label> <input id="prod" type="text" list="mycolor"> <datalist id="mycolor"> <option value="black" label="검정색"> <option value="white" label="흰색"> <option value="skyblue" label="하늘색"> </datalist> </li> ……
- 30. HTML 5 <input> 요소 힌트 표시하기 placeholder • 필드 안에 적당한 내용을 표시하고 있다가 사용자가 클릭하면 내용이 사라진다 • HTML4에서는 자바스크립트로 처리 HTML5에서는 placeholder 속성으로 처리 가능
- 31. <li> <label for="name">이름</label> <input id=name type="text" placeholder="8자 미만 공백없이"> </li> <li> <label for=email>메일주소</label> <input id="email" type="email" placeholder="example@domain.com"> </li> ……
- 32. <li> <label for="name">이름</label> <input id=name type="text" placeholder="8자 미만 공백없이"> </li> <li> <label for=email>메일주소</label> <input id="email" type="email" placeholder="example@domain.com"> </li> ……
- 33. HTML 5 <input> 요소 필수 입력 필드 체크 required • submit 단추를 클릭하면 서버로 폼을 전송하기 전에 필수 필드에 내용들이 모두 채워졌는지 검사 • HTML4에서는 자바스크립트로 필수 필드 처리 HTML5에서는 required 속성 확인가능 • required ="required"라고 하거나 required라고만 해도 된다
- 34. <li> <label for="name">이름</label> <input id=name type="text" placeholder="8자 미만 공백없이" autofocus required> </li> <li> <label for=email>메일주소</label> <input id="email" type="email" placeholder="example@domain.com" required> </li> ……
- 35. <li> <label for="name">이름</label> <input id=name type="text" placeholder="8자 미만 공백없이" autofocus required> </li> <li> <label for=email>메일주소</label> <input id="email" type="email" placeholder="example@domain.com" required> </li> ……
- 36. HTML 5 <input> 요소 단추로 폼 컨트롤 formaction, formenctype, formmethod, formnovalidate, formtarget <form> 태그의 action 속성을 덮어쓴다. formaction 폼을 전송해서 처리할 프로그램이 있는 URL을 지정. <form> 태그의 method 속성을 덮어쓴다. formmethod action URL로 폼을 전송하기 위한 방법 지정 사용할 수 있는 값은 get, post, put, delete http://wufoo.com/html5/attributes/13-formaction.html
- 37. HTML 5 <input> 요소 <form> 태그의 enctype 속성을 덮어쓴다 폼 컨텐츠를 인코딩하기 위한 mime 유형 지정 formenctype 사용할 수 있는 값: application/x-www-form- urlencoded, multipart/form-data, text/plain <form>의 novalidate 속성을 덮어쓴다. formnovalidate 'true' 값이 선택되면 전송될 때 input 필드 값을 검증 하지 않는다 <form>의 target 속성을 덮어쓴다. formtarget 사용할 수 있는 값 : _blank, _self, _parent, _top