본문으로 바로가기

본문 : 폼(Form) 요소 #2 - LABEL, INPUT

category 웹코딩/HTML 2015. 5. 7. 17:00

폼에서 가장 많이 사용되는 label과 input 요소의 다양한 속성들에 대하여 알아봅니다.

LABEL 요소

label 요소는 컨트롤 레이블(LABEL)을 표시한다. 레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다. 시각적으로만 그 용도가 표현되므로 브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label 요소를 사용해야 한다.

<label>이름: <input type="text"></label>

for 속성

for 속성은 레이블과 관련된 컨트롤을 지정한다. 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법과 명시적 방법으로 나뉜다.

  • 암시적 방법 : 이 방법은 label 요소 내에 컨트롤을 둔다. 즉 label 요소 내에 있는 컨트롤은 굳이 밝히지 않아도 관련 있다고 보는 것이다.
  • 명시적 방법 : 이 방법은 for 속성을 이용하여 컨트롤의 id값을 정확하게 지정한다. 즉 레이블이 어떤 컨트롤과 관련 있다는 사실을 명확하게 밝히는 것이다. 명확하게 밝힌다는 것은 기계적인 연결이 가능하다는 것을 의미한다. 이렇게 되면 브라우저는 사용자가 레이블을 클릭하더라도 관련된 컨트롤이 선택되도록 처리할 수 있고 레이블과 컨트롤이 서로 떨어져 있더라도 둘 사이의 관계를 손쉽게 연결할 수 있다.
<input type="radio" name="color-select" id="abc" value="blue">
<label for="abc">파랑</label>
<input type="radio" name="color-select" id="def" value="yellow">
<label for="def">노랑</label>

INPUT 요소

input 요소는 입력 영역(INPUT field)을 표시한다. 입력 영역은 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳이다.

  • 입력 컨트롤의 종류는 type 속성에 의해 지정된다.

type 속성

