폼과 관련된 태그들 05.

Presentation on theme: "폼과 관련된 태그들 05."— Presentation transcript:

1 폼과 관련된 태그들 05

2 정보를 입력하는 <input> 태그
05-1 폼 만들기 05-2 정보를 입력하는 <input> 태그 05-3 <input> 태그의 다양한 속성 05-4 여러 데이터를 나열해서 보여주기 05-5 기타 다양한 폼 요소

3 폼 만들기

4 웹에서 만나는 폼

5 폼이 동작하는 방법 폼과 관련된 대부분의 작업들은 정보를 저장하거 나 검색하거나 수정하는 일들
이런 작업은 모두 데이터베이스를 기반으로 한다. 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 여기에서는 서버 프로그래밍에 대해서는 다루지 않고 브라우저에 표시될 폼을 만드는 태그들에 대 해 살펴볼 것이다. 사용자가 [아이디 or 이메일]과 [비밀번호]에 정보 입력  [로그인] 클릭 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내짐 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져 서 사용자가 보내온 아이디와 비밀번호가 서로 일치하는 정보인지 확인하고 그 결과를 브라우저에 보낸다. 회원이라면 로그인한 후의 결과 화면이 나타나고, 아니라 면 로그인 실패 화면이 나타남.

6 <form> 태그 폼을 만드는 기본 태그. <form>과 </form> 사이에 여러 폼 요소 삽입 <form [속성=“속성값”]> 폼 요소 </form> 사용할 수 있는 속성 method : 폼을 전송할 방식 선택 name : 폼을 식별하기 위한 폼의 이름 action : 폼을 전송할 서버 쪽의 스크립트 파일 target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 <form action="register.php" method="post“ target=“_blank“ >

7 <form> 태그 사용 <form action="register.php" method="post" target="_blank"> <ul> <li>이름 : <input type="text" id="user_name"></li> <li>메일 주소 : <input type="text" id="user_mail"></li> <li><input type="submit" value="가입하기"></li> </ul> </form> form.html

8 <fieldset> 과 <legend> 태그
<fieldset [속성="속성 값"] > ... </fieldset> ① id: 영역 id ② disabled: <fieldset> 태그의 자식 요소들을 사용할 수 없게 만든다. ② form: 현재 <fieldset> 태그가 속해 있는 form의 이름 표시 ④ name: 서버로 넘겨줄 이름 지정. <legend> 태그 : 그룹으로 묶은 구역에 제목을 붙이는 태그 <legend> 필드셋의 제목 </legend>

9 <fieldset> 과 <legend> 태그
<form> <fieldset> <legend>로그인 정보</legend> <ul> <li>아이디 : <input type="text" id="user_id"></li> <li>비밀번호 : <input type="password" id="pw"></li> </ul> </fieldset> <legend> 가입자 정보 </legend> <li>이름 : <input type="text" id="user_name"></li> <li>메일 주소 : <input type="text" id="user_mail"></li> <li>생년월일 : <input type="text" id="birth"></li> <input type="submit" value="가입하기"></input> </form>

10 <label> 태그 폼 요소에 캡션(텍스트)을 붙이는 태그
라디오 버튼이나 체크 박스에서 캡션 부분을 클릭해도 라디오 버튼과 체크 박스 버튼이 선택된다. 사용법 [방법1] <label [속성="속성 값"] > 캡션 <input ...> </label> 예) <label>아이디(6자 이상)<input type="text" id="id"></label> [방법2] <label [속성="속성 값"] for="이름" > 캡션 </label><input ... id="이름"> 예) <label for="usl_id">아이디(6자 이상)</label> <input type="text" id="usl_id"> <form> <fieldset> <legend>로그인 정보</legend> <ul> <li><label>아이디(6자 이상)<input type="text" id="id"></label></li> <li><label>비밀번호<input type="password" id="pw1"></label></li> <li><label>비밀번호(확인)<input type="password" id="pw2"></label></li> </ul> </fieldset> </form> <label for=“id”>아이디(6자 이상)</label> <input type="text" id="id">

