label

label

• 폼의 양식에 이름을 붙이는 태그. input 태그의 의미를 정의하기 위한 태그다.

• for 속성을 이용한다. input의 id 값과 for 값이 같으면 서로 연결된다.

 <label for="first_name">First name</label>
        <input id="first_name" required type="text"></input>

• label의 텍스트를 클릭하면 연결된 양식에 입력할 수 있도록 선택되어 사용자의 클릭 편의성을 높인다.

• label 태그를 input 태그 바깥에 사용하면, for 속성을 사용하지 않을 수 있다

input

• 사용자로부터 데이터를 받아들이기 위해서 사용하는 폼이다.

• radio, checkbox, reset, search 등 다양한 타입을 사용할 수 있다.

• input 태그에는 type에 따라 사용가능한 여러가지 속성이 있는데 폼을 원하는만큼 구체적으로 만들 수 있다.

• type="password" 에서 입력 최소 글자 수를 지정하려고 했는데 min 속성이 적용되지 않았다. 찾아보니 min은 numeric types에만 적용되는 속성이었다. 이를 대체하여 minlength 속성(password, search, tel, text, url 타입에 적용가능)을 사용하니 최소 글자 수 입력 제한이 적용되었다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

• range 타입에 눈금표시 하기
  - input의 list 속성 : input 요소에서 사용하기 위해 미리 정의해 놓은 옵션들을 포함하고 있는 datalist 요소를 명시한다.
  - datalist 태그 : datalist의 id를 통해 input의 list 속성과 연결된다. 미리 지정된 옵션 목록을 보여준다. option 태그를 품고 있으며 사용자가 글자를 입력하면 옵션의 value로 표현된 리스트를 미리 제시한다.
  <input list="연결할 datalist의 id값">

  <label for="happy">How happy are you?</label>
  <input id="happy" required type="range" min="0" max="10" step="1" value="5" list="tickmarks"></input>
        <datalist id="tickmarks">
          <option value="0"></option>
          <option value="1"></option>
          <option value="2"></option>
          <option value="3"></option>
          <option value="4"></option>
          <option value="5"></option>
          <option value="6"></option>
          <option value="7"></option>
          <option value="8"></option>
          <option value="9"></option>
          <option value="10"></option>
        </datalist>

• replit 과 깃허브 연동하기
  https://chasonghui.tistory.com/16