HTML input 태그

 

 

<input> 태그

웹에서 사용자가 입력할 부분은 주로 <input> 태그를 이용해 넣는다. 폼에서 사용자 입력을 받기 위해 사용하는 태그이다.

 

 

 <input> 태그로 입력 항목 만들기

웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. input 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 type 속성을 이용해 구분한다.

 

 

+ id 속성 사용하기

여러번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id속성이다.

<input type="text" id="user_id">
<input type="text" id="addr">

 

 

 여러가지 type 유형 살펴보기

 

 

히든 필드 만들기(type="hidden")

히든 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소이다. 보통 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 입력한다.

예를 들어, 회원가입 양식을 작성하고 로그인을 하는 것인지 아닌지 서버에게 알릴 필요가 있는 경우 히든 필드를 사용할 수 있다. name 속성으로 필드의 이름을 지정하고 그에 대한 값은 value 속성을 이용해 서버로 넘겨준다.

<input type="hidden" name="is_sign" value="Y">

 

 

텍스트 필드 만들기(type="text")

텍스트 필드는 한 줄짜리 일반 테스트를 입력하는 필드이다.

<!-- 텍스트 필드 속성
     name : 텍스트 필드를 구별할 수 있도록 이름을 붙인다
     size : 텍스트 필드의 길이를 지정한다. 화면에 몇 글자가 보이도록 할 것인지 지정한다
     value : 화면에 표시될 때 텍스트 필드에 표시될 내용이다. 사용하지 않으면 빈 텍스트 필드가 표시된다
     maxlength : 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정한다.
-->
<form action="search.php" method="post">
    아이디 <input type="text" size="5" maxlength="5">
</form>

 

 

비밀번호 입력란 만들기(type=""password")

패스워드 필드는 텍스트 필드와 거의 같지만 사용자가 입력하는 내용이 화면에 표시되지 않고 '*' 혹은 '●'로 표시된다. 속성도 value 속성이 없다는 점만 제외하면 텍스트 필드와 같다.

 

 

검색 상자 만들기(type="search")

일반 텍스트 상자를 넣은 것과 똑같이 보이지만 크롬 브라우저나 MS 엣지 브라우저 등 일반 브라우저에서는 검색 창에 검색어를 입력했을 때 오른쪽에 엑스(X)가 표시되어 입력했던 검색어를 손쉽게 지울 수 있다.

<input type="search">

 

 

URL 입력란 만들기(type="url")

웹 주소도 텍스트 필드에서 분화되어 type으로 별도로 지정할 수 있다. 이 필드에는 반드시 "http://"로 시작하는 사이트 주소를 입력해야한다. 아이폰 같은 모바일 기기에서는 웹 사이트를 입력하기 편한 키보드 입력 화면으로 바뀐다.

<input type="url">

 

 

메일 주소 입력란 만들기(type="email")

브라우저 자체에서 사용자가 입력한 내용이 메일 주소 형식에 맞는지 자동으로 체크해준다.

<input type="email">

 

 

전화번호 입력란 만들기(type="tel")

<input type="tel">

 

 

숫자 입력하기(type="number")

입력창에 숫자를 입력하는 것이 기본이지만 스핀 박스가 표시되기도 한다.

<!-- 숫자 필드 속성
    min : 필드에 입력할 수 있는 최솟값을 지정한다.
    max : 필드에 입력할 수 있는 최댓값을 지정한다
    step : 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정한다. 기본값은 1로 생략 가능하다.
    value : 필드에 표시할 초기값이다. 
-->
<input type="number" min="1" max="7" value="2">

 

 

슬라이드 막대로 숫자 지정하기(type="range")

오페라 미니를 제외한 대부분의 모바일 브라우저와 인터넷 익스플로러 10이상의 데스크톱 브라우저에서 지원한다.

<!-- 숫자 필드 속성
    min : 필드에 입력할 수 있는 최솟값을 지정한다.
    max : 필드에 입력할 수 있는 최댓값을 지정한다
    step : 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정한다. 기본값은 1로 생략 가능하다.
    value : 필드에 표시할 초기값이다. 
-->
<input type="number" min="1" max="7" value="2">
<input type="range" min="1" max="7" value="2">

 

 

라디오 버튼과 체크박스(type="radio", "checkbox")

라디오 버튼과 체크박스는여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소이다. 한 개만 선택할 경우, 라디오 버튼을 사용하고 두 가지 이상 여러 가지를 선택해도 될 경우 체크박스를 사용한다.

name : 라디오 버튼이나 체크 박스가 여러개 있을 경우 구분하기 위해 이름을 지정한다.
       라디오 버튼은 하나만 선택하는 것이기 때문에 관련 있는 그룹까지 name 속성 값을 똑같이 한다.
value : 선택한 라디오 버튼이나 체크박스를 서버로 알려줄 때 넘길 값을 지정한다. 
        영문 or 숫자여야하며 필수 속성이다
checked : 라디오 버튼의 항목들은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데 기본으로 선택
          해 놓을 항목이 있다면 checked 속성을 사용한다.

 

 

라디오 버튼 예시)

