|
<font color="#FF9900">▷ 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>
<h3>간단한 Form 태그 예제</h3>
<hr>
<p>이름과 성적 입력하기</p>
<form name="Exam01" action="result_01.asp" method="post"><br>
이름 : <input type = "text" name = "name" size="21"><br><br>
성적 : <<input type = "text" name = "grade" size="21">
<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" value="password" size="10" ;
|
패스워드용(편의상 초기값 적용)
|
|
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"> |
|
|
hidden
|
<input type="hidden">
|
|
|
file
|
<input type="file" name="formfile1" size="10">
|
|
|
| |
|
② <select> ... </select> <option> ... </option>
목록에서 선택할 수 있는 입력 도구양식이다.
|
|
|
용도
|
태그 사용법
|
|
|
보여질 입력창의 가로크기 |
<input type="radio"><input type="radio" checked>
|
|
name
|
목록 이름 지정 |
<input type="checkbox"><input type="checkbox" checked>
|
|
disabled
|
목록 사용 금지 |
<input type="text" size="10">
|
|
tabindex
|
탭 순서 지정 |
<input type="password" size="10" value="password">
|
|
기타
|
|
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>
한 줄 입력이 아닌 여러 줄을 입력할 수 있는 입력 도구양식이다.
|
|
|
용도
|
태그 사용법
|
|
|
입력할 수 있는 줄 수 |
<input type="radio"><input type="radio" checked>
|
|
cols
|
한 행에 입력할 수 있는 글자 수 |
<input type="checkbox"><input type="checkbox" checked>
|
|
name
|
텍스트 필드 이름 지정 |
|
|
readonly
|
읽기 전용 속성 지정 |
|
|
disabled
|
텍스트 필드 사용 금지 |
<input type="text" size="10">
|
|
tabindex
|
탭 순서 지정 |
<input type="password" size="10" value="password">
|
|
기타
|
|
accesskey, class, id, style, title, datasrc, datafld
|
|
| |
|
textarea 태그 예제 |
실행결과 |
<html>
<head>
<title>폼태그 예제</title>
</head>
<body>
<textarea name="formtextarea1" rows="8" cols="36"></textarea>
</body>
|
|