|
<from>...</from> 속성
ACTION → 사용자가 입력할 데이터를 처리할 CGI 프로그램의 URL을 지정
METHOD → "GET" 이나 "POST"중 하나의 값이 지정되는데 디폴트값은 "GET" 이다.
GET : 사용자가 양식을 통해 입력한 데이터들은 환경변수로 프로그램에 넘어가게 됨
POST : 데이터들은 표준 입력 방식으로 서버에 보내지게 됨
ENCTYPE → CGI 프로그램에 보내질 데이터 타입을 정하는 곳
디폴트값 : "application/x-www-form-urlencoded" 이다
<input> 속성
type= 만들고자 하는 도구의 이름을 입력합니다.
NAME → 만들어진 도구는 반드시 이름이 필요합니다.
VALUE → default로 입력될 값
SIZE = n → 만들어진 도구의 크기
MAXLENGTH = n → 입력할 데이터의 최대 크기
|
type
|
입력양식
|
|
text
|
텍스트 입력 양식
|
|
password
|
암호 입력 양식
|
|
checkbox
|
체크 박스 입력 양식
|
|
hidden
|
숨겨진 입력 양식
|
|
image
|
이미지 입력 양식
|
|
radio
|
라디오 버튼 입력 양식
|
|
submit
|
데이터 보내기 입력 양식
|
|
reset
|
재입력 입력양식
|
<SELECT >... </SELECT>--->
<SELECT NAME="form_select">
<OPTION VALUE="서울">서울
<OPTION VALUE="부산">부산
<OPTION VALUE="광주">광주
<OPTION VALUE="전주">전주
</SELECT>
< TEXTAREA > ... </TEXTAREA>-->여러줄의 데이터를
입력할 수 있다.
<TEXTAREA NAME="command" ROWS=10 COLS=50>
</TEXTAREA>
1)텍스트 입력 양식
텍스트 입력 양식은 한줄짜리 문자열을 입력받기 위해 사용하는 형식으로,가장 많이 사용되는 입력 양식이며,
<input>의 type 속성을 text로 설정함으로써 만들 수 있다.
예제)
|
<html>
<body>
데이터 입력후 전송 버튼을 누르시오<P>
<form method="get" action="process.cgi">
<input type="text" name="mytext">
<input type="submit" value="전송">
</form>
</body>
</html>
|
|
2)체크박스
사용자에게 선택할 수 있는 목록을 나열해 죽 선택하도록 하는 입력 양식으로 여러 개의 항목을 동시에 선택할
수 있다.
예제)
|
<html>
<body>
<form method="get" action="cgi file name">
<ol>
<li><input type="checkbox" name="aaa" value="a">상추
<li><input type="checkbox" name="bbb" value="b">삼겹살
<li><input type="checkbox" name="ccc" value="c">고추
</ol>
</form>
</body>
</html>
|
|
3)라디오 버튼
라디오 버튼은 여러 선택 사항을 나열학 그 중에서 한 가지만 선택하도록 하는 입력양식이다. 만약 다른 목록을
선택하면
기존에 선택한 목록은 선택이 해제된다.
예제)
|
<html>
<body>
<form method="get" action="cgi file name">
<ol>
<li><input type="radio" name="aaa" value="a">고추
<li><input type="radio" name="aaa" value="b">삼겹살
<li><input type="radio" name="aaa" value="c">상추
<li><input type="radio" name="aaa" value="d">마늘
</ol>
</form>
</body>
</html>
|
|
4)명령 버튼
데이터 보내기(submit) 버튼은 사용자가 입력한 테이터를 <form>에서 지정한 action속성의
url로 보내는 역할을 한다.
데이터 입력 취소(reset)버튼은 지금까지 입력한 것을 모두 초기값으로 clear한다.
예제)
|
<html>
<body>
<form method="get" action="cgi url">
성명:<input type="text" name="name" size=12><p>
전화:<input type="text" name="phone size=32><p>
<input type="submit" name="transfer" value="전송">
<input type="reset" name="cancel" value="취소">
</form>
</body>
</html>
|
|
5)목록 선택
HTML 문서 내의 여러 가지 옵션 중 하나를 선택하는 방법으로 <select>를 이용하여 구현할
수 있으며,
기능은 라디오 버튼이나 체크박스와 비슷하다.
예제)
|
<html>
<body>
<form method="get" action="cgl url">
<select name="과일종류" size=2 multiple>
<option>사과
<option>배
<option>딸기
<option>바나나
<option>키위
</select>
</form>
</body>
</html>
|
|
6)텍스트 영역
텍스트 영역은 text와 달리 여러 줄에 많은 양의 정보를 입력할 수 있으며 <textarea>태그를
이용한다.
예)
|
<html>
<body>
<form method="get" action="cgi url">
<textarea name="textarea" rows="5" cols="50>
내용을 넣은세요
</textarea>
</form>
</body>
</html>
|
|
|
