1. Label

• lable 요소는 form 안에서 많이 사용 되는 요소

• input 요소에 정확한 의미를 부여하기 위해서 사용 됩니다.

• lable 요소 안의 for 속성으로 ID 식별자가 부여된 요소와 결합할 수 있습니다.
  이 때 for 속성의 이름과 ID 식별자의 이름은 동일해야 합니다.

• lable 요소는 브라우저에 의해 일반적인 텍스트로 렌더링 되지만, 사용자가 마우스로
  클릭할 경우에는 lable 요소와 연결된 요소를 곧바로 선택할 수 있어 편의성에 좋습니다.

1.1 Label 사용 하기

<form>
  <p>		
    		  <!-- for과 ID명이 같으면 레이블 요소와 Input 요소가 결합 됩니다 -->
              <label for="username">ID :</label>
              <input ID="username" type="text" placeholder="user ID">
  </p>
</form>

1.2 Label 안에 입력 요소 사용 하기

lable 안에 입력요소를 넣어서 결합할 수 있습니다.

이와 같은 방식은 자주 사용하진 않지만, for ID 속성을 생략할 수 있는 장점이
있습니다.

<label>ID :
     <input type="text" placeholder="user ID">
</label>

2. Button

• 사용자가 클릭할 수 있는 버튼을 제공하는 태그 입니다.
  버튼을 클릭하면, 입력요소에서 입력한 내용들이 서버로 전송 됩니다.

• form 요소를 서버로 제출하기에, form 외부에서 사용하면 아무 변화가 없습니다.

<button type="button">submit</button>

button type 속성

속성	내용
button	폼을 제출하지 않고, 클릭할 수 있는 버튼 기능만 제공
submit	(기본 값) 서버로 form 양식을 제출

3. Name

• 데이터를 서버로 전송할 때 사용되는 태그

• 데이터마다 식별자를 지정해주는 속성으로 모든 입력 요소에는 하나의 Name 속성이
  필수로 존재해야 합니다.

• 사용자가 입력 요소에서 값을 입력하고 form 양식을 서버로 제출하면, 사용자가 입력한
  데이터 값이 name 속성으로 지정된 이름이 붙어서 서버로 전송됩니다.

<form action="/root">
        <p>
            <label>ID :
                <input type="text" placeholder="user ID" name="username">
            </label>
        </p>
        <p>
            <label for="password">PASSWD :</label>
            <input ID="password" type="password" placeholder="PASSWD" name="password">
        </p>
        <p>
            <label for="Color">Color Select :</label>
            <input ID="Color" type="color" name="color">
        </p>
        <p>
            <label for="number">Number Click:</label>
            <input ID="number" type="number" name="number">
        </p>
        <button>submit</button>
    </form>

서버로 제출하면, 사용자가 입력한 데이터 값과, 해당 요소의 Name 속성이 한 쌍으로 매핑되어
서버에 전송됩니다.

속성명=데이터 값 방식이 됩니다. 그리고 & 엠퍼센드 기호를 통해서 서로 다른 데이터들이
하나의 URL로 연결 됩니다.

❓ 색상 데이터가 %23e708088 로 나오는 이유
색상 코드를 인코딩된 버전을 사용했기 때문입니다.