160524: 49회차
Programming
2016. 5. 24. 11:46
종료하기 전 티스토리 네이버 로그아웃 할 것
1. 툴
동일
추가시:
2. 폴더
동일
추가시:
3. 사용할 사이트
동일
추가시:
4. 공부하는 것
[09] jQuery Effects
1. jQuery Hide/Show
- jQuery는 Html elements를 숨기고 보이는 메소드를 지원합니다.
- method의 파라메터에 speed와 callback함수명이 올수 있습니다.
- speed: slow, fast, milliseconds(초단위)
- callback함수명 :hidden, show 한후 실행할 함수 호출
- toggle(): hide(), show()가 번갈아 호출
1) hide()/show()
>>>>> hideShow.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
2) hide(speed,callback)/show(speed,callback)
>>>>> hideSpeed.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
>>>>>> toggle.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
2. jQuery Fade
- fadeIn()-보여지게 함, fadeOut()-안보이게 함, fadeToggle(), fadeTo()-투명도를 포함
- fadeIn()-보여지게 함, fadeOut()-안보이게 함, fadeToggle(), fadeTo()-투명도를 포함
>>>> fadeIn.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
>>>> fadeOut.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
>>>> fadeToggle.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
>>>> fadeTo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
3. jQuery Slide
>>>> slideDown.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
>>>> slideToggle.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
4. jQuery Animate
- jQuery는 Animation 효과를 지원합니다.
>>>>> animate01.html
- jQuery는 Animation 효과를 지원합니다.
>>>>> animate01.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
>>>>> animate02.html
>>>>> animate03.html
>>>>> animate05.html
>>>>> animate06.html
>>>>> animate02.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
>>>>> animate03.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
>>>>> animate04.html<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
>>>>> animate05.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
>>>>> animate06.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
[10] jQuery UI
http://jqueryui.com/ 접속하여 demo 확인후 소스 습득
[01] HTML5 소개
1. HTML5 소개
5) 새로운 스타일 선언 지원
>>>>> style.html
1) HTML5의 특징
- HTML5는 HTML의 최신 표준.
- HTML5는 HTML 4, XHTML 및 HTML DOM 레벨 2등 모두를 대체하기 위하여 설계됨
- 특별히 추가 플러그인이 필요없이 다양한 콘텐츠를 제공 할 수 있도록 설계됨
- 애니메이션에서 그래픽, 영화, 음악, 또한 복잡한 웹 응용 프로그램을 구축하는 데 사용할 수있는 모든 것을 제공함
- HTML5는 크로스 플랫폼이므로, PC 나 태블릿, 스마트 폰, 또는 스마트 TV를 사용해도 똑같이 작동하도록 설계됨
- HTML5는 <!DOCTYPE HTML>로 시작함
2) HTML5의 새로운 태그
- semantic elements (의미있는 요소) :
<header>, <footer>, <article>, and <section>.
- form를 제어하는 속성들 :
number, date, time, calendar, and range.
- graphic 요소들:
<svg> and <canvas>.
- multimedia(다중매체) 요소:
<audio> and <video>.
3) HTML5의 API's( Application Programming Interfaces)
- HTML Geolocation
- HTML Drag and Drop
- HTML Local Storage
- HTML Application Cache
- HTML Web Workers
- HTML SSE
4) HTML5에서 삭제된 요소와 대체요소
5) 새로운 스타일 선언 지원
>>>>> style.html
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
[02] Semantic Elements(의미가 있는 요소)
1. Semantic Elements(의미가 있는 태그/요소)
2) <article>
3) <nav>
4) <aside>
5) <figure> <figcaption>
6) <details> <summary>
- Semantic = Meaning.
- Semantic elements = Elements with meaning.
- non-semantic elements: <div> and <span> = 불분명한 내용 정의
- semantic elements: <form>, <table>, and <img> = 분명한 내용 정의
- <div id="nav">, <div class="header">, or <div id="footer"> 를대신 하는 Semantic 요소
1) 섹션은 제목을 포함하고 있는 분류 내용의 주제이다.
>>>>>> section.html
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
2) <article>
- 문서 자체에 의미가 있도록해야하며, 웹 사이트의 나머지 부분과 독립적으로 배포 할 수 있어야한다.
- <article> 요소가 이용 될 수있는 곳의 예 :
포럼 게시물
블로그 포스트
뉴스 기사
논평
>>>>> article.html
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
</body>
</html>
3) <nav>
- <nav> 요소는 탐색 링크의 큰 블록을위한 것입니다. 문서의 모든 링크 <nav> 요소 내부에 있어야한다
>>>>> nav.html
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
4) <aside>
- 문서의 주요 내용외에 부가적인 내용을 주영역 주변에 배치.
>>>>> aside.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>나의 가족과 나는 이번 여름에 엡 코트 센터를 방문했다.</p>
<aside>
<h4>Epcot Center</h4>
<p>엡 코트 센터는 디즈니 월드, 플로리다에있는 테마 파크입니다.</p>
</aside>
</body>
</html>
5) <figure> <figcaption>
- <figure> : 설명글을 붙일 대상을 정의.
그림, 도표, 사진, 코드 샘플 등과 같은 자체에 포함된 내용
- <figcaption> : figure로 정의한 대상에 설명을 붙이는 태그.
<figure> 요소에 대한 캡션을 정의함
>>>>> figure.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>그림과 설명글</title>
<style>
figcaption {
display:block;
font :14pt "돋움";
padding : 5px 0 0 0;
}
</style>
</head>
<body>
<figure>
<img src="images/waiting.jpg" title="waiting">
<figcaption>요즘에는 보기 힘든 빨간 우체통</figcaption>
</figure>
</body>
</html>
6) <details> <summary>
- details : 사용자가 보거나 숨길 수있는 추가 세부 사항을 정의
- summary : <details> 요소에 대한 눈에 보이는 제목을 정의
>>>>>> details.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - Refsnes 데이터로. 모든 권리 보유</p>
<p>이 웹 사이트의 모든 내용과 그래픽이 회사 Refsnes 데이터의 재산입니다. </p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>
</body>
</html>
7) <mark>
- mark: CSS를 이용해 강조할 부분의 배경색이나 글자색 지정.
>>>>> mark.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark 사용 </title>
<style>
mark{background-color:#FFFFB3;font-weight:bold;padding:1px}
</style>
</head>
<body>
<h1>Introduction</h1>
<p><mark>"HTML5" </mark>has at various times been used to refer to a wide variety of technologies, some of which originated in this document, and some of which have only ever been tangentially related.</p>
<p>This specification actually now defines the next generation of HTML after <mark>HTML5</mark>. <mark>HTML5</mark> reached Last Call at the WHATWG in October 2009, and shortly after we started working on some experimental new features that are not as stable as the rest of the specification. The stability of sections is annotated in the margin.</p>
</body>
</html>
8) <time>
- time : 날짜와 시간 정보를 표현.
>>>>>> time.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2014-02-14">Valentines day</time>.</p>
<p><b>Note:</b><tiem>요소는 브라우저상에 표시되지 않습니다.</p>
</body>
</html>
9) <header> 사이트 소개, 메인 메뉴, 사이트 로고등 표현, 머리말 지정.
>>>>> header.html
>>>>> header.html
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
10) <footer> : 작성자 정보, 저작권, 관련 문서 링크등 부가적인 정보의 기술.
>>>>> footer.html
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
</body>
</html>
11) 의미가 변경된 태그
- i: 이탤릭 속성이 아니라 기술 용어, 선박 이름, 무대 지문등을 나타냄.
- 텍스트 강조
b: 진하게 출력
strong: 의미상 강조
em: 기울어진 텍스트
mark: 하이라이트 효과
- small: 포커스를 받지 못하는 저작권등을 기술함.
- hr: 단락의 주제를 바꾸는 의미를 하며 <p>태그와 비슷한 기능을 함.
---------------------
semantic
- 사용 이유:
검색 유용한 것
의미있는 태그/요소를 나눠서 검색이 쉽게 되고 여러 곳에서 유용하게 사용하라고 쓰는 거긴 한데...
'ㅅ');;
겉보기에는 별 거 없는 것 같다
1) 섹션은 제목을 포함하고 있는 분류 내용의 주제이다.
2) <article>
- 문서 자체에 의미가 있도록해야하며, 웹 사이트의 나머지 부분과 독립적으로 배포 할 수 있어야한다.
- <article> 요소가 이용 될 수있는 곳의 예 :
포럼 게시물
블로그 포스트
뉴스 기사
논평
----------------------------
3) <nav>
- <nav> 요소는 탐색 링크의 큰 블록을위한 것입니다. 문서의 모든 링크 <nav> 요소 내부에 있어야한다
>>>>> nav.html
4) <aside>
- 문서의 주요 내용외에 부가적인 내용을 주영역 주변에 배치.
5) <figure> <figcaption>
- <figure> : 설명글을 붙일 대상을 정의.
그림, 도표, 사진, 코드 샘플 등과 같은 자체에 포함된 내용
- <figcaption> : figure로 정의한 대상에 설명을 붙이는 태그.
<figure> 요소에 대한 캡션을 정의함
6) <details> <summary>
- details : 사용자가 보거나 숨길 수있는 추가 세부 사항을 정의
- summary : <details> 요소에 대한 눈에 보이는 제목을 정의
이거는 표준이 아니라서 파이어폭스에서 안 돌아갑니다.
7) <mark>
- mark: CSS를 이용해 강조할 부분의 배경색이나 글자색 지정.
이거 부분적으로 <mark>이렇게 안에다가 넣으면</mark>
그담에 style에서 mark하면 됨 '3'
8) <time>
- time : 날짜와 시간 정보를 표현.
이거는 해줘도 보이지는 않음 '3')!!!
9) <header> 사이트 소개, 메인 메뉴, 사이트 로고등 표현, 머리말 지정.
10) <footer> : 작성자 정보, 저작권, 관련 문서 링크등 부가적인 정보의 기술.
11) 의미가 변경된 태그
- i: 이탤릭 속성이 아니라 기술 용어, 선박 이름, 무대 지문등을 나타냄.
- 텍스트 강조
b: 진하게 출력
strong: 의미상 강조
em: 기울어진 텍스트
mark: 하이라이트 효과
- small: 포커스를 받지 못하는 저작권등을 기술함.
- hr: 단락의 주제를 바꾸는 의미를 하며 <p>태그와 비슷한 기능을 함.
요기서 제일 중요한 거는
header랑 footer임
---------------------------------------------------
[03] HTML5 Forms
1. HTML5 Forms
1) Form Elements
>>>> demo_keygen.jsp
- 파이어폭스가 지원하지 않는 기능도 있으니 크롬, 오페라 웹브러우저를 설치.
- 오페라
http://www.opera.com/browser/
- 구글 크롬
http://www.google.com/chrome/?hl=ko
1) Form Elements
- datalist : <INPUT> 요소에 "자동 완성"기능을 제공하는 데 사용
- 사용자는 입력 데이터와 같은 미리 정의 된 옵션의 드롭 다운 목록이 표시
>>>>> datalist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" method="post">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
- keygen : 사용자를 인증하는 안전한 방법을 제공하는 것
- 키 쌍 행태로 필드를 지정합니다.
>>>>> keygen.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="demo_keygen.jsp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
</body>
</html>
>>>> demo_keygen.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8");
String user_name = request.getParameter("user_name");
String security = request.getParameter("security");
%>
<div>
<h1>
Input was received as
</h1>
<h1>
<%=user_name %> <br>
<%=security %>
</h1>
</div>
- output : 계산 결과를 나타냄
>>>>> output.html
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
2) Input Types
color
date : 날짜
datetime :날짜및 시간
datetime-local 날짜 및 시간
email : 메일 형식 검증
month : 월
number : 스핀
range : 슬라이드 막대로 표시하는 숫자
search : 서치를 위한 필드
time : 시간
url : URL 형식 검증
week : 주
>>>>> form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
Select your favorite color: <input type="color" name="favcolor"><br><br>
Birthday: <input type="date" name="bday"><br><br>
Birthday (date and time): <input type="datetime-local" name="bdaytime"><br><br>
Birthday (month and year): <input type="month" name="bdaymonth"><br><br>
E-mail: <input type="email" name="email"><br><br>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br><br>
Points: 0<input type="range" name="points" min="1" max="10">10<br><br>
Search Google: <input type="search" name="googlesearch"><br><br>
Select a time: <input type="time" name="usr_time"><br><br>
Add your homepage: <input type="url" name="homepage"><br><br>
Select a week: <input type="week" name="year_week"><br><br>
<input type="submit">
</form>
</body>
</html>
3) Attributes
- New attributes for <form>:
autocomplete : input 태그에 자동완성 기능
novalidate : 입력값 검증 안함
>>>>> form_attr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" autocomplete="on" novalidate>
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
>>>>> attributes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="demo.jsp" id="form1" method="post">
First name:<input type="text" name="fname" placeholder="First name" required autofocus><br>
비번:<input type="password" name="fname" placeholder="비밀번호 입력" required><br>
번호: <input type="number" name="points" step="3"><br>
E-mail: <input type="email" name="userid" placeholder="이메일을 입력하세요"><br>
<P>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
</P>
Select images: <input type="file" name="img" multiple><br>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="요청한 형식과 일치시키세요"><br>
<input type="submit">
<input type="submit" formaction="demo_admin.jsp" value="Submit as admin">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
<input type="submit" formmethod="get" formaction="demo_get.jsp"
value="Submit using get">
<input type="submit" formnovalidate value="Submit without validation">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
<p>아래의 Last name 필드는 양식 요소를 벗어나지 만 여전히 양식의 일부.</p>
Last name: <input type="text" name="lname" form="form1"><br>
</body>
</html>
★autocomplete - 안되었음
3) Attributes
- New attributes for <form>:
autocomplete : input 태그에 자동완성 기능
novalidate : 입력값 검증 안함
Select images: <input type="file" name="img" multiple><br>
여러 파일 사용 가능
5. 수업
진도:
hw:
6. 할것
'Programming' 카테고리의 다른 글
160526: 51회차 (0) | 2016.05.26 |
---|---|
160525: 50회차 (0) | 2016.05.25 |
160523: 48회차 (0) | 2016.05.23 |
160520: 47회차 (0) | 2016.05.20 |
160519: 46회차 (0) | 2016.05.19 |