웹 TIL) label,검색쿼리구조,드롭다운,value

<h1>Forms Demo</h1>

<form action="/tacos">
  <label for="username">Enter a Username:</label>
  
  <p>
      <input id="username" 
             type="text" placeholder="username">
  </p>
  
  <p>
  <label for="password">Enter a Password</label>
       <input type="password" placeholder="passsword" id="password">
  </p>
  
  <p>
    <label for="color">Enter a color</label>
    <input type="color" id="color">
  </p>
  
  <p>
      <label for="number">Enter a number</label>
         <input type="number" 
         placeholder="enter a number" id="number">
  </p>
       
</form>

 

검색 쿼리 구조 

쿼리 구조는 회사마다 다르다.

//유튜브 https://www.youtube.com/results?search_query=dog
// 네이버 https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%9E%94%EB%82%98%EB%B9%84

//Reddit https://www.reddit.com/search/?q=rabbit

 

 

<label> : 그동안 <label> 태그에 대해서 거의 잊다시피 했는데 웹부캠 강의를 들으면서 다시 한 번 상기할 수 있었다.

<label>은 UI항목(버튼,텍스트 등) 등의 설명을 나타내는 태그이며 

<label> + <input>의 조합으로 쓴다. ScreenReader은 폼 입력에서 label을 읽어들어와 사용자가 입력해야 하는 텍스트가 무엇인지 설명한다. 

위의 코드에서 만약 Enter a Password! 라는 문구를 커서로 클릭해보면 옆에 있는 password input 창이 활성화된다. 입력하라고 커서가 깜빡거린다. 나머지 항목들도 마찬가지이다. 

 

그리고 <label>+<input>의 조합으로 쓸 때에는 반드시 태그 안에 id값을 지정해주어야 한다.

그런 다음 <label>에서는 id와 같은 값의 for 속성을 넣는다. (id가 color면 label for도 color)

그런데 MDN 공식 문서에 따르면 label for ~ 보다는 label calss로 정의하고 for을 분리시켜주는걸 권장한다. 

 

 

드롭다운 메뉴 만들기 

<select> 

    <option></option> 

    ....

</select>

그리고 submit 버튼을 누르면 form 내의 주소로 다이렉트 되는데 내 코드의 경우 경로 설정을 해주지 않았기 때문에 경로를 찾을 수 없다고 뜬다. 

 

 

value값은 데이터 전송 시 서버로 전송된다. 

  <h2>More Inputs</h2>
  <form action="/birds">
    <input type="checkbox" name="agree_tos" id="agree">
    <label for="agree">I agree to everything</label>
    <p>
      <label for="xs">XS:</label>
      <input type="radio" name="size" id="xs" value="xs">
      <label for="s">S:</label>
       <input type="radio" name="size" id="s" value="s">
         <label for="m">M :</label>
       <input type="radio" name="size" id="m" value="m">
    </p> 
    <button>submit</button>