인터넷 프로그래밍 입문 10장연습문제.hwp10장 연습문제
서술형문제
1. 한줄 입력상자, 비밀번호 입력상자의 type 속성은 각각 무엇인가?
▶▶ 한줄 입력상자 : text, 비밀번호 입력상자 : password
2. 여러 줄 입력상자를 만들어주는 태그는 무엇인가?
▶▶ <textarea>
3. 여러 개 중에서 하나만 선택하도록 하는 폼 태그의 type 속성은 무엇인가?
▶▶ radio
4. <form> 태그 안에 있는 폼 양식을 모두 초기화시키는 폼 태그의 type 속성은 무엇인가?
▶▶ reset
5. 라디오 버튼 또는 체크 상자에서 초기 값을 선택되어 있게 하는 속성명은 무엇인가?
▶▶ checked
실습형문제
1. 아이스크림 메뉴 중 하나만 선택하기
|
ㆍ<!--코딩1--> : 메뉴 중에서 하나를 선택할 수 있도록 라디오 버튼 삽입 ㆍ<!--코딩2--> : images/ice_button.gif 그림을 이미지 버튼으로 삽입 ㆍ추가 : 초기값 선택(바닐라 아이스크림) |
|
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td><img src="images/ice.jpg"></td></tr> <tr> <td bgcolor="#F5D8E1" height="40" align="center">
<!-- 코딩1 --> <input type="radio" name="ice" value="1" checked>바닐라 아이스크림 <input type="radio" name="ice" value="2">딸기 아이스크림 <input type="radio" name="ice" value="3">초코 아이스크림 <input type="radio" name="ice" value="4">팥빙수 </td> </tr> <tr> <td bgcolor="#FCF1F4" align="center" height="40">
<!-- 코딩2 --> <input type="image" src="images/ice_button.gif"> </td> </tr> </table> |
2. 태그 연습장 만들기
|
ㆍ<!--코딩1--> : 여러 줄 입력상자 가로 70, 세로 20크기로 삽입 ㆍ<!--코딩2--> : 결과확인, 다 지워, 다시 시작, 사용법 순서대로 버튼 삽입 ㆍ“다 지워” 버튼 : 초기화 버튼으로 설정 |
|
<h2>태그 연습장</h2>
<form> <!-- 코딩1 --> <textarea name=note cols="70" rows="20"></textarea> <p>
<!-- 코딩2 --> <input type=button value=결과확인> <input type=reset value=다지워> <input type=button value=다시시작> <input type=button value=사용법>
</form> |
|
|
심화 연습 문제
1. 사이버 상담 신청서 만들기
|
<html>
<head>
<title>사이버 상담 신청서</title>
</head>
<body>
<table width="558" cellspacing=0 cellpadding=0 border=0 align=center> <tr> <td width="100%"><img src="title.gif"></td></tr> <tr><td> <!-- 종속테이블 시작 ********************************************************--> <table height=270 cellspacing=0 cellpadding=5 width="100%" border=1 bordercolor=white bordercolorlight=gray> <tr> <td bgcolor=#f9f9f9>제목 </td> <td colspan=4> <!-- 코딩1 --><input type="text" name="title" size=60> </td></tr> <tr> <td width=90 bgcolor=#f9f9f9>작성자성명</td> <td width=200> <!-- 코딩2 --><input type="text" name="irum" size=15> </td> <td width=100 bgcolor=#f9f9f9>비밀번호</td> <td width=200> <!-- 코딩3 --><input type="password" name=pw size=15> </td> <td width=2 rowspan=5 bgcolor=#e5e5e5></td> </tr> <tr> <td bgcolor=#f9f9f9>주민번호</td> <td> <!-- 코딩4 --> <input type="text" name="jumin1" size=6>- <input type="text" name="jumin2" size=7></td> <td bgcolor=#f9f9f9>전자우편주소 </td> <td > <!-- 코딩5 --> <input type="text" name="mail" size=20></td> </tr> <tr> <td bgcolor=#f9f9f9>전화번호</td> <td > <!-- 코딩6 --> <input type="text" name="tel1" size=3>- <input type="text" name="tel2" size=4>- <input type="text" name="tel2" size=4> </td> <td bgcolor=#f9f9f9>핸드폰 </td> <td > <!-- 코딩7 --> <select name="phone1"> <option value=1 selected>010 <option value=2>011 <option value=3>016 <option value=4>017 <option value=5>018 <option value=6>019 </select>- <input type="text" name="phone3" size=4>- <input type="text" name="phone3" size=4> </td> </tr> <tr> <td bgcolor=#f9f9f9>분류</td> <td colspan=3 > <!-- 코딩8 --> <input type="radio" name="class">법률 <input type="radio" name="class">세무 <input type="radio" name="class">가정폭력 <input type="radio" name="class">성문제 <input type="radio" name="class">결혼 <input type="radio" name="class">학업 및 진로 </td> </tr> <tr> <td bgcolor=#f9f9f9>상담내용</td> <td colspan=3 > <!-- 코딩9 --> <textarea name="contents" rows="7" cols="65"></textarea> </td> </tr> </table> <!-- 종속테이블 끝 ********************************************************--> </td></tr> <tr><td height=40 align=center> <!-- 코딩10 --> <input type="image" src="bt_enter.gif"> <input type="image" src="bt_cancel.gif"> </td></tr> <tr bgcolor=#f2f2f2> <td align=middle height="25"> 고객님의 상담 신청 내용은 처리 결과가 나오는 대로 메일로 통보해 드립니다. </td> </tr> </table> </form> </body> </html> |
|
|
|
ㆍ<!--코딩1--> : title(name 속성) 입력상자 삽입 ㆍ<!--코딩2--> : irum 입력상자 삽입 ㆍ<!--코딩3--> : pw 비밀번호 입력상자 삽입 ㆍ<!--코딩4--> : 주민등록번호 6자리-7자리 삽입 ㆍ<!--코딩5--> : 이메일 입력상자 삽입 ㆍ<!--코딩6--> : 전화번호 3자리-4자리-4자리 삽입 ㆍ<!--코딩7--> : 휴대폰 선택 010(기본선택), 011, 016, 017, 018, 019 순으로 선택할 수 있는 목록상자-입력상자 4자리-4자리 삽입 ㆍ<!--코딩8--> : 법률, 세무, 가정폭력, 성문제, 결혼, 학업 및 진로 순으로 체크상자 삽입 ㆍ<!--코딩9--> : 여러 줄 입력상자 삽입 ㆍ<!--코딩10--> : bt_enter.gif, bt_cancel.gif 파일을 이미지 버튼으로 삽입 |
'Book' 카테고리의 다른 글
| [한빛미디어] 인터넷 프로그래밍 입문 12장 연습문제 (0) | 2009.05.08 |
|---|---|
| [한빛미디어] 인터넷 프로그래밍 입문 11장 연습문제 (0) | 2009.05.08 |
| [한빛미디어] 인터넷 프로그래밍 입문 9장 연습문제 (0) | 2009.04.28 |
| [한빛미디어] 인터넷 프로그래밍 입문 8장 연습문제 (0) | 2009.04.28 |
| [한빛미디어] 인터넷 프로그래밍 입문 7장 연습문제 (0) | 2009.04.28 |