04. <input> 태그를 사용한 문제 II
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(문서 안에 CSS가 미리 만들어져 있다고 가정한다.)
1. 폼 요소를 삽입할 때 <label>태그를 사용해야 한다.
2. 제목은 <h1>, 목록은 <h4>로 입력한다.
3. '이름' 필드는 텍스트 필드로 삽입하고 '공백없이 입력하세요'라는 힌트를 표시한다.
4. '연락처' 필드는 전화번호에 맞는 필드로 삽입한다.
5. '지원 동기'는 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 필드로 삽입한다.
6. 텍스트 영역의 글자 수는 60자, 화면에 표시할 줄 개수는 5개로 지정한다.
7. 텍스트 영역에 '본사 지원 동기를 간략히 써 주세요.'라는 힌트를 표시한다.
8. 버튼은 <input>태그나 <button>태그를 이용해 만든다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문제 4</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
// 코드를 작성하세요
</div>
</body>
</html>결과 화면
A. 해설
1. 폼 요소를 삽입할 때 <label>태그를 사용해야 한다.
2. 제목은 <h1>, 목록은 <h4>로 입력한다.
3. '이름' 필드는 텍스트 필드로 삽입하고 '공백없이 입력하세요'라는 힌트를 표시한다.
--> <input>태그 유형을 'text'로 하고, 힌트를 표시하는 'placeholder'에 힌트 문구를 작성한다.
4. '연락처' 필드는 전화번호에 맞는 필드로 삽입한다.
--> <input>태그 유형을 'text'로 한다.
5. '지원 동기'는 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 필드로 삽입한다.
--> <label>태그의 <textarea>을 사용한다.
6. 텍스트 영역의 글자 수는 60자, 화면에 표시할 줄 개수는 5개로 지정한다.
7. 텍스트 영역에 '본사 지원 동기를 간략히 써 주세요.'라는 힌트를 표시한다.
--> 'placeholder'로 힌트문구를 표시한다.
8. 버튼은 <input>태그나 <button>태그를 이용해 만든다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문제 4</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li>
<!-- <input>태그 앞 뒤에 <label>과 </label> 태그로 묶어도 됩니다 -->
<label for="sname"> 이름 </label>
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
<label for="snumber"> 연락처 </label>
<input type="text" id="snum">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label><input type="radio" name="field" value="an"> 웹 퍼블리싱</label>
</li>
<li>
<label><input type="radio" name="field" value="pd"> 웹 애플리케이션 개발</label>
</li>
<li>
<label><input type="radio" name="field" value="eng"> 개발 환경 개선</label>
</li>
</ul>
<label>
<h4>지원동기</h4>
<textarea id="motive" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요.">
</textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
<!-- 다음과 같이 작성해도 됩니다.
<button type="submit">접수하기</boutton>
<button type="reset">다시 쓰기</button>
-->
</div>
</form>
</div>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠문제 풀이 > HTML 문제 풀이' 카테고리의 다른 글
| 03. <input> 태그를 사용한 문제 I (0) | 2022.03.07 |
|---|---|
| 02. 표 태그를 사용한 문제 (0) | 2022.02.11 |
| 01. 텍스트 태그와 목록 태그를 사용한 문제 (0) | 2022.02.11 |