10장 연습문제

인터넷활용

서술형문제

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 파일을 이미지 버튼으로 삽입

· 키포인트 : 상담 신청서에 포함되는 폼 태그를 모두 삽입하여 문서를 완성한다.