본문 바로가기

html5 교재22

HTML5에 새롭게 추가된 input 요소의 type 속성값들 HTML5에 새롭게 추가된 input 요소의 type 속성값들 속성값 기능 tel 사용자로부터 입력되는 데이터가 전화번호일 때 사용 search 웹사이트에 검색 기능을 구현할 때 사용 url 사용자로부터 입력되는 데이터가 웹페이지 주소일 때 사용 email 사용자로부터 입력되는 데이터가 이메일 주소일 때 사용 datetime 날짜나 시간을 나타냄. 2012년 2월 8일의 경우 datetime-local 지역 날짜나 시간을 나타냄. date YYYY-MM-DD 형태의 날짜를 나타냄. 2012년 2월 8일의 경우 2012-02-08 month 월를 나타냄. 2012년 2월의 경우는 2012-02 week 주를 나타냄. 2012년의 1월 3째주는 2012-W03 time 00:00 ~ 24:00와 같이 하루의.. 2013. 7. 31.
9.4 input 요소 9.4 input 요소 input 요소는 일반적으로 사용자로부터 간단한 텍스트 문자부터 특정 데이터 형식을 취하는 전화번호, 이메일 등과 같이 비교적 간단한 데이터를 사용자로부터 입력받아야 할 경우 사용할 수 있는 요소로 많은 속성들이 있지만 그 중 몇 가지 속성들을 이용하여 일반적인 사용 형식을 나타내면 다음과 같습니다. 위에서 pattern 속성은 정규표현식(Regular Expression)을 이용하여 사용자가 입력하는 데이터에 대해서 일정한 규칙을 따르도록 처리할 때 사용하는 속성으로 가장 .. 2013. 7. 31.
9.3 lable 요소 9.3 lable 요소 label 요소는 Input 요소와 같은 다른 요소의 라벨을 정의하는데 사용되는 요소로 label 요소 자신이 어느 form에 속하는지를 설정하는 form 속성과 관련된 컨트롤의 id를 명시할 때 사용하는 속성인 for가 정의되어 있습니다. 간단하게 다음에 설명할 input 요소를 2개를 이용한 예제를 해볼까요? 메모장을 열어서 기본적인 코드를 작성하고 다음과 같이 시작태그와 마침 태그 안에 코드를 작성합니다. 당신이 좋아하는 영화 장르는? 액션 공포 위와 같이 작성한 후 “labelEx.html” 로 저장한 후 IE를 통해 보면 다음과 같이 checkbox 형태의 input 요소의 라벨로 각각 액션, 공포 형태로 나타내게 되며 내부적으로 label 요소의 for 속성을 이용하여 .. 2013. 7. 31.
9.2 fieldset, legend 요소 9.2 fieldset, legend 요소 fieldset 요소는 폼(form) 안에서 관련된 요소들을 그룹화하는데 유용하게 사용할 수 있는 요소로 다음과 같은 고유한 속성들이 정의되어 있습니다. 속성 기능 disabled fieldset에 포함된 요소들에 대해서 마우스 클릭 불가와 같이 disable 시킬 때 사용하는 속성으로 특정한 목적이 만족되면 Javascript를 이용하여 disable 해제하고 원하는 동작을 처리 form fieldset이 속하는 form을 명시할 때 사용 name fieldset의 이름을 명시 다음으로 legend 요소는 fieldset 요소의 제목을 나타내는데 요소로 다음과 같은 형태로 사용할 수 있습니다. fieldset의 제목 ... 메모장을 열어서 로 시작하는 기본적인.. 2013. 7. 31.