#30 html - input 태그의 요소들 정리

html 문서의 구조

• hyper text markup language

• semantic tags

• form

  • form

    이렇게 사용된다. Get 메소드를 보내는 방식.

  • text

  • select

              <div\>  
                 <label for\="region"\>지역을 선택해주세요.</label\>  
                 <select name\="region" id\="region"\>  
                   <option value\="" disabled selected hidden\>선택</option\>  
                   <option value\=""\>서울</option\>  
                   <option value\=""\>대전</option\>  
                   <option value\=""\>광주</option\>  
                   <option value\=""\>구미</option\>  
                 </select\>  
               </div\>

    -   disable : 선택하지 못하게 한다.

    -   selected : 가장먼저 골라져있다.(disable해놔서 '서울'만 먼저 보이기 때문에 '선택'이라는걸 보이게 한다.)

    -   Hidden: 보이지 않게 해놓는다.

    -   옵션으로 드랍다운을 할 수 있도록 만든다.

-   radio - 동그랗게 생긴 체크박스가 생긴다.

        <div>
          <p>오늘의 체온을 선택해주세요.</p>
          <input type="radio" name="body-heat" id="normal" value="normal" />
          <label for="normal">37도 미만</label>
          <input type="radio" name="body-heat" id="warning" value="warning" />
          <label for="warning">37도 이상</label>
        </div>

    오늘의 체온을 선택해주세요.

    37도 미만37도 이상

<form action="https://search.naver.com/search.naver" method="GET">
        <label for="input-singer">가수이름</label>
        <input type="text" name="singer-name" id="input-singer" /><br />

-   +a

• Label 태그는 시맨틱 태그와 서치 검색엔진에 잘걸리기 위함도있고, 여러가지 이유를 통해 input 태그에 label 태그를 연결해서 사용하는게 일반적이다.

  <form action\="[https://search.naver.com/search.naver](https://search.naver.com/search.naver)" method\="GET"\> 
           <label for\="input-singer"\>가수이름</label\>  
           <input type\="text" name\="singer-name" id\="input-singer" /><br />

• ** value라는 요소는 get메소드로 보낼때 같이 전달되는 키값이다. id는 input-singer이고 이거는 html안에서만 있는 id 값 **

• label for랑 input이랑 연결되어사용한다.