type 속성은 input 요소의 타입을 지정한다. 속성값은 입력 컨트롤러의 종류를 나타내며, 이에 따라 지정된 입력 컨트롤의 형태가 만들어진다. 몇몇 속성값들은 모바일에도 영향을 미쳐 편리한 키보드 자판을 출력해주곤 한다.

  • type="text"

    속성값 text는 input 요소의 기본값으로 텍스트를 입력할 수 있는 텍스트 필드가 만들어진다. 텍스트 필드의 세로 크기는 정해져 있고 가로 크기만 설정할 수 있다. 크기는 글자 수를 기준으로 정해지며 기본 크기가 20이다.

    <input type="text">
    
  • type="submit"

    속성값 submit는 전송 버튼이 만들어진다. 전송 버튼은 폼을 서버로 보내는 역할을 수행할뿐 어떻게 어디로 보낼지는 form 요소에서 정한다. 버튼 이름은 value 속성에 의해 지정되는데, 이 속성을 지정하지 않으면 브라우저가 지정하는 이름이 표시된다.

    <input type="submit" value="전송">
    
  • type="reset"

    속성값 reset은 초기화 버튼이 만들어진다. 초기화는 폼에 입력된 값을 초기값으로 되돌린다.

    <input type="reset">
    
  • type="button"

    속성값 button은 푸시 버튼이 만들어진다. 다양한 용도로 사용되기에 기본 기능은 없으며 기능 실행을 위해서는 자바스크립트와 같은 클라이언트 사이드 스크립트가 필요하다. value 속성으로 입력된 텍스트는 버튼 이름이며, 이 이름은 실제 버튼 위에 나타난다.

    <input type="button" value="click me" onclick="runprocess()">
    
  • type="password"

    속성값 password로 지정하면 패스워드 필드가 만들어진다. 화면 상에서 읽히지 않도록 별이나 원모양의 기호로 표시된다.

    <input type="password">
    
  • type="file"

    속성값을 file로 지정하면 파일 업로드 컨트롤이 만들어진다. 파일 업로드 컨트롤은 로컬 컴퓨터에 있는 파일을 선택하기 위한 컨트롤이며 파일명이 입력되는 텍스트 필드와 파일 탐색기를 호출하기 위한 버튼으로 구성된다. accept 속성을 사용하면 브라우저가 지정된 파일형식만 찾을 수 있도록 파일 업로드 컨트롤을 구성할 수도 있다.

    <input type="file" accept="image/jpeg">
    
  • type="checkbox"

    속성값을 checkbox로 지정하면 체크박스가 만들어진다. 체크박스는 선택 여부를 확인하기 위한 입력 컨트롤이며 입력 상태는 선택과 미선택으로 구분된다. 체크박스는 중복 선택(multi-selection)을 위한 컨트롤이므로 여러 개의 체크박스로 구성할 수 있다. 이때 서로 관련있는 체크박스라는 사실을 브라우저에 알려주기 위해서는 name 속성이 필요하다. checkd 속성을 이용하면 선택된 상태가 된다.

    <input type="checkbox" name="nation" value="korea" checked="checked">한국
    <input type="checkbox" name="nation" value="japan">일본
    
    한국 일본
  • type="radio"

    속성값을 radio로 지정하면 라디오 버튼이 만들어진다. 라디오 버튼은 체크박스와 마찬가지로 선택 여부를 확인하기 위한 컨트롤이다. 다만 중복 선택을 지원하지 않는 단일 선택만 이루어진다. 즉, 여러 항목중에 한 가지 항목을 선택할 때 사용하는데, 이를 위해서는 항목들이 서로 배타적이어야 한다.

    <input type="radio" name="os" value="ios" checked="checked">iPhone
    <input type="radio" name="os" value="android">Android
    
    iPhone Android
  • type="number"

    속성값 number는 HTML5에 추가된 속성값으로 이를 지정하면 숫자 필드가 만들어진다. 숫자 필드는 숫자만 입력할 수 있는데 키보드로 직접 숫자를 입력하거나 스피너(spinner)를 마우스로 조작하여 숫자를 입력한다.

    <input type="number">
    
  • type="range"

    속성값 range는 HTML5에 추가된 속성값으로 이를 지정하면 범위 슬라이더(range slider)가 만들어진다. 범위 슬라이더는 마우스를 이용하여 숫자 형식의 데이터를 입력하는 컨트롤이다. min과 max 속성으로 요소의 값의 범위를 지정할 수 있다.

    <input type="range" min="5" max="10">
    
  • type="color"

    속성값 color는 HTML5에 추가된 속성값으로 이를 지정하면 컬러 필드가 만들어진다. 컬러 필드는 색을 입력하는 컨트롤이다. placeholder 속성을 이용해 기본 컬러를 설정해 둘 수 있다.

    <input type="color">
    

    지원 현황

    인터넷익스플로우 파이어폭스 사파리 크롬 오페라
    미지원 미지원 미지원 CH20+ O11+
  • type="date"

    속성값 data는 HTML5에 추가된 속성값으로 이를 지정하면 날짜 필드가 만들어진다. 날짜 필드는 년, 월, 일을 입력하는 컨트롤이다. 날짜와 시간 선택을 용도에 맞게 구성할 수 있도록 다양한 속성값이 정의되어 있다.

    <!-- 년,월,일을 선택 가능 -->
    <input type="date">
    <!-- 년,월을 선택 가능 -->
    <input type="month">
    <!-- 주와 년을 선택 가능 -->
    <input type="week">
    <!-- 시간(시,분,초)을 선택 가능 -->
    <input type="time">
    <!-- 날짜(년,월,일)와 시간(시,분,초)을 선택 가능(표준시간대가 있다) -->
    <input type="datetime">
    <!-- 날짜(년,월,일)와 시간(시,분,초)을 선택 가능(표준시간대가 없다) -->
    <input type="datetime-local">
    

    지원 현황

    인터넷익스플로우 파이어폭스 사파리 크롬 오페라
    미지원 미지원 SF5+ CH20+ O10.6
    • Safari와 Chrome 6은 기본값을 지정하지 않으면 아래 화살표는 작동하지 않고, 위쪽 화살표는 1582년-10월-15일 부터 시작된다. Chrome 10은 현재 날짜에서 시작된다.
    • Chrome 20에서는 type="date"만 작동하고 다른것들은 작동하지 않는다.
    • Mac의 Safari 5.1/5.2에서 위/아래 화살표가 제거되었고 아무것도 할 수 없다. Window의 Safari 5.1.2에는 위/아래 화살표가 기대되로 작동된다.
    • Chrome 6~10은 YYYY-MM-DD 형식(텍스트 필드처럼 입력)에 유효성을 검증하며, Chrome 17은 화살표 위/아래가 제거되었고 더 이상 유효성 검증을 하지 않는다.
    • Opera의 datepicker의 레이아웃은 변경되지 않았지만, 페이지의 폰트 속성들(size, weight, style, color)을 우선시하여 영향을 미친다.
    • Validation is irrelevant in Opera since the datepicker will insert only valid dates (dropdown menu style)
    • Opera 9에서는 오직 속성 값으로 HH:MM의 값만 가질 수 있다. Opera 11은 문자를 입력할 수도 있다.
    • Opera 11에서는 min과 max 속성들이 작동한다.
      <input type=date max="2011-04-20" min="2011-04-10">
      
  • type="email"

    속성값 email은 HTML5에 추가된 속성값으로 이를 지정하면 이메일 필드가 만들어진다. 이메일 주소는 반드시 @와 계정 주소를 포함해야 한다.이메일 필드가 규격화되면서 브라우저가 직접 유효한지를 확인할 수 있게 되었다.

    <input type="email">
    

    지원 현황

    인터넷익스플로우 파이어폭스 사파리 크롬 오페라
    미지원 미지원 SF5+ CH20+ O10.6+
    • Window의 Safari 5는 유효성 검증을 하지만 Mac은 하지 않는다.
    • 모바일 Safari는 유효성 검증을 하지 않지만 키보드의 @키를 불러온다.
  • type="url"

    속성값 url은 HTML5에 추가된 속성값으로 이를 지정하면 URL 필드가 만들어진다. URL 필드는 최소 1개 이상의 .을 포함해야 하므로 형식에 맞지 않은 데이터를 걸러낼 수 있고 URL 주소 입력에 도움되는 환경을 만들어 줄 수도 있다.

    <input type="url">
    
  • type="tel"

    속성값 tel은 HTML5에 추가된 속성값으로 이를 지정하면 전화번호 필드가 만들어진다. 전화번호 필드에는 숫자만 입력될 수 있으며 형식에 맞지 않는 데이터를 걸러낼 수 있다.

    <input type="tel">
    
  • type="search"

    속성값 search는 HTML5에 추가된 속성값으로 이를 지정하면 검색 필드가 만들어진다. 검색어 자동완성, 검색어 수집, 둥근 형태의 검색 필드등 검색과 관련된 다양한 기술을 구현할 수 있다.

    <input type="search">
    
  • type="image"

    속성값 image로 지정하면 이미지 버튼이 만들어진다. 이 버튼은 이미지 형식으로 제작된 전송 버튼이다. 이미지를 사용했다는 점만 다를 뿐 용도와 작동방식은 전송버튼과 같다. 버튼을 시각적으로 강조해야 하거나 다른 요소와의 시각적 균형을 맞추고자 할 때 전송 버튼 대신 이미지 버튼을 사용한다. 이때 스크린리더 사용자를 고려하여 반드시 alt 속성을 제공해야 한다.

    <input type="image" src="submit_button.gif" alt="submit button">
    

    css를 사용하면 전송 버튼의 형태를 바꿀 수 있지만 시각적 표현이 제한되어 있고, 브라우저마다 표현 방식이 다르며, 작업량이 상대적으로 많아지기에 이미지 버튼을 사용하곤 한다.

  • type="hidden"

    속성값 hidden을 지정하면 숨김 필드가 만들어진다. 숨김 필드는 말 그대로 문서에 나타나지 않는 컨트롤로써 사용자 입력이 아닌 컴퓨터에 의해 데이터를 서버로 전송하기 위한 것이다. 작성일자, 작성자 이름이나 아이드 등 서버에서 계산하지 않더라도 로컬 컴퓨터와 브라우저로 충분히 계산할 수 있는 객관적인 데이터가 이에 포함된다.

    <input type="hidden" name="date" value="2014-01-01">
    

