Chapter04 HTML 회원 정보 입력 양식 만들기

Slides:



Advertisements
Similar presentations
일정 관리 다이어리 제작 JSP Programming with a Workbook. 학습 목표  사용자의 일정을 관리할 수 있는 다이어리에 대하여 알아보자. JSP Programming with a Workbook2.
Advertisements

HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )
홈페이지 만들기. Cyber 공간에서 자신이 갖고 있는 정보 나 관심사를 다른 사람들에게 체계적으 로 공개하거나, 시간과 장소에 구애 받지 않고 정보화 시대에 발맞춰 자신을 어필 할 수 있음.
HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.
406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.
스타일 시트(테두리) 오산대학 컴퓨터정보과 김 영 권.
XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기
폼(Form) 오산대학 컴퓨터정보과 김 영 권.
Chapter06 폼 HTML5 Programming.
Chapter04 캔버스(2) HTML5 Programming.
Chapter 16 : Struts 프레임워크 2. chapter 16 : Struts 프레임워크 2.
Chapter05 HTML 홈페이지 만들기
파워포인트 2007.
제 7 장 함수 사용을 통해 엑셀 정복하기.
선택하여 붙여 넣기 [편집-지우기-서식] [도구-자동고침옵션] 후 [자동고침] 탭
Chapter04 HTML 회원 정보 입력 양식 만들기
Chapter09 CSS3 애니메이션 HTML5 Programming.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
HTML5 웹 프로그래밍 입문 (개정판) 6장. 다양한 입력 폼.
정보 보안학과.
폼과 관련된 태그들 05.
예제모음.
Excel 일차 강사 : 박영민.
연결리스트(linked list).
Chapter09 JavaScript 구구단표 만들기
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
forms 객체 입력상자 체크상자, 라디오 버튼 목록상자
Chapter05 오디오와 비디오 HTML5 Programming.
학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.
07장. <TABLE> 태그로 표 디자인하기
SqlParameter 클래스 선문 비트 18기 발표자 : 박성한.
Javascript Basic Sample Programs
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
HTML 기본 태그 문자 관련 태그와 속성을 알아본다. 서식 관련 태그와 문서 레이아웃 관련 태그를 알아본다.
DB연동하기 원격db접속.
HTML CSS 자바스크립트 무작정 따라하기
HTML.
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공.
Chapter03 캔버스(1) HTML5 Programming.
게임웹사이트운영 [10] 폼 작성.
Part-02 드림위버 활용 sec-03 폼 및 폼 요소 활용
3. JSP의 기본예제.
2015학년도 PHP 기말 레포트 로그인 홈페이지 제작.
Web & Internet [03] HTML5 다양한 태그
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
HTML5 Canvas 태그 92팸 유승연 안동찬 엄태인 김영재.
제 6 장 엑셀을 이용한 여러 가지 문서 만들기.
입력양식 객체.
폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계
인터넷응용프로그래밍 JavaScript(Intro).
8장. spss statistics 20의 데이터 변환
Chapter05 HTML 홈페이지 만들기 HTML & JavaScript.
HTML5 웹 프로그래밍 입문 4장. 다양한 입력 폼.
단축키 기능 1. 단축키 기능 설명 Alt + R 조회 S 저장 I 삽입 A 추가 D 삭제 P 출력 Q 닫기
자료관리 : 현 화면에서 인쇄할 자료를 입력하여 발행하는 화면 입니다.
.Net Web Application 2007 컴퓨터공학실험(Ⅰ)
메뉴(Menu) 컴퓨터응용 및 실습 I.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
웹과 모바일 홈페이지의 이해와 제작 그리드 레이아웃_웹폼
Data Base Web Programming
Learning HTML5 Canvas #2 Jeon Yong ju.
워드프로세서 실기 10일차 강 사 : 박영민.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
그래픽 컨트롤 (Graphic Control)
6 객체.
Chapter 11. 문서 인쇄 및 파일 형식.
Presentation transcript:

Chapter04 HTML 회원 정보 입력 양식 만들기 misuk6389@naver.com

Contents 1. 표 삽입하기 2. 버튼 삽입하기 3. 입력 양식 폼 만들기 Chapter04 HTML 회원 정보 입력 양식 만들기

프로그램 4-1 Chapter04 [그림 4-1] INFO1의 실행결과 HTML 회원 정보 입력 양식 만들기

표 만들기 표 만들기 <TABLE> 태그를 사용 Chapter04 표 만들기 <TABLE> 태그를 사용 <TABLE> 태그로 시작 하여 </TABLE> 태그로 끝을 맺으며 그 사이에 행과 열에 해당하는 태그를 삽입함으로써 표를 완성시킴 하나의 행의 시작은 <TR> 태그를 사용하며 </TR> 태그로 끝맺음 <TD> 태그를 사용하여 열의 수에 해당하는 셀을 <TR> 태그 사이에 정의 HTML 회원 정보 입력 양식 만들기

