<input> 입력 요소

HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성하며 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다.

<input type="button">

• <button> 유형의 <input> 요소는 단순한 버튼으로 렌더링되며 이벤트 처리기(주로 click 이벤트)로 사용된다.
• value로는 버튼의 레이블로 사용할 DOMString이 온다.
• <button></button>요소 와 같은 역할을 하지만 <button></button>요소와 다르게 img는 올 수 없다.

<input type="button" value="click"> 

<input type="text">

• 디폴트 값인 한줄의 텍스트 필드
• 새줄 문자는 입력값으로부터 자동으로 제거된다.

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">
       

---

id와 name의 차이?

id와 name모두 태그를 식별하는 역할을 하는 공통점이 있지만, 둘의 가장 큰 차이점은 id는 페이지 내에서 유일해야 하고 name은 중복 될 수 있다는 점이다.

따라서 각각의 요소에 접근하고 싶을 때 id를, 그룹으로 접근하고 싶을 때 name을 사용한다.

그러나 웹개발을 할 때 name은 form 태그와 action을 활용한 서버와 클라이언트간의 호출관계 속에서 각각의 태그들을 식별하는 역할을 담당하기 때문에 name 값이 있어야 데이터를 넘겨 줄 수 있다.

<input type="password">

• 값이 가려진 한줄 텍스트 필드
• 사이트가 안전하지 않으면 사용자에게 경고한다.

<label fpr="pass">Password (8 characters minimum)</label>
<input type= password id="pass" name="password" minlength="6">

Password (8 characters minimum)

<input type="checkbox">

• 단일 값을 선택하거나 선택 해제할 수 있는 체크박스가 렌더링된다.
• 다중 선택이 가능하다.

<input type="checkbox" name="checkBox" value="HTML">HTML
<input type="checkbox" name="checkBox" value="CSS" checked>CSS
<input type="checkbox" name="ccheckBox" value="JS">JS

HTML
CSS
JS

• <label>을 이용해서도 구현가능하다.

<div>
  <input type="checkbox" id="scales" name="scales"
         checked>
  <label for="scales">Scales</label>
</div>
<div>
  <input type="checkbox" id="horns" name="horns">
  <label for="horns">Horns</label>
</div>

<input type="radio">

• 같은 name 값을 가진 여러개의 선택지 중에서 하나의 값을 선택하게한다.
• 단일선택만 가능하다.

Morning
Lunch
Dinner

<input type=radio name="mealtime">Morning
<input type=radio name="mealtime" checked>Lunch
<input type=radio name="mealtime">Dinner

<input type="range">

• 값이 가려진 숫자를 입력하는 컨트롤바가 렌더링된다.
• 디폴트 값은 중간값 범위 위젯으로 표시된다.

• min - 요소의 최솟값
• max - 요소의 최댓값
• step - 증감 숫자의 간격 ( 기본값은 1 )
• value - 요소의 초기값

<input type="range" min="10" max="100" step="10" value="90">

<input type="date">

• 날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤
• 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어준다.

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2021-03-01"
       min="2021-03-01" max="2021-03-14">

Start date:

<input type="submit">

• 양식을 전송하는 버튼이 렌더링된다.
• 주로 클릭 이벤트가 발생했을 때 유저가 작성한 양식이 서버로 전송된다.

<input type="submit" value="Send Request">

참고
(https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input)