🌈 1. 입력요소란?

• 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤

• 인라인 요소이며, 단일 태그로 사용

• 사용자가 데이터를 입력할 수 있는 입력필드를 선언하기 위해서 form 이벤트 내부에서
  사용됩니다.

<input type="속성 종류" name="데이터 이름" value="기본 값 지정" />

1.1 Input 태그의 Type 속성

type 속성은 Input 태그의 속성으로, 여러가지 타입의 종류가 있습니다.

타입 종류	설명
text	일반 텍스트 문자
password	비밀 번호
button	버튼
submit	양식 전송 버튼 (클릭하면, 서버로 값을 제출)
reset	양식 초기화용 버튼
radio	한 개만 선택할 수 있는 컴포넌트
checkbox	여러 개를 선택할 수 있는 컴포넌트
file	파일 업로드
hidden	사용자에게 보이지 않는 요소
placeholder	입력필드에 사용자가 올바른 값을 입력할 수 있는 안내 문구
maxlength	입력 필드에 입력할 수 있는 최대 문자열의 개수를 정의
minlength	입력 필드에 입력할 수 있는 최소 문자열의 개수를 정의
ragne	범위를 조정할 수 있는 슬라이드 바
step	range 속성을 사용할 때 슬라이드 바의 간격을 조정함
color	색상을 지정
date	날짜를 지정

HTML5에는 더 많은 속성의 종류가 있습니다.

1.2 입력 요소에서 Name 사용

Input 태그를 사용할 때, 식별자로 Name을 사용합니다.

Input 태그의 속성이 무엇이든지 상관 없이 지정 가능한 속성입니다.

<input name="nickname" type="text" />
<input name="job" type="text" />

Input 타입이 text인 요소가 여러 개 있을 시, 서로간의 목적을 구분하기 위해 name
속성을 사용 합니다.

1.3 입력 요소 사용 예제

Input 태그와 속성을 이용해서, 회원가입 양식을 만들 수 있습니다.

 <style>
        #id {
            background-color: blanchedalmond;
        }
</style>

 <h1> 회원가입 양식 </h1>
    <form action="" method="get"> 
<!-- action: 데이터 값을 전달받는 서버의 주소 || method: 데이터 전송 방식 -->
        <div id="id">
            ID : <input type="text" placeholder="ID를 입력하세요" name="ID"><br>
          	<!-- 사용자가 값을 입력하면 ID 라는 식별자로 전송됨 -->
            PASSWORD : <input type="password" placeholder="PASSWORD를 입력하세요" name="PASSWD"><br>
          	<!-- 사용자가 값을 입력하면 텍스트 대신 문자로 표시되며, PASSWD 라는 식별자로 전송 됨 -->
            <input type="date" name="date of birth"><br><br>
          
            남성 : <input type="radio" value="male" name="sex"><br>
            여성 : <input type="radio" value="female" name="sex"><br><br>	
            <input type="submit" value="회원 가입" name="submit">
            <!-- 회원 가입이라는 버튼을 클릭하면 서버에 데이터가 전송 됩니다. -->
            <input type="reset"> 
          	<!-- 입력 필드를 초기화 시키는 버튼 -->
        </div>
    </form>

<Input> 태그는 서버에 값을 전달하기 위해서 <form> 태그 안에 속해 있어야 합니다.

name과 value 속성의 값이 동일하면 오작동하는 경우가 있습니다. 주의 바람