<form action="search.php">
    <fieldset>
        <legend>선택 과목</legend>
        <p>이달에 신청할 과목은?</p>
        <label><input type="radio" name="subject" value="math">수학</label>
        <label><input type="radio" name="subject" value="english">영어</label>
        <label><input type="radio" name="subject" value="grammer">문법</label>
    </fieldset>
</form>

 

 

체크박스 버튼 예시)

<form action="search.php">
    <fieldset>
        <legend>선택 과목</legend>
        <p>이달에 신청할 과목은?</p>
        <label><input type="checkbox" name="subject1" value="math">수학</label>
        <label><input type="checkbox" name="subject2" value="english">영어</label>
        <label><input type="checkbox" name="subject3" value="grammer">문법</label>
    </fieldset>
</form>

 

 

색상 선택 상자 표시하기(type="color")

사용자가 색상 선택 상자를 표시할 수 있다. 색상 값은 16진수로 표시해야하며 색상 이름을 사용할 수 없다. 지원하는 브라우저가 한정되어 있다. 지원하지 않는 브라우저에서는 텍스트 필드로 표시된다.

<label>색상 : <input type="color" value="#00ff00"></label>

 

 

날짜 표시하기(type="date", "month", "week")

날짜를 표시할 때 사용할 수 있습니다. type 을 date 로 지정할 경우 "yyy-mm-dd"의 형식으로 연도와 월, 일이 표현됩니다. type 을 month 로 지정할 경우 "yyy-mm" 형식으로 월까지만 입력되고 type 을 week 로 지정하면 1월 첫째 주를 기준으로 몇 번째 주인지 연도와 주가 표시된다.

<input type="date" name="" id=""><br>
<input type="month" name="" id=""><br>
<input type="week" name="" id="">

 

 

 

시간 지정하기(type="time", "datetime", "datetime-local")

날짜뿐 아니라 시간도 지정할 수 있다. time 유형을 사용했을 때는 시간을 조절할 수 있고 datetime-local 유형을 사용했을 때는 날짜와 시간 모두 조절할 수 있다.

속성설명
min : 날짜나 시간의 최솟값을 지정한다.
max : 날짜나 시간의 최대값을 지정한다.
step : 스핀 박스의 화살표를 누를때마다 날짜나 시간을 얼마나 조절할지 지정한다.
vale : 화면에 표시할 초기값을 지정한다.

 

예시)

<h3>원하는 시간대를 선택하세요</h3>
<label>시작 시간 <input type="time" value="09:00"></label>
<label>종료 시간 <input type="time" value="18:00"></label>

<h3>다른 시간을 선택하세요</h3>
<label>시작 시간 <input type="datetime-local" value="2025-02-08T07:00"></label>
<label>종료 시간 <input type="datetime-local" value="2025-02-10T07:00"></label>

 

 

