결과물

설명

<input type="text">태그에 검색기능을 추가할라면 <form action="">태그를 이용해야한다. action에다가 검색링크를 써넣으면 해당 검색링크로 입력한 내용이 보내진다.

예를들면

    <form action="https://www.google.com/search" method="GET">
      <input name="q" type="text">
    </form>

이렇게 작성하면 input에다가 입력한 내용이 구글로 검색이 되는데 input의 name은 서버로 전달되는 이름으로 구글검색링크를 이용할 경우 'q'를 써야하고 네이버는 "query"를 사용한다.

주요 코드

    <form action="https://search.naver.com/search.naver" method="GET">
    <div class="input-group">
      <span class="input-text">NAVER</span>
      <input name="query" type="text" class="input" placeholder="검색어를 입력하세요." >
      <input type="button" value="검색" class="button">
    </div>
    </form>

//css
      .input-text{
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        padding: 7px;
        background-color:rgb(84, 223, 75);
        position:relative;
        top: 3px;
        left:6px;
      }
      .input-group{
        position:relative;
        width:350px;
        margin: auto;
        line-height:200px;
      }
      .input{
        width:200px;
        height:30px;
        border: 2px solid rgb(78, 227, 119);
      }
      .button{
        height:36px;
        background-color:rgb(64, 219, 52);
        position:relative;
        left:-7px;
        top:1.5px;
      }

: 초록색배경의 NAVER는<span>태그의 input-text클래스로 <input>태그 부분과의 크기랑 위치를 맞추기 위해 css코드 작성
<input>태그의 placeholder는 처음에 입력부분에 보여지는 글씨로 입력부분을 누루면 글씨가 사라진다. 보통 입력해야할 내용에 대해 설명하는 글이 들어간다.