11 라디오 버트 및 테크 박스와 label 태그 (실습)
<form> <fieldset id="register"> <legend>수강 과목을 선택하세요 <small>(1과목 선택 가능)</small></legend> <ul> <li> <label><input type="radio" name="spk" id="spk" value="low" checked>영어 회화(초급)</label> <input type="radio" name="spk" id="spk" value="low" checked>영어 회화(초급) </li> <label><input type="radio" name="spk" id="spk" value="middle">영어 회화(중급)</label> <input type="radio" name="spk" id="spk" value="middle">영어 회화(중급) <label><input type="radio" name="spk" id="spk" value="high">영어 회화(고급)</label> <input type="radio" name="spk" id="spk" value="high">영어 회화(고급) </ul> </fieldset> </form> -radio = 라디오박스 –checkbox = 체크박스 form_withlabel.html

12 정보를 입력하는 <input> 태그

13 <input> 태그 사용자가 입력하는 부분은 거의 <input> 태그를 이용해 처리
입력하는 내용의 종류는 <input> 태그의 type 속성을 통해 지정 type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다 <input type="유형" [속성="속성 값"] >

14 <input> 태그 <form> <ul>
<li><label>이름 : <input type="text"><label></li> <li><label>메일 주소 : <input type="text"></label></li> <li>소식지 수신 <label><input type="radio" value="yes" name="letter">수신</label> <label><input type="radio" value="no" name="letter">수신 안함</label> </li> <li> <input type="submit" value="가입하기"></li> </ul> </form>

15 <input> 태그의 type 속성

16 <input> 태그의 type 속성

17 <input> 태그의 type 속성 값
type=“hidden” - 히든 필드 화면 상의 폼에는 보이지 않지만, 사용자가 입력을 마치고 폼을 서버로 전송할 때 함께 전송되는 요소. name 속성을 이용해 히든(hidden) 필드의 이름을 지정하고, 그에 대한 값은 value 속성을 이용해 서버로 넘겨준다. 예) - 회원 가입 폼에서 가입 날짜나 가입 경로 등 사용자가 입력한 메일 주소를 체크했는지 관리자만 알고 싶을 때 <input type="hidden" name=“ chk“ value=“N“>

18 <input> 태그의 type 속성 값
type=“text” - 텍스트 필드 한 줄짜리 일반 텍스트를 입력하는 필드. 폼에서 가장 많이 사용하는 요소 (예, 아이디나 이름, 주소 등) type=“password” - 비밀번호 입력 사용자가 입력하는 내용이 화면에 표시되지 않고 ‘ * ’나 ‘●’로 표시된다 사용하는 속성들 ① name: 텍스트 필드를 구별할 수 있도록 붙이는 이름. ② size: 텍스트 필드의 길이. ③ value: 화면에 표시될 때 텍스트 필드 부분에 표시될 내용. (type=“password”일 경우 사용 안함) ④ maxlength: 입력할 수 있는 최대 문자 개수. <label>아이디: <input type="text" id="user_id" size="10"></label> <label>비밀번호: <input type="password" id="user_pw“ size="10"></label> <input type="submit" value="로그인">

19 <input> 태그의 type 속성 값
type=“search” – 검색 상자 IE 9 크롬 파이어폭스 사파리

20 <input> 태그의 type 속성 값
HTML5에서 기존의 텍스트 필드를 세분화 텍스트 필드를 사용했던 내용을 여러 필드로 세분. 모든 브라우저에서 지원하는 것은 아님. type=“search” - 검색 상자 type=“ ” – 메일 주소 입력 필드 type=“url” – 사이트 주소 입력 필드 type=“tel” – 전화번호 입력 필드 type=“number”, type=“range” – 수 입력 필드 type=“color” – 색상 입력 필드

21 <input> 태그의 type 속성 값
type=" ” - 메일 주소 입력 필드 사용자가 입력한 내용이 메일 주소인지 자동 체크 모바일에서 메일 주소 입력이 쉬워짐 <label>이메일 주소 : <input type=" "> </label> type=“url” - URL 입력 필드 사용자가 입력한 내용이 사이트 주소인지 자동 체크 모바일에서 사이트 주소 입력이 쉬워짐 <label>홈페이지 주소 : <input type="url"> </label> <Space>키 없어짐 .와 /가 표시됨 도메인 쉽게 선택 가능 <Space>키 축소 @와 .가 표시됨

