|
▷ Form [양식, 정해진 표현 형식] 태그
|
| |
|
⊙ 태그요소
|
|
① <Form> ... </Form>
Form : 정해진 형식 또는 양식에 따라 입력값을 받을 수 있게 한다.
Form 자체만으로 사용되지 않고 하나의 폼안에 여러 가지의 입력개체들이 존재한다. 즉 개체의 모임[Group]을 이룬다.
|
|
⊙ 속성(Atributes)
|
|
|
용도
|
사용법
|
|
name
|
폼 이름 지정 |
<form name="form_name">
|
|
|
전송방식 지정 |
<form method="post / get">
|
|
target
|
전송 대상 지정 |
<form target="form_target"> |
|
accept
|
mime(데이터 형식) 지정 |
<form mime="text/html">
|
|
enctype
|
mime(데이터 형식) 지정 |
<form mime="application/x-www-form-utlen-coded">
|
|
action
|
처리 프로그램 경로지정 |
<form action="처리 프로그램 경로 지정">
|
|
style
|
스타일시트 지정 |
<form style="styleshhet_name"> |
|
class
|
스타일시트 적용(여러번) |
<form class="클래스명">
|
|
id
|
스타일시트 적용(한번) |
<form id="아이디">
|
|
title
|
풍선도움말 |
<form title="폼태그를 배우자">
|
|
| |
|
⊙ Form 태그 예제
|
|
Form 태그 예제 |
실행결과 |
|
<html>
<head>
<title>폼태그 예제</title>
</head>
<body>
<br><h3>간단한 Form 태그 예제</h3>
<hr>
<p>이름과 성적 입력하기</p>
<form name="Exam01" action="result_01.asp" method="post">
이름 : <input type = "text" name = "name" size="21"><br>
성적 : <input type = "text" name = "grade" size="21"><br><br>
<input type = "submit" value = "입력하기">
<input type = "reset" value = "취소하기">
</form>
</body>
</html>
|
간단한 Form 태그 예제
이름과 성적 입력하기
이름 :
성적 :
|
|
| |
|
① <input> ... </input>
input : 입력에 사용되는 정해진 양식이다.
|
⊙ Input Type
|
|
|
태그 사용법
|
실행결과
|
|
|
<input type="radio"> <input type="radio" checked>
|
|
|
checkbox
|
<input type="checkbox"> <input type="checkbox" checked>
|
|
|
text
|
<input type="text" size="10">
|
일반텍스트
|
|
password
|
<input type="password" size="10" value="password">
|
패스워드용(편의상 초기값 적용)
|
|
button
|
<input type="button" value="버튼">
|
|
|
submit
|
<input type="submit" value="확인">
|
|
|
reset
|
<input type="reset" value="취소">
|
|
|
image
|
<input type="image"
src="그림주소"
width=30 height="45"
vspace="5"
hspace="5"> |
|
|
hidden
|
<input type="hidden">
|
|
|
file
|
<input type="file" name="formfile1" size="10">
|
|
|
| |
|
② <select> ... </select> <option> ... </option>
목록에서 선택할 수 있는 입력 도구양식이다.
|
|
|
용도
|
태그 사용법
|
|
name
|
목록 이름 지정 |
<select name="이름">
|
|
|
여러 목록 선택 지정 |
<select multple size="3">
|
|
|
한번에 선택될 목록의 갯수 |
<select multple size="3">
|
|
disabled
|
선택 메뉴 구분자 지정 |
<optgroup label="구분이름">...</optgroup>
|
|
기타
|
|
accesskey, class, id, style, title, datasrc, datafld
|
|
| |
|
select 태그 예제 |
실행결과 |
|
<html>
<head>
<title>폼태그 예제</title>
</head>
<body>
<h3>간단한 Select 예제</h3>
<hr>
<select name="formselect1" size="1">
<option value="http://야후">야후로 가자</option>
<option value="http://천리안">천리안 가자</option>
<option value="http://집">집으로 가자</option>
<option value="http://산">산으로 가자</option>
<option value="http://바다">바다로 가자</option>
</select>
</body>
</html>
|
간단한 Select 예제
야후로 가자천리안 가자집으로 가자산으로 가자바다로 가자 |
|
| |
|
③ <textarea> ... </textarea>
한 줄 입력이 아닌 여러 줄을 입력할 수 있는 입력 도구양식이다.
|
|
|
용도
|
태그 사용법
|
|
|
입력할 수 있는 가로줄 수 |
<textarea type="text" rows="10">
|
|
cols
|
입력할 수 있는 세로줄 수 |
<textarea type="text" cols="10"d>
|
|
name
|
텍스트 필드 이름 지정 |
|
|
readonly
|
읽기 전용 속성 지정 |
<textarea type="text" readonly="readonly">
|
|
disabled
|
텍스트 필드 선택 금지 |
<textarea type="text" disabled="disabled">
|
|
기타
|
|
accesskey, class, id, style, title, datasrc, datafld
|
|
| |
|
textarea 태그 예제 |
실행결과 |
|
<html>
<head>
<title>폼태그 예제</title>
</head>
<body>
<textarea name="formtextarea1" rows="8" cols="42">
</textarea>
</body>
</html>
|
|
|
| |
|
④ <fieldset> ... </fieldset> <legend> ... </legend>
Fieldset : 여러 가지의 입력 양식 폼을 하나의 묶음 단위로 묶어준다.
Legend : Fieldset의 이름을 나타내준다.
|
|
|
용도
|
태그 사용법
|
|
|
입력할 수 있는 줄 수 |
<input type="radio"> <input type="radio" checked>
|
|
cols
|
한 행에 입력할 수 있는 글자 수 |
<input type="checkbox"> <input type="checkbox" checked>
|
|
name
|
텍스트 필드 이름 지정 |
|
|
readonly
|
읽기 전용 속성 지정 |
|
|
disabled
|
텍스트 필드 사용 금지 |
<input type="text" size="10" disabled="disabled">
|
|
tabindex
|
탭 순서 지정 |
<input type="password" size="10" tabindexe="1">
|
|
기타
|
|
accesskey, class, id, style, title, datasrc, datafld
|
|
|   |
|
Fieldset 태그 예제 |
실행결과 |
|
<fieldset>
<legend>
<font color="blue"><b>자기 소개</b></font></legend></br>
아이디 : <input type="text" name="formtext1" size="10">
암호 : <input type="password" name="formtext2" size="10"><br><br>
내가 가장 관심있는 취미는?<br>
<input type="radio">컴퓨터 게임
<input type="radio">바나나 먹기
<input type="radio">원숭이 놀리기 <br><br>
내가 자주 가는 포털 사이트는?
<input type="checkbox">네이버
<input type="checkbox">다음
<input type="checkbox">구글
<input type="checkbox">천당<br><br>
자기 소개란입니다.<br>
<textarea rows="8" cols="43"></textarea><br>
첨부파일 : <input type="file" size="27"><br>
</fieldset>
|
|
|
| |
|
Form과 PHP 연동 예제 |
실행결과 |
|
<form name="form1" method="post" action="변수받을 문서 URL" target="결과 보여줄 타겟">
<p align="left"><u>성적을 확인해 보세요</u><br><br>
이름 : <input type = "text" name = "stu_name" size="22"><br><br>
성적입력<br>
국어 : <input type = "text" name = "kuk" size="1"> <br>
영어 : <input type = "text" name = "eng" size="1">
수학 : <input type = "text" name = "mat" size="1"><br><br>
<input type = "submit" value = "평점확인">
<input type = "reset" value = "취소">
</p>
</form>
|
성적을 확인해 보세요
이름 :
성적입력
국어 :
영어 :
수학 :
|
|
<html>
<head><title>Form 예제 실습 </title>
</head>
<body>
시험 결과<hr>
<?
echo "$stu_name 님의 성적확인<br><br>";
$tot=$kuk+$eng+$mat;
$ave=round($tot/3*100)/100;
echo "국어 점수 : $kuk<br>";
echo "영어 점수 : $eng
";
echo "수학 점수 : $mat<br><br>";
echo "총점은 $tot 평균은 $ave 입니다.<br><br>";
switch((int)($ave/10)) {
case "9":
echo "학점은 A 입니다.
";<br> break;
case "8":
echo "학점은 B 입니다.<br>";
break;
case "7":
echo "학점은 C 입니다.<br>";
break;
case "6":
echo "학점은 D 입니다.<br>";
break;
default:
echo "학점은 F 입니다.<br>";
}
?>
</body>
</html>
|
|
|
| |
|
|