▶ FORM TAG 종합 예제
실제 메모장이나 방명록, 설문조사 등에 이용되는 폼 태그에 대해 예제를 들어
설명하도록 하겠습니다. 제일 많이 사용되기 때문에 중요하니 설명을 읽어보신 후
실습해보도록 하세요. 메모장이나 에디터 등에서 해당 코드를 입력 후 확장자를
.htm이나 .html 등으로 저장해 웹브라우저로 불러오면 결과를 확인할 수 있습니다.
참고로 이제부터 다루는 예제에서는 편의상 <form> 태그는 생략했습니다.
▷ 메모장 형태
메모장의 경우 방문자의 이름, 이메일 주소, 메모, 암호 등을 주로 입력받습니다.
먼저 이 예제를 보세요.
예제 : http://dreamphp.com/study/form_memo.html
소스는 다음과 같습니다.
<html>
<head>
<title>폼 태그 예제 - 메모장</title>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
</head>
<body text='black' bgcolor='white'>
이름 : <input type='text' name='name' size='6'>
이메일 : <input type='text' name='email' size='10'>
메모 : <input type='text' name='memo' size="30">
암호 : <input type='password' name='password' size='6'>
<input type='submit' value='메모남김'>
</body>
</html>
이름, 이메일, 메모는 동일한 형태입니다. type이 text, name이나 size는 마음대로
지정 가능합니다. 적당히 바꿔주면 되겠죠? 암호의 경우 입력할때 다른 사람에게
보여서는 안되므로 type을 password로 지정합니다. 다음 모든 정보를 기입하고
메모남김 버튼을 누르면 지정한 프로그램으로 값을 넘기게 되는 것이죠.
참. name 속성에 지정하는 값이 나중에 PHP 프로그래밍에서 앞에 $ 기호를 붙여
변수로 이용되게 됩니다.
▷ 방명록, 게시판 형태
메모장의 경우와 비슷하나 본문 내용이 길기 때문에 <TEXTAREA></TEXTAREA> 태그를
사용합니다. 그 외는 메모장 형태와 같습니다.
예제 : http://dreamphp.com/study/form_board.html
소스는 다음과 같습니다.
<html>
<head>
<title>폼 태그 예제 - 방명록, 게시판 형태</title>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
</head>
<body text='black' bgcolor='white'>
이름 : <input type='text' name='name' size='6'>
이메일 : <input type='text' name='email' size='8'>
홈페이지 : <input type='text' name='homepage' size='8'><br>
제목 : <input type='text' name='subject' size='60'><br>
본문 : <textarea name='memo' rows='4' cols='60'></textarea><br>
암호 : <input type='password' name='password' size='8'><br>
<input type='submit' value='작성완료'> <input type='reset' value='새로작성'>
</body>
</html>
<TEXTAREA>와 </TEXTAREA> 태그 내에 내용을 적어두게 되면 기본적으로 출력되게
됩니다. <TEXTAREA> 태그에서는 rows와 cols로 크기를 지정하는 것 잊지 마세요~
▷ 설문조사 형태 1
투표나 회원가입폼 등 여러가지 형태로 이용될 수 있으니 알아두면 유용합니다. 먼저
예제를 보세요.
예제 : http://dreamphp.com/study/form_vote1.html
소스는 다음과 같습니다.
<html>
<head>
<title>폼 태그 예제 - 설문조사 형태 1</title>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
</head>
<body text='black' bgcolor='white'>
성별 : <input type='radio' name='sex' checked>남자
<input type='radio' name='sex'>여자<br>
나이 : <input type='radio' name='age' checked>10대 미만
<input type='radio' name='age'>20대
<input type='radio' name='age'>30대
<input type='radio' name='age'>40대 이상<br>
취미 : <input type='checkbox' name='hobby_computer'>
컴퓨터<input type='checkbox' name='hobby_book'>
독서<input type='checkbox' name='hobby_music'>
음악<input type='checkbox' name='hobby_movie'>
영화<input type='checkbox' name='hobby_sport'>
운동<input type='checkbox' name='hobby_etc'>
기타 <input type='text' name='hobby_etc_text' size='8'><br>
<input type='submit' value='투표'>
</body>
</html>
라디오 버튼(type=radio)과 체크 박스(type=checkbox)가 새로 쓰였죠? 라디오 버튼의
경우 하나의 항목만 선택 가능하며, 체크 박스는 여러 항목 선택이 가능합니다.
둘 모두 checked라는 속성을 지정해 미리 선택된 상태로 둘 수 있습니다.
▷ 설문조사 형태 2
설문조사 형태 1과 내용은 같지만 다른 방식으로 꾸며봤습니다.
예제 : http://dreamphp.com/study/form_vote2.html
소스는 다음과 같습니다.
<html>
<head>
<title>폼 태그 예제 - 설문조사 형태 2</title>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
</head>
<body text='black' bgcolor='white'>
성별 : <select name='sex' size='6'>
<option value='male' selected>남자</option>
<option value='female'>여자</option>
</select> 나이 : <select name='age' size='6'>
<option selected value='10'>10대 미만</option>
<option value='20'>20대</option>
<option value='30'>30대</option>
<option value='40'>40대 이상</option>
</select>
취미 : <select name='hobby' size='6' multiple>
<option value='computer'>컴퓨터</option>
<option value='book'>독서</option>
<option value='music'>음악</option>
<option value='movie'>영화</option>
<option value='sport'>운동</option>
<option value='etc'>기타</option>
</select> <input type='submit' value='전송'><br>
(Ctrl 키를 누른 상태로 취미 다중 선택 가능)
</body>
</html>
▷ 파일 업로드 형태
이미지나 압축 파일 등 자료실을 운영할때 사용되는 형태입니다.
예제 : http://dreamphp.com/study/form_upload.html
소스는 다음과 같습니다.
<html>
<head>
<title>폼 태그 예제 - 파일 업로드 형태</title>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
</head>
<body text='black' bgcolor='white'>
파일명 : <input type='file' name='upload' size='30'>
<input type='submit' value='업로드'>
<p> </p>
</body>
</html>
type을 file로 지정하면 찾아보기 버튼이 자동으로 생성됩니다. 파일을 업로드할
경우 <form>에 추가해줘야 할 속성이 있지만 이는 실제 프로그램을 작성하는
부분에서 다루도록 하겠습니다.
▶ 일반적인 폼의 쓰임새는 모두 같습니다. 지금까지의 폼 태그를 충분히 눈여겨
보시고 실습까지 꼭 해보시기 바랍니다.
* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:07)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >> 웹 프로그래밍
* 이동후 위치 : 웹 공부 >>
* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:12)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >>
* 이동후 위치 : 웹 공부 >> 웹 프로그래밍
|
2003.02.24 03:44:41
