4407092
This presentation is the property of its rightful owner.
Sponsored Links
1 / 56

수업자 : 박선홍 PowerPoint PPT Presentation


  • 70 Views
  • Uploaded on
  • Presentation posted in: General

H TML/ css (5 차시 ). 수업자 : 박선홍. 목 차. F orm 미리 보기. F orm 태그. F orm 태그 입력 방식. 1 Form 미리 보기. 미리 보기. 미리 보기. 미리 보기. 미리 보기. 미리 보기. 미리 보기. 네이버. 미리 보기. 네이버. 다음. 미리 보기. 네이버. 다음. 학교 공홈. 미리 보기. 네이버. 다음. 학교 공홈. 구글. 미리 보기. 네이버. 다음. 학교 공홈. 네이트. 구글. 미리 보기. 네이버. 다음.

Download Presentation

수업자 : 박선홍

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


4407092

HTML/css

(5차시)

수업자: 박선홍


4407092

목차

Form 미리 보기

Form 태그

Form 태그 입력 방식


4407092

1 Form 미리 보기


4407092

미리 보기


4407092

미리 보기


4407092

미리 보기


4407092

미리 보기


4407092

미리 보기


4407092

미리 보기

네이버


4407092

미리 보기

네이버

다음


4407092

미리 보기

네이버

다음

학교 공홈


4407092

미리 보기

네이버

다음

학교 공홈

구글


4407092

미리 보기

네이버

다음

학교 공홈

네이트

구글


4407092

미리 보기

네이버

다음

학교 공홈

네이트

구글

페이스 북


4407092

2 Form 태그


4407092

<form action ="URL" method="데이터 전송 방식" name="폼이름">~~</form>

action : 데이터를 전송 받아 처리할 웹 프로그램의 위치

method : 데이터가 서버에 전송되는 방식

get - 주소표시줄에 데이터 전달

post - 파일에 데이터 전달

name : 폼의 이름을 지정

폼과 관련된 모든 태그는 <form>~~</form>안에 들어간다!!!!!

Form 태그


4407092

3 Form 태그 입력 방식


4407092

1. 한 줄 입력 6. 여러 줄 입력

2. 암호 입력7. 전송

3. 체크박스8. 취소

4. 라디오 버튼9. 파일 업로드

5. 드롭 다운

Form 태그 입력 방식


4407092

<input type="text" value="" name="" size="" maxlength="">

text : 한 줄을 입력 할 수 있는 상자

value : 입력창의 초기값

name : text 입력상자의 이름(데이터의 변수 이름)

size : 입력창의 크기 (단위 : byte)

maxlength : 최대 입력 가능 문자 수

1. 한 줄 입력


4407092

<input type="text" value="14" name="아이왑" size="50"

maxlength="15">

1. 한 줄 입력


4407092

<input type="text" value="14" name="아이왑" size="50"

maxlength="15">

1. 한 줄 입력


4407092

<input type="text" value="14" name="아이왑" size="50"

maxlength="15">

1. 한 줄 입력


4407092

<input type="password" value="" name="" size="" maxlength="">

password : 암호화 된 입력상자

value : 입력창의 초기값

name : password 입력상자의 이름(데이터의 변수 이름)

size : 입력창의 크기 (단위 : byte)

maxlength : 최대 입력 가능 문자 수

2. 암호 입력


4407092

<input type="password" value="14" name="아이왑" size="50"

maxlength="15">

2. 암호 입력


4407092

<input type="password" value="14" name="아이왑" size="50"

maxlength="15">

2. 암호 입력


4407092

<input type="password" value="14" name="아이왑" size="50"

maxlength="15">

2. 암호 입력


4407092

<input type="checkbox" value="" name="" checked>

checkbox : 여러 항목 중 여러 개를 선택하는 입력 상자 (다중선택)

value : 데이터의 변수 값

name : 데이터의 변수 명

checked : 기본으로 체크

3. 체크박스


4407092

<input type="checkbox" value="1" name="sb" checked>웹 프로그래밍

<input type="checkbox" value="2" name="sb">프로그래밍

<input type="checkbox" value="3" name="sb">네트워크 기초

3. 체크박스


4407092

<input type="checkbox" value="1" name="sb" checked>웹 프로그래밍

<input type="checkbox" value="2" name="sb">프로그래밍

<input type="checkbox" value="3" name="sb">네트워크 기초

3. 체크박스


4407092

3. 체크박스 ex


4407092