autofocus 속성

autofocus 속성은 HTML5에 추가된 속성으로 컨트롤에 자동 포커스를 지정한다. 일반적으로 포커스는 사용자에 의해 생성되지만, 경우에 따라서는 저작자가 지정한 컨트롤에 포커스가 자동으로 생겨야 할 때도 있다.

<input type="text" autofocus="autofocus">
  • 이 속성으로 지정된 문서는 로딩과 동시에 포커스를 받게 된다.
  • 문서당 하나의 컨트롤에만 적용할 수 있으며 두 개 이상이 적용되면 순서상 먼저 지정된 컨트롤에 포커스가 생긴다.
  • 검색창, 메일서비스 아이디 입력창등에 사용된다.

autocomplete 속성

autocomplete 속성은 입력어 자동완성을 지정한다. 자동완성은 브라우저가 입력된 키워드를 저장해 두었다가 사용자가 입력한 키워드와 저장된 키워드가 일치할 경우 완성된 입력어를 자동으로 표시해 주는 기능이다. 만약 자동완성을 원하지 않는다면 autocomplete 속성을 off로 지정해야 한다.

<input type="text" name="address" autocomplete="off">

require 속성

requir 속성은 HTML5에 추가된 속성으로 필수 입력 필드를 지정한다. input 요소뿐만 아니라 textarea, select 요소에서도 사용된다. 만약 필수 입력 필드를 입력하지 않으면 폼은 전송되지 않고 브라우저는 튤팁을 이용하여 입력하지 않았다는 사실을 알린다.

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

