[HTML+CSS] 사용자의 입력을 받는 <input> 태그

안녕하세요, 여행벌입니다.

이번 포스팅에서는 사용자 입력을 받는 <input> 태그에 대해서 다뤄보겠습니다.

---

input 태그

 웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있습니다. 이때, 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분으로 <input> 태그를 이용해 만들 수 있습니다. 또, 체크 박스나 로그인 버튼처럼 사용자가 클릭하는 버튼도 <input> 태그를 이용합니다.

<input type="type속성값"> </input>

 기본 형태는 위와 같습니다. type에 따라 사용자가 입력할 수 있는 형태가 달라지고 input 태그는 굉장히 많은 type 유형이 있습니다.

type 속성

 input 태그의 type 유형은 굉장히 많습니다. 상황에 맞춰 적절한 type 속성 값을 적용해줘야합니다. 물론, 이 모든 type 유형을 외우는 건 불가능합니다! 이러이러한 유형들이 존재한다는 것만 알아두시고 필요할 때마다 구글링 할 수 있는 정도만 알아두시면 될 것 같습니다.

id 속성

 폼을 만들다 보면 똑같은 폼 요소가 여러 번 사용됩니다. 예를 들어 회원가입 폼을 만들 경우, 이름 입력 항목이나 주소 입력 항목 모두 <input type="text"> 를 이용하게 됩니다. 이렇게 여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성입니다. id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수도 있고 나중에 배울 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있습니다.

<input type="type속성값" id="id값"> </input>

autofocus 속성 - 입력 커서 표시하기

 autofocus 속성을 이용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있습니다. 아래 그림처럼 웹 페이지를 불러오자마자 입력할 수 있게 마우스 커서가 표시됩니다.

<input type="text" autofocus></input>

placeholder 속성 - 힌트 표시하기

 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 힌트를 표시할 때 사용하는 속성입니다.

<input type="text" placeholder="ex)010-****-****"></input>

readonly 속성 - 읽기 전용 필드 만들기

 readonly 속성은 해당 필드를 읽기 전용으로 바꿉니다. 필드 안에 내용은 있지만 사용자에게 내용을 보여주기만 하고 입력은 할 수 없게 합니다.

<input type="text" value="읽기만 가능합니다." readonly></input>

required 속성 - 필수 필드 지정하기

 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 넘겨주는데, 이때 꼭 입력받아야 하는 필드들이 모두 채워졌는지 검사해야 합니다. required 속성은 해당 필드를 입력해야만 제출이 가능하게 해줍니다.

<input type="text" required></input>

min, max, step 속성

 min 속성과 max 속성은 각각 해당 필드의 최솟값과 최댓값을 지정합니다. step 속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킵니다.

● type이 date / datetime / datetime-local / month / week / time / number / range 인 경우 사용 가능.

<input type="number" min="10" max="100" step="10">

size, minlength, maxlength 속성 - 길이, 최소 길이, 최대 길이 속성

 min, max, step 속성과 다르게 size, minlength, maxlength 속성은 텍스트 길이에 조건을 걸어줍니다. size 속성은 텍스트 필드와 비밀번호 필드, 검색 필드 등 한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정하고, minlength, maxlength 속성은 사용자가 최소, 최대 몇 글자까지 입력할 수 있는지 지정합니다.

<input type="text" size="10" minlength="4" maxlength="15">

value 속성 - 초기값 설정

 value 속성은 필드에 초기값을 설정해줍니다. 그리고 사용자에게는 보이지 않지만 서버로 정보를 넘길 때도 사용합니다. 하지만 placeholder 속성과 다르게 사용자가 지우고 입력을 해야 한다는 불편함이 있습니다.

<input type="" value="서버로넘기고싶은정보 혹은 초기값"></input>

---

이상으로 input 태그에 대한 포스팅을 마치겠습니다.

다양한 type과 다양한 속성들이 있는데 input 태그는 자주 쓰이니 익혀두시는 게 좋을 것 같습니다 :))