2행2열 표 Chapter04 HTML 회원 정보 입력 양식 만들기

표 만들기 <TABLE> 태그, <TR> 태그, <TD> 태그 형식 : Chapter04 <TABLE> 태그, <TR> 태그, <TD> 태그 형식 : <TABLE 속성=값 속성=값......> <TR 속성=값 속성=값......> <TD 속성=값 속성=값......> 내용 </TD> ...... </TR> </TABLE> 속성 : <TABLE> 태그 : WIDTH, HEIGHT, BORDER, ALIGN, CELLSPACING, CELLPADDING <TR> 태그 : ALIGN, VALIGN, BGCOLOR <TH> 태그, <TD> 태그 : WIDTH, HEIGHT, ALIGN, VALIGN, ROWSPAN, COLSPAN, BGCOLOR HTML 회원 정보 입력 양식 만들기

표 만들기 예제 : <BODY> <TABLE> <TR> Chapter04 예제 : <BODY> <TABLE> <TR> <TD> 1행 1열 </TD> <TD> 1행 2열 </TD> </TR> <TD> 2행 1열 </TD> <TD> 2행 2열 </TD> </TABLE> </BODY> HTML 회원 정보 입력 양식 만들기

<TABLE> 태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기

프로그램 4-2 Chapter04 [그림 4-3] TABLETag1의 실행결과 HTML 회원 정보 입력 양식 만들기

표 제목 만들기 <TH> 태그 일반적으로 표를 보면 1행 부분이나 1열 부분에 제목을 넣음 Chapter04 <TH> 태그 일반적으로 표를 보면 1행 부분이나 1열 부분에 제목을 넣음 제목으로 만들고 싶은 셀에 해당하는 <TD> 태그 대신에 <TH> 태그를 사용 <B> 태그를 사용한 것과 같이 글자가 두껍게 표시됨 HTML 회원 정보 입력 양식 만들기

프로그램 4-3 Chapter04 [그림 4-4] TABLETag2의 실행결과 HTML 회원 정보 입력 양식 만들기

<TR> 태그의 속성 Chapter04 <TR> 태그의 속성 HTML 회원 정보 입력 양식 만들기

<TD>, <TH>태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기

셀 합치기 셀 합치기 <TD> 태그의 ROWSPAN 속성과 COLSPAN 속성 사용 Chapter04 셀 합치기 <TD> 태그의 ROWSPAN 속성과 COLSPAN 속성 사용 예를 들어 세로 방향의 3개의 인접한 셀을 합치기 위해서는 ROWSPAN 속성의 값을 ‘3’으로 지정하면 됨 합쳐야 할 3개의 셀에 해당하는 <TD> 태그 모두에 지정할 필요 없이 하나의 셀에 지정하고 나머지 셀들을 삭제 해주면 됨 HTML 회원 정보 입력 양식 만들기

프로그램 4-4 Chapter04 [그림 4-5] TABLETag3의 실행결과 HTML 회원 정보 입력 양식 만들기

표 스타일 지정 Chapter04 표 크기 및 테두리 굵기 지정 <TABLE> 태그의 WIDTH, HEIGHT 속성을 사용하여 가로와 세로 크기를 지정 <TABLE> 태그의 BORDER 속성으로 표의 테두리 굵기 지정 가로 세로의 크기를 지정하는 속성의 값은 픽셀 값으로 지정할 수도 있지만 웹 브라우저 창 너비의 상대적인 크기를 퍼센트(%)로 지정할 수도 있음 HTML 회원 정보 입력 양식 만들기

프로그램 4-5 Chapter04 [그림 4-6] TABLETag4의 실행결과 HTML 회원 정보 입력 양식 만들기

표 스타일 지정 표 셀간의 구분선 두께 및 여백 지정 Chapter04 표 셀간의 구분선 두께 및 여백 지정 셀 간의 구분선 두께를 지정할 때는 CELLSPACING 속성을 사용하며 사용방법 및 값 지정은 BORDER 속성과 같음 셀 간의 구분선과 데이터와의 여백 크기를 지정할 때는 CELLPADDING 속성을 사용 HTML 회원 정보 입력 양식 만들기

프로그램 4-6 Chapter04 [그림 4-7] TABLETag5의 실행결과 HTML 회원 정보 입력 양식 만들기

