form과 button으로 제출 영역 만들기

이번 단계에서 배울 내용

<form>은 사용자가 입력하거나 선택한 값을 한 묶음으로 제출하는 영역입니다. <button>은 사용자가 실행할 동작을 나타내는 실제 버튼 요소입니다.

method="get"은 검색어처럼 주소에 포함해 요청해도 되는 값을 보낼 때 주로 사용합니다. 버튼에 type="submit"을 지정하면 폼 제출 동작이 분명해집니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<form method="get">
  <input name="keyword" type="search">
  <button type="submit">상품 찾기</button>
</form>

해야 할 일

문서 검색 영역을 제출 가능한 폼으로 바꾸세요. 폼은 search-form, 버튼은 search-button이라는 id를 사용하고 버튼 글은 검색하기로 유지합니다.

완성 조건

• search-form이라는 id의 <form>을 한 개 만듭니다.
• search-button이라는 id의 <button>을 한 개 만듭니다.
• 폼의 method 값은 get입니다.
• 버튼의 type 값은 submit입니다.
• 버튼 안의 글은 검색하기입니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: 폼을 먼저 만든 뒤 그 여는 태그와 닫는 태그 사이에 버튼을 넣으세요.