728x90
03. <input> 태그를 사용한 문제 I
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(문서 안에 CSS가 미리 만들어져 있다고 가정한다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문제 3</title>
<style>
ul {
list-style:none;
}
li {
line-height:50px;
}
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
// 코드를 작성하세요
</body>
</html>결과 화면
A. 해설
우선 <ul></ul>의 <li></li>태그로 순서없는 리스트를 만들어준다.
그 후 '이름'에는 <input>태그 'text'를, '전화'에는 <input>태그 'number'를, '이메일'에는 <input>태그 'email'을 유형으로 넣어준다.
마지막 순서로, 'button' 유형으로 버튼을 생성하여 '예약하기'라는 내용을 입력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문제 3</title>
<style>
ul {
list-style:none;
}
li {
line-height:50px;
}
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label for="phone">전화</label>
<input type="number" id="phone">
</li>
<li>
<label for="u_mail">이메일</label>
<input type="email" id="u_email">
</li>
<li>
<button type="button">예약하기</button>
</li>
</ul>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > HTML 문제 풀이' 카테고리의 다른 글
| 04. <input> 태그를 사용한 문제 II (0) | 2022.03.07 |
|---|---|
| 02. 표 태그를 사용한 문제 (0) | 2022.02.11 |
| 01. 텍스트 태그와 목록 태그를 사용한 문제 (0) | 2022.02.11 |