multiple 속성

multiple 속성은 다중 입력을 지정한다. 이 속성이 지정된 입력 컨트롤은 여러 개의 입력값을 받을 수 있다.

<input type="file" multiple="multiple">

min 속성

min 속성은 최소값을 지정한다. 이 속성을 지정하면 사용자가 min 속성값보다 큰 입력값만 유효하게 처리하며 브라우저가 튤팁을 통해 입력할 수 있는 최소값을 알려준다.

<input type="number" min="3">

max 속성

max 속성은 최대값을 지정한다. 이 속성을 지정하면 사용자가 max 속성값보다 작은 입력값만 유효하게 처리하며 브라우저가 튤팁을 통해 입력할 수 있는 최대값을 알려준다.

<input type="number" max="3">

step 속성

step 속성은 HTML5에서 새롭게 추가된 속성으로 입력값 단계를 지정한다. "3, 6, 9," , "5, 10, 15" 처럼 입력값을 일정한 단위로 정형화해야 할 때 step 속성을 사용한다.

<input type="number" step="5">

placeholder 속성

placeholder 속성은 HTML5에 새롭게 추가된 속성으로 플레이스홀더를 지정한다. 플레이스홀더는 텍스트 필드 내에 있는 짧은 도움말을 말한다. 이 속성을 사용하면 사용자 입력 전까지 흐린 색으로 표현된 도움말이 텍스트 필드안에 자리 잡게 되며 컨트롤에 포커스가 생기면 이 텍스트는 사라진다.

<input type="text" placeholder="숫자만 입력하세요">

포커스에 의해 사라질 수 있으므로 중요도가 높거나 긴 도움말은 컨트롤 주변에 작성하거나 title 속성으로 처리하는 것이 더 좋다.