서버 전송 및 리셋 버튼(type="submit", "reset")

리셋 버튼은 요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 수 있다. 이때 value 속성을 사용해 버튼에 표시할 내용을 지정한다. submit 속성은 사용자가 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 넣는다. submit 버튼을 누르면 폼(form) 태그에 연결된(action 속성) 프로그램으로 정보가 처리된다.

form action="register.php" method="get">
    <label>메일 주소 <input type="text" name="email"></label><br>
    <label>비밀번호 <input type="password" name="pass"></label><br>
    <input type="submit" value="제출">
    <input type="reset"m value="다시 입력">
</form>

 

 

이미지 버튼 넣기(type="image")

submit 버튼 대신 전송 이미지를 넣을 수 있다.

<form action="register.php" method="get">
    <label>메일 주소 <input type="text" name="email"></label><br>
    <label>비밀번호 <input type="password" name="pass"></label><br>
    <input type="image" src="./html5-book-9-master/html5-book-9-master/04/images/login.jpg" alt="login">
    <input type="reset"m value="다시 입력">
</form>

 

 

버튼 넣기(type="button")

폼(form) 안에 버튼 형태를 만들 수 있다. 하지만 submit 이나 reset 속성과 같은 자체 기능이 없고 오직 버튼만 넣기 때문에 스트립트 함수 등을 연결해야 한다. value 속성을 사용해 버튼에 표시할 내용을 지정한다. 브라우저 버전과 상관없이 사용 가능하다.

<input type="button" value="새 탭 열기" onclick="window.open()">

 

 

파일 첨부하기(type="file")

웹 브라우저 화면에 파일 선택 혹은 찾아보기 등이 표시되는데 이 버튼을 클릭한 후 파일을 선택하면 파일이 첨부된다. 파일 첨부 버튼에 표시되는 내용은 웹 브라우저에 따라 달라진다.

<label>첨부파일 <input type="file"></label>

 

 

 <input> 태그의 속성 살펴보기

 

 

입력 커서 표시하기(autofocus)

autofocus 속성을 사용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다.

<label for="uname">이름</label>
<label for="uemail">이메일</label>
<input type="text" id="uname">
<input type="text" id="uemail" autofocus>

 

 

힌트 표시하기(placeholder)

사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어 편리하다

<input type="text" placeholder="아이디를 입력해주세요">

 

 

읽기 전용 필드 만들기(readonly)

입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수도 있다. 

<input type="text" readonly>

 

 

필수 필드 지정하기(required)

필수적으로 입력해야하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있다. 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타난다.

<form action="search.php">
    <fieldset>
        <legend>신청자</legend>
        <label>이름 <input type="text" required></label>
        <label>나이 <input type="text"></label>
        <label>성별 <input type="text"></label>

        <input type="submit" value="제출">
    </fieldset>
</form>

 

 

min, max, step 속성

min 속성과 max 속성은 해당 필드의 최솟값과 최댓값을 지정한다. setp 속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킨다. <input> 태그의 유형이 date 이거나 datetime, datetime-local, month, week, time, number, range 일 경우에만 사용한다.

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

 

 

size, minlength, maxlength 속성

min, max, step 속성이 숫자의 조건을 지정했다면 size, minlength, maxlength 는 텍스트 길이에 대한 조건을 만들 수 있다.

size 속성은 한줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정한다.

maxlength 속성은 사용자가 최대 몇 글자까지 입력할 수 있는지 지정한다.

minlength 속성은 최소 몇 글자 이상을 입력해야하는지 지정한다.(아직까지 최신 크롬 브라우저와 안드로이드 브라우저에서만 지원된다.)

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

 

 

 

+ 브라우저마다 지원이 다른 HTML5 폼 태그와 속성들에 대한 정보는 다음 사이트에서 볼 수 있다.

https://caniuse.com/?search=form

"form" | Can I use... Support tables for HTML5, CSS3, etc