<label>/<datalist>/ <button> vs <input>

<label>

label태그는 input과 함께쓰는 태그로 img와 alt의 관계성과 비슷하다고 볼 수 있다.
웬만하면 써주는 것이 semantic한 코딩에 좋다.


label 내에는 h태그와 p태그가 들어갈 수 없다. 아마 다른 태그들도 많이 안되는 거 같다.

두 가지 방법으로 쓸 수 있는데

• <label>과 <input>을 나눠 쓰는 법 :
  <input> 에 id 속성을 넣어야합니다. 그런 다음 에 id 와 같은 값의 for 속성을 넣어야합니다.

• <label> 안에 <input> 을 중첩시키는 법: 이 경우 연관이 암시적이므로 for 및 id속성이 필요없습니다.

<button> vs <input>

결론부터 말하면 css적으로 꾸미기 용이한 것은 button.

input submit이랑 button submit 기능적 차이 없다!
btn 주로 사용

버튼 타입 submit이 기본이니까 꼭 써주기
안그럼 막 서버로 데이터 보내버릴 수 있다.

<input>

input의 종류는 굉장히 많다!
예제

<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
  <label>First name: <input type="text" name="first_name" /></label><br />
  <label>Last name: <input type="text" name="last_name" /></label><br />
  <label>E-mail: <input type="email" name="user_email" /></label><br />
  <input type="submit" value="Submit" />
</form>

결과👇

First name:
Last name:
E-mail:

name은 서버로 보낼 때 키(key)가 된다.
type은 올바른 데이터 입력을 요구하기위해
id는 label과 연결하기 위해

<datalist>

이건 최근에 나온 따끈따끈한 tag라고 해서 가져와봤다.
예제

<label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>

아래 목록에서 브라우저를 선택하세요:

이렇게 나타나게 되는데 select랑 다른 점은 보기에 사용자가 원하는 요소를 직접 입력하여 추가할 수 있다는 점.
그리고 입력할 때 필터링이 된다. option이 많아지면 검색할 수 있어 유용하겠다.