본문 바로가기

HTML32

9.7 datalist 요소 9.7 datalist 요소 datalist 요소는 다른 요소를 위해 사전에 정의된 항목을 option 요소를 이용하여 설정하는데 사용하는 요소로 보통 input 요소와 함께 사용되며 input의 list 속성에 datalist 요소의 id를 설정하여 같이 사용하게 됩니다. 예를 들어 사용자가 입력할 수 있는 선택 가능한 프로그래밍 언어를 “C#, HTML5, JAVA, XML, C”로 미리 정의하여 사용한다면 다음과 같이 나타낼 수 있습니다. 위와 같이 datalist 요소의 전역 속성인 id 속성을 이용하여 datalist 요소에 대한 고유한 식별이 가능하도록 하고 option 요소의 value 속성에 방금 전 언급한 선택 가능한 프로그래밍 언어들을 설정하면 됩니다. 이제 준비가 되었으므로 메모장을 .. 2013. 7. 31.
9.6 select 요소 9.6 select 요소 select 요소는 선택 가능한 리스트를 나타내는데 사용하는 요소로 option, optgroup 요소를 자식 요소로 가질 수 있으며 option 요소를 자식요소로 가질 경우 다음과 같은 형식을 이용합니다. 리스트 항목1 리스트 항목2 … 이러한 select 요소는 다음과 같은 고유의 속성들이 사용하여 드롭다운 리스트를 동작하지 못하게 하거나 항목 수를 제한하는 등에 작업을 수행할 수 있습니다. 속성 기능 autofocus 페이지가 로드될 때 자동적으로 드롭다운 리스트가 포커싱되도록 설정 disabled 드롭다운 리스트가 동작하지 못하도록 할 때 사용 form select 요소가 속하는 form을 명시할 때 사용 multiple 여러 개의 항목을 선택할 수 있도록 설정 name .. 2013. 7. 31.
9.5 button 요소 9.5 button 요소 button 요소는 하나의 버튼을 나타내는 것으로 input 요소에서 설명한 button 형태와 유사합니다. button 요소에서도 type 속성값이 중요한데 form 전송(submit)에 사용되는 submit 속성값과 폼(form)을 초기화하는 reset 속성값을 설정할 수 있으며 사용 형식은 다음과 같습니다. 버튼에 나타낼 문자열 혹은 이미지 버튼에 나타낼 문자열 혹은 이미지 위와 같이 button 요소에서는 input 요소에서 달리 버튼(button)에 나타낼 문자열이나 이미지를 태그 블록 내에 “텍스트”, “” 형태로 명시하여 나타낼 수 있습니다. 메모장을 열어서 HTML5 문서의 기본적인 코드를 작성하고 … 블록을 다음과 같이 작성합니다. 학생 정보 이름 학번 전송(su.. 2013. 7. 31.
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.