[CSS] <from>의 search 검색 요소

[ <form>안에 검색 요소 ]

<from>안에 검색 역할을 할 <input> 들어가는 형태로 구성한다.

- # 검색 요소를 만들기 위해서 input 태그

🔥 problem 🔥
- form 양식은 서버로 제출될 데이터로 사용자에게 입력받은 것이기 때문에 유일해야한다.
- input의 사용자가 검색하려는 데이터 또한 유일해야한다.

💡 solution 💡
- form 태그와 input 태그에 유일함을 의미하는 id 속성 추가

 

<form id="search-form">
   <input type="text" id="search" class="input--text" placeholder="Search GitHub">
</form>

---

- # 데이터 전송을 위한 submit 기능 input 태그

🔥 problem 🔥
- input으로 데이터를 입력받았지만 전송하는 버튼이 존재하지 않는다.

💡 solution 💡
- submit 유형의 input 태그를 작성해준다.

 

[ 전송버튼 (Submit) ]

- 클릭시, 서버로 데이터를 전송한다.

- 제출용 기능으로서 필요한 요소지만 CSS를 통해서 화면에서 숨겨줄 것이다.

 

// 폼 태그로 데이터가 전송될 때는 post 방식

<form id="search-form" method="post" action="">
   <input type="text" id="search" class="input--text" placeholder="Search GitHub">
   <input type="submit" value="Submit">
</form>