&nbsp; &nbsp;

3. 체크박스 ex


4407092

&nbsp; &nbsp;

3. 체크박스 ex

<input type="checkbox" value="1" name="b" checked>4반&nbsp;&nbsp;

<input type="checkbox" value="2" name="b" checked>5반&nbsp;&nbsp;

<input type="checkbox" value="3" name="b" checked>6반&nbsp;&nbsp;

<input type="checkbox" value="4" name="b">10반&nbsp;&nbsp;

<input type="checkbox" value="5" name="b">11반&nbsp;&nbsp;

<input type="checkbox" value="6" name="b">12반


4407092

<input type=“radio" value="" name="" checked>

radio : 여러 항목 중 한 가지를 선택하는 입력 상자 (단일선택)

value : 데이터의 변수 값

name : 데이터의 변수 명

checked : 기본으로 체크

4. 라디오 버튼


4407092

<input type=“radio" value="" name="" checked>

radio : 여러 항목 중 한 가지를 선택하는 입력 상자 (단일선택)

value : 데이터의 변수 값

name : 데이터의 변수 명

checked : 기본으로 체크

4. 라디오 버튼


4407092

<input type="radio" value="1" name="b" checked>웹 프로그래밍

<input type="radio" value="2" name="b">프로그래밍

<input type="radio" value="3" name="b">네트워크 기초

4. 라디오 버튼


4407092

4. 라디오 버튼


4407092

4. 라디오 버튼

<input type="radio" value="1" name="b" checked>4반&nbsp;&nbsp;

<input type="radio" value="2" name="b">5반&nbsp;&nbsp;

<input type="radio" value="3" name="b">6반&nbsp;&nbsp;

<input type="radio" value="4" name="b">10반&nbsp;&nbsp;

<input type="radio" value="5" name="b">11반&nbsp;&nbsp;

<input type="radio" value="6" name="b">12반


4407092

<select name="">

<option value="" selected>항목

<option value="">항목1

<option value="">항목2

</select>

name : 드롭 다운입력상자의 이름(데이터의 변수 이름)

<option> : 항목을 표시

select : 기본으로 선택

5. 드롭 다운


4407092

<select name="">

<option value="" selected>항목

<option value="">항목1

<option value="">항목2

</select>

name : 드롭 다운입력상자의 이름(데이터의 변수 이름)

<option> : 항목을 표시

select : 기본으로 선택

5. 드롭 다운


4407092

<select name="아이왑">

<option value="0" selected>과목

<option value="1">웹 프로그래밍

<option value="2">프로그래밍

<option value="3">네트워크 기초

</select>

5. 드롭 다운


4407092

<select name="아이왑">

<option value="0" selected>과목

<option value="1">웹 프로그래밍

<option value="2">프로그래밍

<option value="3">네트워크 기초

</select>

5. 드롭 다운


4407092

<select name="아이왑">

<option value="0" selected>과목

<option value="1">웹 프로그래밍

<option value="2">프로그래밍

<option value="3">네트워크 기초

</select>

5. 드롭 다운


4407092

5. 드롭 다운


4407092

<textarea cols="" rows="" name="">~~</textarea>

cols : 칸 수

rows : 줄 수

name : 데이터 변수 이름

6. 여러 줄 입력


4407092

<textarea cols="100" rows="10" name="아이왑">아이왑14기</textarea>

6. 여러 줄 입력


4407092

<textarea cols="100" rows="10" name="아이왑">아이왑14기</textarea>

6. 여러 줄 입력


4407092

<textarea cols="100" rows="10" name="아이왑">아이왑14기</textarea>

6. 여러 줄 입력


4407092

<input type="submit" value="">

submit : 데이터를 서버로 전송

value : 버튼의 이름

7. 전송


4407092

<input type="submit" value="아이왑">

7. 전송


4407092

<input type="reset" value="">

reset : 데이터를 초기상태로 되돌림

value : 버튼의 이름

8. 삭제


4407092

<input type="reset" value=“아이왑">

8. 삭제


4407092

<input type="file" name="" size="">

file : 파일을 업로드 할 때

name : 데이터의 변수 이름

size : 업로드 입력상자의 크기

9. 파일 업로드


4407092

<input type="file" name="아이왑" size="50">

9. 파일 업로드


4407092

숙제!!

  • Table 태그를 이용하여 시간표 만들기

  • <form>태그를 이용하여 회원가입양식 만들어 오기


4407092

Q&A


4407092

Thank you


  • Login