HTML input 태그

 

 

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

 

 

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

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

 

 

+ id 속성 사용하기

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

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

 

히든 필드 만들기(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="">

 

 

 

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

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

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