tabindex 속성

tabindex 속성은 탭 순서를 지정한다. 키보드 탭 키를 사용하여 탭 내비게이션 순서로 움직이고 이 순서를 바꿀 수 있는게 tabindex 속성이다. 탭 내비게이션의 순서는 포커스를 받는 순서와 다름 없다.

12<input type="text" tabindex="100">
<input type="password" tabindex="200">
  • 100,200,300 처럼 tabindex 값을 크게 잡아 중간에 다른 요소가 끼어들어 tabindex를 필요하게 되도 수정이 쉽게 하도록 한다.
  • 포커스가 생기지 않게 하려면 -1 로 값을 지정한다.
  • 탭 키를 누르면 낮은 속성값 → 높은 속성값 방향으로 진행되고 Shift와 탭키를 누르면 역방향으로 진행된다.

disabled 속성

disabled 속성은 컨트롤이 비활성화된 상태를 지정한다. 컨트롤을 비활성화 상태로 둔 것은 어떤 조건 또는 상황에 따라 활성화 상태로 바뀌는 것을 염두에 둔 것이다.

<input type="text" disabled="disabled">
  • 입력 컨트롤은 데이터를 입력할 수 없으며 버튼 컨트롤은 클릭 할 수 없다.
  • 포커스를 받을 수 없으므로 탭 키로 이동할 때 disabled 속성으로 지정된 컨트롤은 건너뛰게 된다.
  • 활성화된 상태의 컨트롤과 시각적으로 구분될 수 있도록 disabled 속성으로 지정된 컨트롤은 입력 필드나 버튼의 색상이 어둡게 처리된다.

checked 속성

checked 속성은 컨트롤이 체크된 상태를 지정한다. type 속성이 checkbox, radio 일 때만 사용할 수 있다.

<input type="checkbox" name="nation" value="korea" checked="checked">한국
<input type="checkbox" name="nation" value="japan">일본
한국 일본

readonly 속성

readonly 속성은 읽기 전용 상태를 지정한다. 입력 컨트롤에 입력을 제한 하는 것으로 어떤 조건에 의해 텍스트 필드가 자동 입력되고 입력된 텍스트를 사용자가 마음대로 변경하지 못하도록 폼을 설계할 때 필요하다.

<input type="text" value="123-456" readonly="readonly">
  • type="text"type="password"에서만 사용할 수 있다.

size 속성

size 속성은 입력 컨트롤의 크기를 지정한다. 이 크기는 글자 수를 의미한다. size 속성을 지정하지 않으면 기본값이 적용되므로 브라우저에서 지정한 크기가 표시된다.

<input type="text" size="2">

list 속성

list 속성은 미리 작성된 리스트를 지정한다. 이 속성을 지정하면 input 요소 선택 시 미리 작성된 리스트가 나타나는데, 이때 속성값은 이 리스트가 작성된 datalist 요소의 id 속성값이다.(datalist 요소 참조)

accept 속성

accept 속성은 승인된 파일 타입을 지정한다. 이 속성은 파일 업로드 컨트롤에 사용되는 속성이며 브라우저가 지정된 형식의 파일만 표시하여 사용자 선택이 효율적으로 이루어질 수 있도록 돕는다.

<input type="file" accept="image/jpeg">
  • 오디오 파일 : audio/*
  • 비디오 파일 : video/*
  • 이미지 파일 : image/*

pattern 속성

pattern 속성은 HTML5에 새롭게 추가된 속성으로 정규 표현 패턴을 지정한다. pattern 속성을 지정하면 입력된 내용과 정규 표현 패턴을 비교하여 제대로 입력되었는지를 체크할 수 있다.

<input type="text" pattern="[A-Z]" placeholder="영문 대문자만 허용"> 

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE10+ FF4+ 미지원 CH5+ O9.6+

입력패턴 참고 : http://html5pattern.com

아래의 폼 요소들도 참고하세요.