웹 프로그래밍
강의 목표 HTML5의 문서 구조화의 목적과 시맨틱 태그에 대해 이해한다. 웹 폼의 목적을 이해한다. 웹 폼의 요소를 활용하여 사용자로부터 입력 받는 웹 페이지를 작성할 수 있다.
문서의 전형적인 구조 사례 페이지 번호 장 제목 소제목 본문 텍스트 문단 설명 섹션 그림
HTML5의 문서 구조화 기존 HTML의 한계 : 웹 문서 구조를 표현하는 태그 없음 문서 구조화의 이유 시맨틱 웹 <div> 태그나 <table> 태그로 구조화되어 보이게 작성 HTML 페이지의 소스를 보면 문서 구조 파악 불가능 문서 구조화의 이유 검색 엔진이 좋아하는 웹 페이지 작성의 필요성 대두 정보 탐색이 중요해진 시대 사물인터넷으로 IT 장치들이 스스로 정보 검색하는 시대 사용자가 만든 웹 페이지 가치 극대화 – 탐색이 쉽도록 작성 시맨틱 웹 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹 기존 태그 <p>, <div>, <h1>, <h2> 등 태그 사용. 문서의 구조나 의미 전달 어려움 시맨틱 태그 문서의 구조와 의미를 전달하는 태그 <header>, <section>, <article>, <main>, <summary>, <mark>, <time> 구글 검색 엔진 사례 웹 페이지에서 시맨틱 태그 검색 리뷰, 사람, 제품, 업체, 이벤트, 음악 등 검색 결과 제공
HTML5 시맨틱 태그로 구조화한 웹 페이지 사례 <header> <footer> <nav> <section> <article> <aside> <header> <footer> <nav> <section> <article> <aside>
시맨틱 태그 <header> <nav> <section> <article> 페이지나 섹션의 머리말 표현 페이지 제목, 페이지를 소개하는 간단한 설명 <nav> 하이퍼링크들을 모아 놓은 특별한 섹션 페이지 내 목차를 만드는 용도 <section> 문서의 장(chapter, section) 혹은 절을 구성하는 역할 일반 문서에 여러 장이 있듯이 웹 페이지에 여러 <section>가능 헤딩 태그(<h1>~<h6>)를 사용하여 절 혹은 섹션의 주제 기입 <article> 본문과 연관 있지만, 독립적인 콘텐트를 담는 영역 혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용 <article>에 담는 내용이 많은 경우 여러 <section> 둘 수 있음 <aside> 본문에서 약간 벗어난 노트나 팁 신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등 페이지의 오른쪽이나 왼쪽에 주로 배치 <footer> 꼬리말 영역, 주로 저자나 저작권 정보 <header> <footer> <nav> <section> <article> <aside>
문서의 모양은 구조와 별개 시맨틱 태그 <header>, <section>, <article>, <footer>, <nav> 태그 위치와 색, 모양이 자동으로 결정되는 것이 아님 개발자가 CSS3를 이용하여 직접 위치와 색, 모양을 지정해야 함 예제 3-1 참고 <!DOCTYPE html> <html> <head> <title>HTML5 문서 구조 시맨틱 태그 사용</title> </head> <body> <header>header</header> <nav>nav</nav> <section>section</section> <aside>aside</aside> <footer>footer</footer> </body> </html>
예제 3-1 구조화된 HTML5 문서 작성 <!DOCTYPE html> <html> <head><title>HTML5 문서 구조 시맨틱 태그 사용</title> <style> </style> </head> <body> <header class="header">header</header> <nav class="nav">nav</nav> <section class="section">section</section> <aside class="aside">aside</aside> <footer class="footer">footer</footer> </body> </html> CSS3 스트일 시트. 각 영역의 색과 위치 꾸미기 html, body { margin: 0; padding: 0; height: 100%; } .header { width: 100%; height: 15%; background: yellow; } .nav { width: 15%; height: 70%; float: left; background: orange; } .section { width: 70%; height: 70%; float: left; background: olivedrab; } .aside { width: 15%; height: 70%; float: left; .footer { width: 100%; height: 15%; clear: both; background: plum; }
기존 HTML 문서와 HTML5 문서 비교 샘플 웹 페이지 1. 기존 HTML 태그로만 만들기 fig3-04.html, fig3-05.html, fig3-06.html은 모두 동일한 출력
2. HTML5 시맨틱 태그로 작성 1.기존 HTML 태그로 작성 바람직한 웹 페이지 <html> <head> <title>Elvis Presley</title> </head> <body> <div> <div id="header"> <h1><a href="https://www.facebook.com/elvis">Elvis Presley</a></h1> </div> <div id="container"> <div id="post-1"> <h2><a href="https://ko.wikipedia.org/wiki/엘비스_프레슬리"> Who is Elvis?</a></h2> <div class="entry"> <p>엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한 명이었다. 하나의 문화 아이콘으로, 엘비스의 음악들은 세계적으로 선풍적인 인기를 끌었으며 "로큰롤의 제왕"으로 불리곤한다. 그는 미시시피 주의 투펄로에서 태어났다.</p> <div id="post-2"> <h2><a href="http://www.biography.com/people/elvis-presley-9446466"> His music and life</a></h2> <p>Presley received his first guitar as a gift from his mother on his 11th birthday in 1946 and had his first taste of musical success a few years later when he won a talent show at Humes High School in Memphis. </p> <a href="">« Previous Entries</a> <div id="navigation"> <ul> <li><h2>Archives</h2> <li><a href="http://www.elvisthemusic.com/">Elvis The Music</a></li> <li><a href="http://www.graceland.com/">Elvis Home Graceland</a></li> <li><a href="http://www.last.fm/music/Elvis+Presley">Free Listening, Video</a></li> </ul> </li> <div id="footer"> <p>Copyright 2015 Elvis</p> </body> </html> <!DOCTYPE html> <html> <head> <title>Elvis Presley</title> </head> <body> <header> <h1><a href="https://www.facebook.com/elvis">Elvis Presley</a></h1> </header> <section> <article> <h2><a href="https://ko.wikipedia.org/wiki/엘비스_프레슬리"> Who is Elvis?</a></h2> <p>엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한 명이었다. 하나의 문화 아이콘으로, 엘비스의 음악들은 세계적으로 선풍적인 인기를 끌었으며 "로큰롤의 제왕"으로 불리곤한다. 그는 미시시피 주의 투펄로에서 태어났다.</p> </article> <h2><a href= "http://www.biography.com/people/elvis-presley-9446466"> His music and life</a></h2> <p>Presley received his first guitar as a gift from his mother on his 11th birthday in 1946 and had his first taste of musical success a few years later when he won a talent show at Humes High School in Memphis.</p> <nav> <a href="">« Previous Entries</a> </nav> </section> <ul> <li><h2>Archives</h2> <li><a href="http://www.elvisthemusic.com/">Elvis The Music</a></li> <li><a href="http://www.graceland.com/">Elvis Home Graceland</a></li> <li><a href="http://www.last.fm/music/Elvis+Presley">Free Listening, Video</a></li> </ul> </li> <footer> <p>Copyright 2015 Elvis</p> </footer> </body> </html> 2. HTML5 시맨틱 태그로 작성 바람직한 웹 페이지 1.기존 HTML 태그로 작성
HTML5 문서 구조화 연습 문서를 구조화할 때 권장 사항 웹 페이지 전체를 구조화 시맨틱 태그로 분할 웹 페이지 전체 제목과 소개는 <header> 태그로 작성 본문은 <section>으로 묶고, 본문 내에 각 절이나 영역은 <article>로 작성 링크나 메뉴들은 <nav> 태그로 작성 <header>, <section>, <article>, <aside> 등에는 헤딩 태그 (<h1>~<h6>)를 이용하여 제목을 붙임 배경 음악을 연주하는 <audio> 태그는 <header> 영역에 삽입 문서의 모양(<header>, <section>, <article>, <aside>의 배치) 은 CSS3 스타일 시트로 꾸미기
HTML5 문서 구조화 연습용 샘플 웹 페이지 머리말 (<header>) 목차 (<nav>) 절 (<article>) 노트 (<aside>) 본문 (<section>) 꼬리말 (<footer>)
<. DOCTYPE html> <. -- 참고: https://ko. wikipedia <head><meta charset="UTF-8"> <title>시맨틱 태그로 구조화 연습</title></head> <body> <header> <h1>볼프강 아마데우스 모차르트</h1> <p>모차르트(1756년 1월 27일 ~ 1791년 12월 5일)는 1756년 1월 27일 잘츠부르크에서 태어난 천재적인 오스트리아의 작곡가를 소개한다.</p> <figure> <img width="140" height="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wolfgang-amadeus-mozart_1.jpg/500px-Wolfgang-amadeus-mozart_1.jpg"> <figcaption>1770년대 초상화</figcaption> </figure> </header> <nav> <h2>목차</h2> <ul> <li><a href="#life">생애</a></li> <li><a href="#death">죽음</a></li> <li><a href="#music">음악</a></li> </ul> </nav> <section> <article id="life"> <h2>생애</h2> <p>모차르트는 1756년 1월 27일 잘츠부르크에서 태어나서, 궁정 음악가였던 아버지 에게 피아노와 바이올린을 배웠고, 다섯살 때 이미 작곡을 하기 시작했으며, 1764년에서 1765년 사이에 바흐로부터 처음으로 교향곡을 작곡하는 법을 배웠는데 이것이 모차르트가 수많은 교향곡을 남기는 계기가 되었다. 모차르트는 빈에서 1784년에 14세인 베토벤을 만나 베토벤을 교육시키는데 전념하기도 했다. </p> </article> <article id="death"> <h2>죽음</h2> <p>모차르트는 1791년 12월 5일 오전 0시 55분경에 갑자기 병으로 죽었으며 모차르트가 완성하지 못한 작품 레퀴엠은 프란츠 크사버 쥐스마이어(Franz Xaver Süssmayr)가 완성시켰다.</p> <article id="music"> <h2>음악</h2> <p>오페라, 교향곡, 행진곡, 관현악용 무곡, 피아노 협주곡, 바이올린 협주곡, 교회용 성악곡, 칸타타, 미사곡 등 다양한 장르를 아우르며 600 여곡을 작곡하여 후대에 남겼다.</p> </section> <aside id="legend"> <h3>모차르트의 죽음에 얽힌 전설</h3> <p>모차르트의 장례식 날 비가 오고 천둥이 쳤다고 하나 New Groove에 따르면 사실은 구름 한 점 없는 쾌청한 날이었다고 한다.</p> </aside> <footer> <p>2017년 10월 7일 작성, 위키피디어 참고</p> </footer> </body> </html> HTML5 문서 구조화 연습 – HTML 텍스트 머리말 제목 목차 제목 절 제목 절 제목 절 제목 노트 제목
시맨틱 태그들 시맨틱 블록 태그 시맨틱 인라인 태그 <figure> 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화, 소스 코드 등을 통상 적으로 ‘그림’으로 표현 <details>와 <summary> <details>는 상세 정보를 담는 시맨틱 블록 태그 <summary> 태그는 <details>로 구성되는 블록의 제목 표현 시맨틱 인라인 태그 <mark> 중요한 텍스트임을 표시 <time> 텍스트의 내용이 시간임을 표시 <meter> 주어진 범위나 %의 데이터 량 표시 <progress> 작업의 진행 정도 표시
예제 3-2 <figure> 태그 활용 ‘alert() 함수에 대한 설명’과 ‘실행 결과’를 하나의 그림으로 블록화하기 위해 <figure>를 사용한 예를 보여준다. <!DOCTYPE html> <html> <head><title>figure 태그 활용</title> </head> <body> <h3>figure 태그 활용</h3> <hr> <figure id="1-1"> <figcaption>alert() 함수 활용</figcaption> <pre> <code>function f() { alert("경고합니다"); }</code> </pre> <small>실행결과<small> <img src="media/alert.png" alt="실행결과"> </figure> </body> </html> <figcaption>alert() 함수 활용</figcaption> <pre> <code>function f() { alert("경고합니다"); }</code> </pre> <hr> <small>실행결과</small> <img src="media/alert.png" alt="실행결과">
예제 3–3 <details>와 <summary> 활용 이 예제는 <details> 태그를 이용하여 Q&A 리스트를 만든 사례이다. 사용자가 핸들(▶)을 클릭하여 항목을 보거나 숨길 수 있다. <!DOCTYPE html> <html> <head> <title>details와 summary 태그</title> </head> <body> <h3>details와 summary 태그</h3> Q & A 리스트 <hr> <details> <summary>Question 1</summary> <p>웹 개발자가 알아야 하는 언어 3 가지?</p> </details> <summary>Answer 1</summary> <p>HTML5, CSS, Javascript</p> </body> </html> 핸들을 클릭하면 아래와 같이 상세 정보가 펼쳐짐 <details> <summary>Question 1</summary> <p>웹 개발자가 알아야 하는 언어 3 가지?</p> </details>
예제 3–4 시맨틱 인라인 태그 4가지 인라인 시맨틱 태그의 사용 사례를 보여준다. <mark>의 텍스트는 브라우저에 따라 다르게 표현되며 크롬에서는 노란색 배경으로 출력된다. <!DOCTYPE html> <html> <head> <title>인라인 시맨틱 태그</title> </head> <body> <h3>인라인 시맨틱 태그 사례</h3> <hr> <p>내일 <mark>HTML5 시험</mark><br> 시간은 <time>09:00</time><br> 난이도 <meter value="0.8">80%</meter><br> 자료 업로딩(20%) <progress value="2" max="10"></progress><br> </p> </body> </html> <mark> <time> <meter> <progress>
HTML5에서 제거된 태그 다음 태그들은 문서의 시맨틱 구조를 저해한다는 이유로 HTML5에서 제거되었으므로 사용하기 말기 바람 <big>, <center>, <dir>, <font>, <tt>, <u>, <xmp>, <acronym>, <applet>, <basefont>, <frame>, <frameset>, <noframes>, <strike>
웹 폼 웹 폼 폼 요소 웹 페이지에서 사용자 입력을 받는 폼 로그인, 등록, 검색, 예약, 쇼핑 등 폼을 만드는 다양한 태그 <input>, <textarea>, <select> 등 폼 요소 폼 요소 폼 요소 폼 폼 요소
예제 3-5 간단한 로그인 폼 만들기 <!DOCTYPE html> <html> <head><title>로그인 폼</title></head> <body> <h3>로그인 폼</h3> <hr> <form name="fo" method="get"> 사용자 ID : <input type="text" size="15" value=""><br> 비밀 번호 : <input type="password" size="15" value=""> <input type="submit" value="완료"> </form> </body> </html>
폼 작성 폼 태그 <form> 태그로 둘러싸는 모양 name 속성 action 속성 method 속성 폼의 이름 지정 action 속성 폼 데이터를 처리할 웹 서버 응용프로그램의 이름 submit 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로 그램 실행 요청 웹 서버 응용프로그램은 Java, JSP, PHP, C/C++ 등 다양한 언어로 작성 method 속성 폼 데이터를 웹 서버로 전송하는 형식 대표적인 전송 방식 : GET, POST <form name="fo" method="get"> ... </form>
<form> 태그
네이버 검색 사례로 폼 전송 과정 이해 ❶ 네이버 사이트에 접속한다. 검색어 창을 포함하는 폼 코드는 다음과 같다. <form name="sform" action="https://search.naver.com/search.naver" method="get"> <input name="query" type="text"> <input type="submit“ value="검색"> </form> 입력 창에 “Elvis" 입력, “검색” 버튼을 누르면, 브라우저는 <form> 태그의 action=“https://search.naver.com/search.naver”을 참고. search.naver.com 서버에 접속하여 search.naver 응용프로그램의 실행을 요구해야 한다는 것 확인 ❷ 입력 창에 ‘Elvis’를 입력하고 검색 버튼을 누르면 웹 서버 응용프로그램에 보낼 폼 데이터를 만든다. https://search.naver.com/search.naver?... query=Elvis ... ❸ 브라우저는 search.naver.com에 접속. search.naver 실행 요청. query=Elvis를 전달한다. ❹ 웹 서버에서 search.naver 응용프로그램이 실행되고, 검색 결과를 브라우저에게 보낸다. ❺ 브라우저는 검색 결과를 화면에 출력한다.
폼 요소의 종류
텍스트 입력 <input type="text"> <input type="password"> 한 줄 짜리 입력 창 <input type="password"> 암호 입력 창 사용자 입력 문자 대신 '*' 등 다른 글자로 출력 <textarea> 여러 줄 입력 창
예제 3-6 텍스트 입력 <!DOCTYPE html> <html> <head><title>텍스트 입력 폼</title></head> <body> <h3>자기 소개서 작성</h3> <hr> <form> 이름 : <input type="text" value=""><br> 암호 : <input type="password" value="" maxlength="4"><br> 자소서 : <textarea cols="20" rows="5"> 이곳에 자기소개서 작성 </textarea> </form> </body> </html>
데이터 목록을 가진 텍스트 입력 창, <datalist> 목록 리스트를 작성하는 태그 <option> 태그로 항목 하나 표현 <input type=“text”>에 입력 가능한 데이터 목록 제고 나라 : <input type="text" list="countries"> <datalist id="countries"> <option value="가나"> <option value="스위스"> <option value="브라질"> </datalist> 드롭다운 리스트
예제 3–7 데이터 목록을 가진 텍스트 입력 <datalist>를 사용하여 선택 목록을 제공하는 사례를 보인다. <!DOCTYPE html> <html> <head><title>데이터 목록을 가진 텍스트 입력</title></head> <body> <h3>가보고 싶은 곳</h3> <hr> <form> 나라 : <input type="text" list="countries"><br> <datalist id="countries"> <option value="가나"> <option value="스위스"> <option value="브라질"> </datalist> 보고싶은것 : <input type="text" list="what"><br> <datalist id="what"> <option value="산"> <option value="바다"> <option value="도시"> </form> </body> </html> <datalist id="what"> <option value="산"> <option value="바다"> <option value="도시"> </datalist>
텍스트/이미지 버튼 만들기 <input type=“button|reset|submit|image” value=“버튼의 문자열”> <button type=“button|reset|submit”>버튼의 문자열</button>
예제 3–8 다양한 버튼 만들기 <!DOCTYPE html> <html> <head><title>버튼이 있는 입력 폼</title></head> <body> <h3>버튼을 만들자</h3> <hr> <form> 검색: <input type="text" size="10" value=""> <input type="button" value="Q1"> <button type="button">Q2</button><br> submit 버튼 : <input type="submit" value="전송1"> <button type="submit">전송2</button><br> reset 버튼 : <input type="reset" value="리셋1"> <button type="reset">리셋2</button><br> 이미지버튼 : <input type="image" src="media/button.png" alt="이미지 버튼"> <button type="button"> <img src="media/button.png" alt="이미지 버튼"> </button> </form> </body> </html>
선택형 입력 : 체크박스와 라디오버튼 <input type="checkbox"> 체크박스 만들기 <input type=“radio”> 라디오버튼 만들기 name 속성 값이 같은 라디오버튼들이 하나의 그룹 형성
예제 3-9 체크박스 만들기 <!DOCTYPE html> <html> <head><title>체크 박스 만들기</title></head> <body> <h3>먹고 싶은 것 모두 체크하세요</h3> <hr> <form> 짜장면 <input type="checkbox" value="1"> 짬뽕 <input type="checkbox" value="2" checked> 탕수육 <input type="checkbox" value="3"> </form> </body> </html> 캡션 checked 속성이 사용되면 초기에 체크된 상태로 출력 캡션
예제 3-10 라디오버튼 만들기 <!DOCTYPE html> <html> <head><title>라디오버튼 만들기</title></head> <body> <h3>먹고 싶은 것 하나만 선택?</h3> <hr> <form> <input type="radio" name="china" value="1"> 짜장면<img src="media/jajang.png"><br> <input type="radio" name="china" value="2" checked> 짬뽕<img src="media/jjambbong.png"><br> <input type="radio" name="china" value="3"> 탕수육<img src="media/tangsuyuk.png"> </form> </body> </html> 같은 name을 가진 라디오버튼 중 하나만 선택 가능
선택형 입력 : 콤보 박스 <select> 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식 <option> 태그로 항목 하나 표현
예제 3-11 콤보박스 만들기 짜장면, 짬뽕, 탕수육의 3개의 선택 항목을 가지는 콤보박스를 보여준다. <!DOCTYPE html> <html> <head><title>콤보박스 만들기</title></head> <body> <h3>먹고 싶은 음식은?</h3> <hr> <form> <select name="china"> <option value="1">짜장면</option> <option value="2" selected>짬뽕</option> <option value="3">탕수육</option> </select> </form> </body> </html> selected 속성이 사용되면 선택 상태
<label>로 폼 요소의 캡션 만들기 캡션이란? <label> 태그로 캡션과 폼 요소를 한 단위로 묶음 캡션 텍스트를 명료하게 하는 장점 2 가지 방법 사용자 ID : <input type="text"> 캡션 폼 요소 캡션 폼 요소 캡션 <label>사용자 ID : <input type="text" > </label> 캡션 <label for="loginID"> 사용자 ID : </label> <input type="text" id="loginID">
예제 3-12 <label> 태그로 로그인 폼 만들기 <!DOCTYPE html> <html> <head><title>로그인 폼</title></head> <body> <h3>로그인 폼</h3> <hr> <form name="fo" method="get"> <label>사용자 ID : <input type="text" size="15" value=""> </label><br> <label for="pass">비밀 번호 : </label> <input id="pass" type="password" size="15" value=""> <input type="submit" value="완료"> </form> </body> </html>
선택형 요소의 캡션을 <label>로 감싸기 캡션 텍스트나 이미지를 선택해도 폼 요소를 선택한 것으로 처리 <label>짜장면 <input type="radio" name="china" value="1"> </label> 캡션 <label for="china">짜장면</label> <input type="radio" name="china" id="china" value="1"> 캡션 <label> <input type="radio" name="china" value="1"> 짜장면<img src="jajang.png"> </label> 캡션
예제 3-13 <label>로 라디오버튼에 캡션 만들기 <!DOCTYPE html> <html> <head><title>캡션을 가진 라디오버튼</title></head> <body> <h3>먹고 싶은 것 하나만 선택?(<label>이용)</h3> <hr> <form> <label> <input type="radio" name="china" value="1"> 짜장면 <img src="media/jajang.png"> </label><br> <input type="radio" name="china" value="2" checked> 짬뽕 <img src="media/jjambbong.png"> <input type="radio" name="china" value="3"> 탕수육 <img src="media/tangsuyuk.png"> </label> </form> </body> </html> <label>로 캡션 감싸기 캡션 부분 클릭 가능
HTML에서의 색 표현 # 80 00 FF 색 코드 - #rrggbb 색 이름과 색 코드 샘플 red green blue # 80 00 FF 빨간색(red) 성분 0x80(128), 초록색 성분은 없고, 파란색(blue) 성분이 0xFF(255)가 혼합된 보라색
색 입력 폼 <input type="color"> 컬러 다이얼로그 출력, 사용자로부터 색 선택 사용 예 <input type="color" value="#00FF00"> value는 초기 색
예제 3–14 컬러 다이얼로그로 색 입력 응용 <!DOCTYPE html> <html> <head><title>색 입력</title></head> <body> <h3>컬러다이얼로그로 색 입력</h3> <hr> <form> 색 선택 <input type="color" value="#00BFFF" onchange= "document.body.style.color=this.value"> </form> </body> </html> 클릭 value="#00BFFF＂색은 컬러 다이얼로그의 초기 색 사용자가 #FF80FF 색 선택 선택한 색을 브라우저의 바탕 글자에 적용하는 자바스크립트 코드 #FF80FF
시간 정보 입력 폼 요소 <input type="month|week|date|time|datetime-local"> 시간 정보만 입력 가능한 폼 요소
폼 요소 작성 예 달 입력 <input type="month" value="2016-09"> (b) 주 입력 드롭다운 버튼 (b) 주 입력 <input type="week" value="2016-W36"> 드롭다운 버튼 2016년도의 36번째 주를 보여줌
<input type="date" value="2016-09-01"> (c) 날짜 입력 <input type="date" value="2016-09-01"> spin 버튼으로 변경 가능 (d) 로컬 날짜시간 입력 <input type="datetime-local" value="2016-09-01T21:30:10.32"> 9시 30분 10초 32 (e) 시간 입력 <input type="time" value="21:30"> spin 버튼으로만 변경
예제 3-15 시간 정보 입력 폼 요소 활용 이 예제는 시간 정보를 입력 받는 HTML5 폼 요소들의 사례를 보인다. <!DOCTYPE html> <html> <head><title>시간 정보를 입력하는 폼 활용</title></head> <body> <h3>시간 정보 입력 HTML5 폼 요소들</h3> 초기 세팅 : 2016년 9월 1일 밤 9시 30분(10초 32)<br> 시간을 변경해 보세요 <hr> <form> <pre> month : <input type="month" value="2016-09"><br> week : <input type="week" value="2016-W36"><br> data : <input type="date" value="2016-09-01"><br> time : <input type="time" value="21:30"><br> local: <input type="datetime-local" value="2016-09-01T21:30:10.32"><br> </pre> </form> </body> </html>
예제 3–16 생일 날짜 입력 받기 시간 정보를 입력 받는 <input> 태그를 사용하여 생일 날짜를 입력 받아라. <!DOCTYPE html> <html> <head><title>시간 정보 입력 응용</title></head> <body> <h3>생일축하합니다</h3> <hr> 당신의 생일은 2000년 5월 20일입니다. 틀리면 수정하시고 파티 시간과 장소를 입력하세요. <form> <table> <tr><td>생일</td> <td><input type="date" value="2000-05-20"></td></tr> <tr><td>생일파티시간</td> <td><input type="time"></td></tr> <tr><td>생일파티장소</td> <td><input type="text"></td></tr> </table> </form> </body> </html> spin 버튼으로 분 입력
스핀버튼과 슬라이드 바로 편리한 숫자 입력 <input type=“number”> 스핀버튼으로 정교한 값 입력 <input type=“range”> 슬라이드 바로 대략적인 값 입력 <input type="number" min="0.0" max="10.0" step= "0.5"> spin 버튼 (a) spin 버튼 클릭 시 0.0~10.0 사이에서 0.5씩 증감 <input type="range" min="0" max="100" list="temperatures"> <datalist id="temperatures"> <option value="10" label="Low"> <option value="50" label="Medium"> <option value="90" label="High"> </datalist> Medium(50) High(90) Low(10) max (100) min (0) (b) 슬라이드 바를 움직여 0~100사이의 값 입력
예제 3-17 <input type="number|range">로 편리한 숫자 입력 <!DOCTYPE html> <html> <head><title>편리한 숫자 입력</title></head> <body> <h3>홈 제어 시스템 - 온도 조절</h3> <hr> <form> 지속시간 (0.0~10.0시간) : <input type="number" min="0.0" max="10.0" step="0.5"><br><br> 온도 설정 :10° <input type="range" min="10" max="30" list="temperatures">30° <datalist id="temperatures"> <option value="12" label="Low"> <option value="20" label="Medium"> <option value="28" label="High"> </datalist> </form> </body> </html> spin 버튼 value="12" label="Low" value="28" label="High"
입력할 정보의 힌트 보여주기 placeholder 속성에 사용자가 입력할 데이터 힌트 주기 이메일 주소: <input type="email" placeholder="id@host">
형식을 가진 텍스트 입력 <input type=“email”>, email 주소 입력 <input type=“url”>, URL 입력 <input type=“tel”>, 전화번호 입력 검색어 입력, <input type=“search”> 이메일 주소 : <input type="email" placeholder=“id@host"> <input type="submit" value="전송"> 사용자가 입력한 내용 오류메시지 (a) 초기 화면 (b) 이메일 주소를 잘못 입력하고 ‘전송’ 버튼을 클릭하여 전송한 경우 <input type=“url” placeholder=“http://”> <input type=“tel” placeholder=“010-1234-5678”> <input type=“search” placeholder="검색어">
예제 3–18 형식을 가진 텍스트 입력 <!DOCTYPE html> <html> <head><title>형식을 가진 텍스트 입력</title></head> <body> <h3>회원 정보를 입력해주세요.</h3> <hr> <form> email : <input type="email" placeholder="id@host"><br> 홈페이지 : <input type="url" placeholder="http://"><br> 전화번호 : <input type="tel" placeholder="010-1234-5678"> <input type="submit" value="확인"><br><br> 검색어 : <input type="search" placeholder="검색어"> <input type="button" value="검색"> </form> </body> </html>
예제 3–19 폼 요소의 그룹핑 <!DOCTYPE html> <html> <head><title>폼 입력 그룹으로 묶기</title></head> <body> <h3>회원 정보를 입력해주세요.</h3> <hr> <form> <fieldset> <legend>회원정보</legend> 이메일 : <input type="email"><br> 홈페이지 : <input type="url"><br> 전화번호 : <input type="tel"> </fieldset> <small>질문 : Tel. 010-111-1111</small> </form> </body> </html> 그룹 박스