22 <input> 태그의 type 속성 값
type=“number” – 스핀 박스로 숫자 입력 <label>주문개수 : <input type="number" min="1" max="5" value="1"> 박스 (1인당 최대 5박스) </label> type=“range” – 슬라이드 막대로 숫자 입력 <label>익은 정도(3단계) : <input type="range" min ="1" max="3" value="3"></label> 사용할 수 있는 속성 ① min: 필드에 입력할 수 있는 최솟값. type=“range”일 때 기본 최솟값은 0 ② max: 필드에 입력할 수 있는 최댓값. type=“range”일 때 기본 최댓값은 100 ③ step: 숫자의 간격. 기본 값 1. 생략 가능 ④ value: 필드에 표시할 초기값

23 <input> 태그의 type 속성 값
type=“radio” – 라디오 버튼 삽입 - 여러 개의 항목 중에서 한 가지만 선택 이미 선택된 항목이 있을 경우 다른 항목을 선 택하면 기존에 선택한 항목은 취소된다. <p>동의하십니까?</p> <label><input type="radio" value="yes" name="agreement">동의함</label> <label><input type="radio" value="no" name="agreement">동의하지 않음 </label> type=“checkbox” – 체크박스 삽입 - 여러 항목 중에서 원하는 항목을 선택하는 것 - 2개 이상도 선택할 수 있다 <h3>사용 중인 SNS는?</h3> <label><input type="checkbox" value="tw">Twitter</label> …. <label><input type="checkbox" value="pint">Pinterest</label>

24 <input> 태그의 type 속성 값
type=“radio”, type=“checkbox”에서 사용할 수 있는 속성 name: 라디오 버튼을 구분하기 위한 이름 value: 서버로 넘길 값. 영문이거나 숫자. 필수 속성 checked: 처음부터 선택된 상태로 화면에 표시하고 싶을 때

25 <input> 태그의 type 속성 값
type=“color” – 색상 필드 ① list: 선택할 수 있는 색상 목록을 따로 정의했을 경우 그 datalist의 id를 지정합니다. ② value: 색상 값 지정. 16진수로 표시 <label>원하는 색상 : <input type="color" value=""></label> 일부 브라우저에서만 제대로 지원하고, 다른 브라우저 화면에서는 기본적인 텍스트 필드로 표시된다

26 <input> 태그의 type 속성 값
날짜를 입력하는 다양한 필드들 유형 소스 설명 날짜 <input type=“date”> 연도와 월, 날짜 월 <input type=“month”> 연도와 월 주 <input type=“week”> 연도와 주 시간 <input type=“time”> 날짜와 시간 <input type=“datetime”> 날짜 선택, 시간 표시(UTC) 날짜와 시간 (로컬) <input type=“datetime-local> 날짜 선택, 시간 표시(로컬)

27 <input> 태그의 type 속성 값
<legend>강의 시간을 선택하세요</legend> <ul> <li> <label class="reg" for="startw">개강 주</label> <input type="week" id="startw"> </li> <label class="reg" for="startt">강의 시간</label> <input type="time" id="startt"> </ul>

28 <input> 태그의 type 속성 값
type=“submit” – 전송 버튼 사용자가 폼에 입력한 정보를 서버로 전송하는 submit 버튼 <form> 태그의 action 속성에 프로그램을 설정했다면 그 프로그램 실행. value 속성을 이용해 submit 버튼에 원하는 이름 붙임 type=“reset” – 리셋 버튼 <input> 요소에 입력된 정보들을 모두 리셋시킴 사용자가 입력한 내용을 모두 지움. value 속성을 사용하여 버튼에 표시할 내용 지정.

29 <input> 태그의 속성들 readonly 속성 placeholder 속성 autofocus 속성
<input type="text" id="uname" placeholder="공백없이 입력하세요" autofocus> <input type="text" id="uname" readonly> readonly 속성 readonly 속성은 해당 필드를 읽기 전용으로 바꾼다. 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고 사용자가 입력은 할 수 없게 한다. 읽기 전용으로 하려면 readonly=“true” 또는 readonly placeholder 속성 <input> 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하 는 것 텍스트 필드 앞에 레이블을 사용하지 않고도 어떤 내용을 입력해야 할지 알려줄 수 있어 편리하다. autofocus 속성 페이지를 불러오자마자 원하는 요소에 마우스 커서가 표시되도록 하는 것 예전에는 자바스크립트를 이용해야 했는데, HTML5에서는 autofocus라는 속성으로 쉽게 해결할 수 있다.

