[HTML] 폼 form 요소

웹 UI 개발 코칭스터디 1기/미니 프로젝트

개념강의 |  2. HTML 태그 - 13) 폼 요소 - 4

 

해당 강의에서 배운 내용을 바탕으로 아래와 같이 이메일 발송 페이지를 만들어보세요.

코드 작성 조건은 다음과 같습니다.

 

1) '받는 사람'은 <label> 태그로 구성하며, <label>의 for 속성의 값은 "receiver"입니다.

2) 체크를 하거나 체크를 풀 수 있는 버튼입니다.

3) id가 important인 <input>태그와 연결된 <label태그>의 for속성입니다.

4) 100열 30행의 입력이 가능한 textarea 입니다.

5) 적합한 type 속성 값을 넣는다면 <form> 태그 안의 모든 입력 값들이 지워지는 기능을 구현할 수 있습니다.

 

결과)

 

 

코드)

<form>
   <h1>이메일</h1>
   <fieldset>
      <legend>메일 정보</legend>
      _________________________(1)___________________________ <br>
      <label for="cc">참조 : </label> <input type="email" placeholder="aaa@naver.com" id="cc"><br>
      <label for="title">제목 : </label> <input type="____(2)____" id="important">
      <label for="____(3)____">중요!</label> <input type="text" id="title"><br>
      <label for="file">파일첨부 : </label> <input type="file" id="file"><br>
   </fieldset>
   <fieldset>
      <legend>메일 내용</legend>
      <textarea _____(4)_____ placeholder="자기소개는 짧게 해주세요."></textarea><br>
      <button type="submit">전송</button>
      <button _____(5)_____>취소</button>
   </fieldset>
</form>

 

1. <lable for="receiver">받는 사람 : </lable><input type="text" placeholder="aaa@naver.com" id="receiver">

2. checkbox

3. title

4. cols="100" rows="30"

5. type="reset

---

3번) 오답

(3)번 정답: important

문제 화면을 보면 '제목'이 <input type="text">와 연결되어야하고, '중요!'는 <input type="checkbox">와 연결되어야함을 알 수 있습니다. 메일의 제목을 '중요!' 표시 할건지에 대한 연결이기 때문에 title이 아닌 important가 적합합니다.

 

또한,(1)번의 경우 email 형식이기 때문에 <input type="text"> 사용도 가능하지만, 더 구체적으로 <input type="email">사용이 가능합니다.