표 스타일 지정 표 색상 지정 테두리 선의 색을 지정할 때에는 BORDERCOLOR 속성을 사용 Chapter04 표 색상 지정 테두리 선의 색을 지정할 때에는 BORDERCOLOR 속성을 사용 BORDERCOLORDARK 속성을 사용하여 테두리의 어두운 부분 즉, 테두리 아래와 오른쪽 부분의 색을 따로 지정 BORDERCOLORLIGHT 속성을 사용하여 테두리의 밝은 부분 즉, 테두리 위와 왼쪽 부분의 색을 따로 지정 셀에 배경색을 넣고자 할 경우에는 <TR> 태그나 <TD> 태그에 BGCOLOR 속성을 사용하여 지정 배경을 이미지로 지정하고자 할 경우에는 <TABLE> 태그나 <TD> 태그에 BACKGROUND 속성을 사용 HTML 회원 정보 입력 양식 만들기

프로그램 4-7 Chapter04 [그림 4-8] TABLETag6의 실행결과 HTML 회원 정보 입력 양식 만들기

프로그램 4-8 Chapter04 [그림 4-9] INFO2의 실행결과 HTML 회원 정보 입력 양식 만들기

줄 바꿈 제한하기 <TD> 태그의 NOWRAP 속성 Chapter04 <TD> 태그의 NOWRAP 속성 셀 안의 글자는 기본적으로 자동으로 줄 바꿈이 된다. 이를 금지하고자 할 때 사용하는 속성 [그림 4-10] NOWRAP의 실행결과 HTML 회원 정보 입력 양식 만들기

캡션 삽입하기 <CAPTION> 태그 표에 캡션, 즉 첨부 설명을 붙일 수 있음. Chapter04 <CAPTION> 태그 표에 캡션, 즉 첨부 설명을 붙일 수 있음. [그림 4-11] CAPTIONTag의 실행결과 HTML 회원 정보 입력 양식 만들기

버튼 삽입하기 <INPUT> 태그 텍스트 박스를 만들거나 버튼을 사용 Chapter04 <INPUT> 태그 텍스트 박스를 만들거나 버튼을 사용 <INPUT> 태그의 TYPE 속성 값을 지정함으로써 여러 종류의 입력 양식을 만듬 형식 : <INPUT TYPE="타입" 속성=값 속성=값......> 속성 : TYPE, NAME, VALUE, SIZE, MAXLENGTH, CHECKED 예제 : <BODY> <INPUT TYPE="text" NAME="TextBox1"><BR> <INPUT TYPE="radio" NAME="radio" VALUE="radio1"><BR> <INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox1"><BR> <INPUT TYPE="reset" VALUE="취소 버튼"> </BODY> HTML 회원 정보 입력 양식 만들기

<INPUT>태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기

일반적인 입력 양식 만들기 텍스트 박스 <INPUT> 태그의 TYPE 속성의 값을 ‘text’로 지정하여 만듬 Chapter04 텍스트 박스 <INPUT> 태그의 TYPE 속성의 값을 ‘text’로 지정하여 만듬 가장 기본적인 입력 양식 가운데 하나인 한 줄로 된 텍스트 박스가 생성 TYPE 속성을 지정하지 않고 <INPUT> 태그만을 사용해도 기본적으로 한 줄로 된 텍스트 박스가 생성 TYPE 속성의 값을 ‘password’으로 지정하면 비밀번호를 입력할 수 있는 텍스트 박스가 생성 HTML 회원 정보 입력 양식 만들기

여러 줄을 입력할 수 있는 텍스트 박스 <TEXTAREA> 태그 여러 줄을 입력할 수 있는 텍스트 박스 생성 Chapter04 <TEXTAREA> 태그 여러 줄을 입력할 수 있는 텍스트 박스 생성 세로 높이를 지정할 수 있는 ROWS 속성, 가로 길이를 지정할 수 있는 COLS 속성이 있음 형식 : <TEXTAREA 속성=값 속성 값......>...</TEXTAREA> 속성 : ROWS, COLS, NAME. READONLY 예제 : <BODY> <TEXTAREA NAME="TextArea1" ROWS="10" COLS="40"> 텍스트 에어리어입니다. </TEXTAREA> </BODY> HTML 회원 정보 입력 양식 만들기

<TEXTAREA>태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기

프로그램 4-9 Chapter04 [그림 4-12] INPUTTag1의 실행결과 HTML 회원 정보 입력 양식 만들기

선택 입력 양식 만들기 라디오 버튼 체크박스 동그라미 모양의 오직 한 개의 항목만을 선택할 수 있는 버튼 Chapter04 라디오 버튼 동그라미 모양의 오직 한 개의 항목만을 선택할 수 있는 버튼 TYPE 속성 값을 ‘radio’로 지정 체크박스 네모 모양의 여러 개 항목을 한꺼번에 선택할 수 있는 입력양식 TYPE 속성 값을 ‘checkbox’로 지정 HTML 회원 정보 입력 양식 만들기