30 <input> 태그의 속성들 autocomplete 속성 required 속성
웹 브라우저의 자동 완성 기능 : 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우 이 전에 입력했던 내용을 힌트로 보여주는 것. 자동 완성 기능을 사용하지 않으려면 브라우저의 환경 설정 명령을 이용해 꺼야 autocomplete 속성을 이용하면 웹 페이지 상에서 자동 완성 기능을 제어할 수 있다. on – 자동 완성 기능을 켠다 off – 자동 완성 기능은 끈다. default - <form> 태그에서 autocomplete 사용 required 속성 [submit] 단추를 클릭해서 서버로 폼을 전송할 때 필수 필드에 필요한 내용이 모두 채워졌는지 검사한 다.  HTML4에서는 자바스크립트로 처리했지만 HTML5에서는 required 속성 사용 <input type="text" id="uid" placeholder="하이픈없이 입력" maxLength="8" required>

31 <실행화면> <textarea name=“memo” cols="40" rows="3"></textarea>

32 실습하기 <소스코드> <form> </form>

33 Datalist 사용 <li> <label for="interest">관심분야</label>
<input type="text" id="interest" list="engChoices"> <datalist id="engChoices"> <option value="grammar" label="문법"></option> <option value="voca" label="어휘"></option> <option value="speaking" label="회화"></option> <option value="listening" label="리스닝"></option> <option value="news" label="뉴스청취"></option> </datalist> </li>

34 <input> 태그의 type 속성 값
type=“file” – 파일 첨부 폼에 파일을 첨부하려고 할 때 사용. 웹 브라우저 화면에 <파일 선택>이나 <찾아보기>, <선택> 등으로 표시됨 <li> <label for="pf">사진</label> <input type="file" name="pf" id="pf"> </li> 크롬 브라우저 오페라 브라우저 파이어폭스 브라우저 IE10 브라우저

35 <input> 태그의 type 속성 값
type=“image” – 전송 버튼 submit 버튼 대신 이미지 사용 예) <input type="image" id="butt" src="login.jpg"> type=“button” – 버튼 submit이나 reset 같은 자체 기능을 가지고 있지 않고 오직 버튼만 삽입한다. 자바스크립트 함수 등을 연결해서 사용한다. 예) <input type=“button” value=“네이버로 가기 “ onclick=“javascript:window.open(‘

36 실습하기 <input type="datetime-local">
<input type="color" id="color"> input type="radio" 서버전송값 초급: low, 중급:middle, 고급:high input type="radio" 서버전송값 TOEIC,TOEFL, OPIC <input type="text" id="interest" list="engChoices"> Data: grammar, voca, speaking, listening, news Label: 문법, 어휘, 회화, 리스닝, 뉴스청취 <input type="time" id="startt"> <input type="week" id="startw">

37 여러 데이터 나열해서 보여주기 -select와 option 태그 form_select1.html <li>
<label class="reg" for="class">학과</label> <select id="class"> <option value="archi">건축공학과</option> <option value="mechanic">기계공학과</option> <option value="indust">산업공학과</option> <option value="elec">전기전자공학과</option> <option value="computer" selected>컴퓨터공학과</option> <option value="chemical">화학공학과</option> </select> </li> form_select1.html

38 여러 데이터 나열해서 보여주기 *select태그의 속성 -size: 초기화면에 보이는 항목 개수 =size=“2”
-multiple: 여러 항목을 선택 =mutiple form_select2.html

39 Output 태그-결과 출력하기 <body> <form>
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)"> <input type="number" name="num1“> +<input type="number" name="num2" > =<output name="result" for="num"></output> </form> </body> num1 =? num2 =? Result =? num1 =10 num2 =10 Result =? num1 =10 num2 =10 Result =? form_output.html

40 Progress 태그 <form> <ul> <li>
<label>10초 남음</label> <progress value="50" max="60"> </progress> </li> <label>진행률 30%</label> <progress value="30" max="100"></progress> </ul> </form> progress1.html progress2.html

41 meter 태그 -value의 값이 최대 또는 최소에 비교해서 차지하는 비중을 나타냄 meter.html <ul>
<li> <label>점유율 0.8 </label> <meter value=".8"></meter> </li> <label>사용량 64%</label> <meter min="0" max="100" value="64"></meter> <label>트래픽 초과</label> <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter> <label>적절한 트래픽</label> <meter value=".5" optimum=".8"></meter> </ul> meter.html