HTML <input> 태그 기본과 텍스트 입력

이번 글은 Frontend / Markup structure 영역에서 사용자 입력을 처리할 때 가장 기본이 되는 <input> 태그 중 텍스트 관련 타입을 정리한다.

<input> 태그는 입력 받을 정보의 성격에 따라 여러 가지 type 속성을 제공한다. 여기서 소개하는 타입 외에도 매우 많은 종류가 존재하므로, 추후 MDN 공식 문서를 확인하는 것을 추천한다.

참고로 <input> 태그의 default type은 text이다. 즉, type 속성을 생략하면 자동으로 text로 처리된다.

Document

textinputtag.html

텍스트 관련 input 타입

<form action="#">
    <label for="txtIp">text</label><br>
    <input 
        id="txtIp"
        type="text"
        placeholder="5 자 이하"
        maxlength="5"
    >

    <br><br>

    <label for="pwdIp">password</label><br>
    <input 
        id="pwdIp"
        type="password"
        placeholder="4자 이상"
        minlength="4"
    >

    <br><br>

    <label for="srcIp">search</label><br>
    <input 
        id="srcIp"
        type="search"
    >

    <br><br>

    <label for="tlIp">tel</label><br>
    <input 
        id="tlIp"
        type="text"
    >

    <br><br>
    <button type="submit">제출</button>
</form>

1. text

일반적인 텍스트 입력을 받을 때 사용하는 타입이다.

maxlength / minlength 속성을 통해 입력 가능한 문자열 길이를 제한할 수 있다.

이때 사용자 입장에서 입력 조건을 미리 확인할 수 있도록 안내문을 제공하는 것이 좋다. 이를 위해 사용하는 속성이 placeholder이다.

placeholder는 입력 안내용 문구이며, 실제로 제출되는 데이터에는 포함되지 않는다.

2. password

입력한 값이 점(●) 형태로 가려져 표시된다. 비밀번호처럼 보안이 필요한 입력에 사용된다.

button이 type="submit"일 때, 예를 들어 4자 미만으로 입력하면 브라우저에서 기본 안내문 또는 경고문이 출력된다.

다만 이러한 안내 UI는 브라우저마다 표현 방식이 다르기 때문에, 실무에서는 JavaScript를 이용해 별도의 검증 로직과 경고 메시지를 구현하는 경우가 많다.

3. search

겉보기에는 text 타입과 큰 차이가 없어 보일 수 있다.

하지만 텍스트를 입력하면 입력 폼 오른쪽에 x 표시가 나타나며, 이를 클릭하면 입력한 텍스트가 초기화된다.

네이버나 구글 검색창에 있는 x 버튼과 동일한 역할을 한다.

다만 UI 통일성을 위해 실무에서는 CSS로 직접 구현하는 경우도 많다.

4. tel

전화번호 입력을 위한 타입이다.

웹 환경에서는 text 타입과 큰 차이가 없지만, 모바일에서 실행할 경우 자동으로 숫자 키패드가 팝업되는 특징이 있다.

---

정리

• <input> 태그는 사용자 입력을 처리하는 핵심 요소다.
• type 속성에 따라 입력 목적과 UX가 달라진다.
• text/password/search/tel은 모두 텍스트 기반 입력이지만 사용 목적과 사용자 경험이 다르다.
• 기본 브라우저 검증에만 의존하지 말고, 실무에서는 JavaScript로 추가 검증을 구현하는 것이 일반적이다.