선택 입력 양식 만들기 라디오 버튼과 체크박스의 속성 Chapter04 라디오 버튼과 체크박스의 속성 NAME 속성은 입력할 필드의 이름을 지정하며 일반적으로 같은 주제에 대해서는 같은 이름으로 지정 VALUE 속성은 사용자가 선택한 항목이 어떤 것인지 알 수 있도록 하는 속성이므로 각 버튼마다 다른 값을 지정해 줘야 함 CHECKED 라는 속성을 사용하면 초기 화면에서 기본적으로 어떠한 항목이 선택되어 표시 HTML 회원 정보 입력 양식 만들기

선택 입력 양식 만들기 <SELECT> 태그, <OPTION> 태그 Chapter04 <SELECT> 태그, <OPTION> 태그 여러 개의 항목이 아래로 늘어져 나타나는 입력양식인 콤보 박스 생성 <SELECT>와 </SELECT>로 묶어 주며 NAME 속성을 사용하여 이름을 지정 형식 : <SELECT 속성=값 속성=값......> <OPTION 속성=값 속성=값......>내용</OPTION> ...... </SELECT> 속성 : <SELECT> 태그 : SIZE, NAME, MULTIPLE <OPTION> 태그 : VALUE, SELECTED, DISABLED HTML 회원 정보 입력 양식 만들기

선택 입력 양식 만들기 <SELECT> 태그, <OPTION> 태그 속성 Chapter04 <SELECT> 태그, <OPTION> 태그 속성 SIZE 속성을 사용하여 감춰지지 않고 화면에 보여지는 항목 수를 지정 한 번에 여러 개의 항목을 선택할 수 있도록 지정하려면 MULTIPLE 속성을 사용 기본 값을 특정한 항목으로 지정하고자 한다면 <OPTION> 태그의 SELECTED 속성 사용 예제 : <BODY> <SELECT NAME="선택"> <OPTION VALUE="select1"> 선택1 </OPTION> <OPTION VALUE="select2"> 선택2 </OPTION> <OPTION VALUE="select3"> 선택3 </OPTION> <OPTION VALUE="select4"> 선택4 </OPTION> </SELECT> </BODY> HTML 회원 정보 입력 양식 만들기

<SELECT>, <OPTION> 태그의 속성 Chapter04 <SELECT> 태그의 속성 <OPTION> 태그의 속성 HTML 회원 정보 입력 양식 만들기

프로그램 4-10 Chapter04 [그림 4-13] INPUTTag2의 실행결과 HTML 회원 정보 입력 양식 만들기

입력 내용 전송하기 전송 버튼 취소 버튼 TYPE 속성의 값을 ‘submit’로 지정 Chapter04 전송 버튼 TYPE 속성의 값을 ‘submit’로 지정 기본적으로 버튼에 ‘쿼리 전송’이라는 글자가 표시 버튼에 다른 이름을 붙이고자 한다면 VALUE 속성 값을 지정 취소 버튼 TYPE 속성의 값을 ‘reset’으로 지정 사용자가 입력한 내용을 한꺼번에 지우는 역할 기본적으로 ‘원래대로’라는 글자가 버튼위에 표시되며 이를 바꾸고자 할 때는 전송 버튼과 마찬가지로 VALUE 속성 값을 지정 HTML 회원 정보 입력 양식 만들기

프로그램 4-11 Chapter04 [그림 4-14] INPUTTag3의 실행결과 HTML 회원 정보 입력 양식 만들기

입력 양식 폼 만들기 <FORM> 태그 모든 입력 양식은 <FORM> 태그 안에 들어감 Chapter04 <FORM> 태그 모든 입력 양식은 <FORM> 태그 안에 들어감 ACTION 속성의 값으로 사용자가 입력한 데이터를 전송할 위치를 지정 ACTION 속성의 값으로는 데이터를 전송할 ‘URL’을 입력하거나 ‘mailto:이메일 주소’ 등의 형식으로 지정 METHOD 속성을 사용하여 전송 방식을 지정 HTML 회원 정보 입력 양식 만들기

입력 양식 폼 만들기 <FORM> 태그 형식 : Chapter04 <FORM> 태그 형식 : <FORM ACTION="URL" METHOD="전송방식"> 내용 </FORM> 속성 : ACTION, METHOD 예제 : <BODY> <FORM ACTION="OK.html" METHOD="POST"> <INPUT TYPE="text"><BR> <INPUT TYPE="submit"> </FORM> </BODY> HTML 회원 정보 입력 양식 만들기

<FORM> 태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기

프로그램 4-12 Chapter04 [그림 4-15] INFO3의 실행결과 HTML 회원 정보 입력 양식 만들기

프로그램 4-13 Chapter04 [그림 4-16] 회원 정보 전송 HTML 회원 정보 입력 양식 만들기

프로그램 4-13 Chapter04 [그림 4-17] 회원 정보 전송 성공 HTML 회원 정보 입력 양식 만들기