사용자가 웹페이지에서 '입력' 행위를 할 수 있는 인터페이스를 제공하는 HTML 태그들
웹페이지에서 사용자가 '입력'을 할 수 있는 인터페이스란 어떤 것들을 말하는 것일까요?
예를 들어 검색엔진을 한번 생각해보도록 합시다. 검색엔진에는 검색어를 입력할 수 있는 검색창이 있습니다. 이것은 사용자가 텍스트를 입력할 수 있는 인터페이스입니다. 또 다른 예시를 찾아볼까요. 웹사이트에서 제공하는 기능들을 제대로 이용하기 위해서는 로그인이 필요한 경우가 있습니다. 로그인을 하기 위해서는 '아이디'와 '비밀번호'를 입력해야겠죠? 그리고 로그인을 하기 위해 '로그인 버튼'을 누릅니다. 이런 입력 공간이나 버튼들이 다 사용자가 어떤 정보(데이터)를 입력할 수 있도록 해주는 사용자 인터페이스(UI)입니다.
이런 UI를 제공하는 HTML 태그들이 있습니다. 대표적으로 가장 많이 쓰이는 input, textarea, button, select 등이 있죠. 이 포스팅에서는 각 태그들이 어떤 입력 형태를 웹을 이용하는 유저들에게 제공하는지 그 기능들을 하나씩 살펴보도록 하겠습니다.
input 태그
input 태그의 역할
input 태그는 사용자가 원하는 데이터의 값을 직접 입력할 수 있는 인터페이스를 제공해주는 태그입니다.
input태그의 대표 속성들
1. type
type은 input 태그에 입력할 데이터의 종류를 정의합니다.
type 속성의 값으로는 text, password, email, number, date, file 등이 있습니다. (더 많은 속성 값을 살펴보고 싶으면 레퍼런스를 참조해주세요. 레퍼런스를 보면 type속성 외에도 다양한 속성들에 대해 알 수 있습니다.)
2. value
value는 input 태그에 입력된 데이터의 값을 의미합니다. 사용자가 데이터를 입력할 때마다 동적으로 변경됩니다. (사용자가 input태그에 데이터를 입력하면 해당 input 태그에서 change 이벤트가 발생하고 input 태그의 value값이 변경됩니다.)
input 태그의 자주 쓰이는 type들의 사용 예시
1. type="text"
input태그 안에 사용자가 텍스트를 입력할 수 있게 해 줍니다.
value속성 값을 넣으면 텍스트가 미리 입력되어있습니다.
placeholder의 값은 사용자가 input 태그에 값을 입력하기 전까지는 출력되고, 값을 입력하는 순간 사라지는 텍스트입니다.
* 예시 코드
<input type="text" />
<input type="text" value="미리 입력된 텍스트^^" />
<input type="text" placeholder="여기에 텍스트를 입력하세요." />* 결과
2. type="password"
input 태그 안에 사용자가 비밀번호를 입력할 수 있게 해 줍니다. 화면 상에서 정확한 값이 보이지 않으며 입력한 자릿수만 알 수 있습니다.
* 예시 코드
<input type="password" value="abcd1234" />* 결과
3. type="checkbox"
여러 항목을 사용자에게 선택지로 주고 선택할 수 있도록 해줍니다. 중복선택을 허용해주는 것이 특징입니다.
checked 속성을 넣어주면 처음부터 선택되어있습니다.
name 속성 값은 value를 바인딩해줄 key의 역할을 합니다. 즉, name과 value의 관계는 1:N의 관계입니다.
조금 더 자세히 풀어서 설명하겠습니다. 원하는 특정 데이터에 대한 여러 개의 선택지를 유저에게 제공하고 싶은 상황을 가정해보겠습니다. 예를 들면 쇼핑몰 사이트에서 구매자에게 어떤 물품에 대해 색상을 고르도록 하는 상황을 떠올려봅시다. 어떤 물품이 key라면 색상은 value가 되는 것입니다.
* 예시 코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/vYOjwZr">
vYOjwZr by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
4. type="radio"
checkbox처럼 여러 항목을 사용자에게 선택지로 주지만, 중복선택을 허용하지 않는다는 점이 다릅니다.
checkbox는 중복선택을 허용합니다.
* 예시코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/gOpzJxQ">
gOpzJxQ by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
5. type="date"
연월일을 입력할 수 있는데 캘린더를 보여줘서 클릭만으로 입력할 수 있게 해 줍니다.
* 예시 코드
<input type="date" name="date" />
* 결과
6. type="range"
숫자를 지정된 범위 내에서 선택할 수 있는 슬라이드를 줍니다.
min과 max속성으로 최솟값과 최댓값을 주고 value로 입력값을 줄 수 있습니다.
step속성은 값과 값 사이의 가능한 최소 간격을 설정합니다.
* 예시 코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/zYGjXbv">
zYGjXbv by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
사용자가 바(bar)를 조작하면 바 위치에 따른 정확한 값을 즉시 화면에 표기해주면 사용자 입장에서 더 좋을 텐데 아쉽게도 이것은 자바스크립트로 구현해야 합니다. oninput은 이벤트 헬퍼인데 input이벤트가 발생했을 때 속성 값으로 지정한 자바스크립트 코드를 실행합니다. 즉, 슬라이드를 조작하면 input이벤트가 발생하고 그 즉시 자바스크립트 코드가 실행되어 input의 value를 파라미터로 받아 showVal() 함수를 실행하고 함수 내 코드에 의해 span 태그 안에 있는 텍스트가 변경되는 로직입니다.
물론 자바스크립트를 안 써도 range type의 input 태그를 사용하는 데에는 전혀 지장이 없습니다. html 태그의 기능과 자바스크립트의 기능은 분리해서 생각해야 합니다.
7. type="button"
보통 onclick 속성이 같이 쓰입니다. onclick은 이벤트 헬퍼인데 click이라는 이벤트가 발생할 때 실행될 자바스크립트 코드를 속성 값으로 넣어주면 click이벤트 발생 시 해당 코드가 실행됩니다.
* 예시 코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/OJVZGRj">
OJVZGRj by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
8. type="file"
파일을 첨부할 수 있습니다.
* 예시코드
<input type='file' name='picture' />
* 결과
textarea 태그
input 태그의 text type을 사용해보면 텍스트가 박스의 범위를 벗어나면 스크롤도 안 생기고 옆으로만 계속 넘어가기 때문에 상당히 보기가 불편해집니다. 그런데 textarea태그를 사용하면 텍스트가 박스의 범위를 벗어나면 자동으로 줄 바꿈이 되고 그뿐만 아니라 스크롤도 생겨서 쉽게 볼 수 있도록 해줍니다. 따라서 글자 수 제약이 없는 칸이나 장문을 입력할 칸을 만들 때에는 input보다는 textarea를 사용하는 것이 더 좋습니다. 둘이 어떻게 다른지 예시를 살펴보도록 하죠.
input type='text'와 textarea의 비교
See the Pen https://codepen.io/cocoder16/pen/VwLxOZz">
VwLxOZz by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
위 코드펜에 직접 타이핑을 해보시면 다음 사실을 알 수 있습니다.
input 태그는 박스 범위를 벗어나면 글을 얼마나 썼는지 알 수 없고, 지난 글을 보기도 불편합니다.
또한 줄 바꿈도 하지 못합니다.
반면 textarea태그는 박스 범위를 벗어나면 자동 줄 바꿈이 되고, 스크롤도 자동으로 생성되며,
줄 바꿈도 자유자재로 할 수 있습니다.
텍스트 입력 인터페이스를 만들 때 사용자에게 자율성을 주거나 장문을 허용하는 경우 input 태그보다는 textarea태그가 더 유용할 것 같습니다.
select 태그로 dropdown list 만들기
select 태그는 input 태그의 radio나 checkbox와 같은 역할을 합니다.
단일 선택만 가능하면 radio 같은 역할이고 다중 선택이 가능하면 checkbox같은 역할을 합니다.
하지만 checkbox가 훨씬 보기 좋고 접근성이 좋기 때문에 select 태그로 다중선택이 가능하게 만드는 것은 안 하는 것이 좋습니다.
그래서 이번 예제는 단일 선택만 가능한 select태그의 사용법을 적어보겠습니다.
* 예시 코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/OJVwgPG">
OJVwgPG by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
select 태그에는 name값을 적고 select 태그 안에 각 선택지를 option 태그로 만듭니다. 각 option태그에는 전달할 value를 적어 넣습니다. 화면 상으로도 보이는 텍스트는 <option>과 </option> 사이에 적어넣습니다.
default value를 지정하고 싶으면 option 태그에 selected 속성을 넣어줍니다.
label 태그로 UI의 편의성 높이기
이렇게 HTML5 태그들을 이용하여 UI를 만들어봤습니다만, 뭔가 이대로 사용하기엔 불편한 점들이 있습니다. 이제 UX를 고려하여 조금 더 UI들을 개선해봅시다. 우선 첫 번째로, CSS를 통해 요소들의 너비, 높이 등을 개선하여 더 이용하기 편리하게 만들 수 있습니다. CSS를 통해 UX를 개선하는 방법은 무궁무진하기 때문에 이 글에서는 CSS 자체를 따로 학습하는 것으로 미뤄두겠습니다. 두 번째로, label 태그를 이용하여 조금 더 접근성을 높여줄 수 있습니다.
예를 들면 checkbox를 사용할 때 오로지 네모 모양의 체크박스를 클릭해야 선택이 되는 게 아니라 체크박스 옆에 텍스트를 클릭해도 선택이 되게끔 만들어 더 넓은 영역에 대해 클릭 이벤트를 받을 수 있도록 만드는 것입니다.
label 태그 사용법
1. for속성과 id속성의 값을 일치시키기
label 태그의 for속성 값과 input 태그의 id속성 값을 일치시키면 label태그 안의 내용물을 선택했을 때, input 태그가 선택된 것과 같은 효과를 볼 수 있습니다.
* 예시 코드
<!-- 사용 예시 1 -->
<label for="txt">content: </label>
<input id="txt" type="text" name="content" />
<!-- content: 를 클릭하면 input상자 안에 커서가 생김-->
* 결과
2. label 태그로 감싸기
원하는 태그 전체를 label태그로 감싸버리는 매우 간단한 방법입니다. 이 경우 label 태그에 어떤 속성도 필요하지 않습니다.
* 예시 코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/GRJdayw">
GRJdayw by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
직접 사용해보면 클릭하기가 훨씬 편리하다는 것을 느낄 수 있을 겁니다.
이렇게 label태그를 이용해 UX를 높이기 위해 UI의 접근성을 높이는 간단한 방법을 알아봤습니다.
이렇게 만든 UI에 사용자가 입력한 데이터는 어떻게 사용될까?
지금까지 알아본 UI를 이용해 사용자는 텍스트, 이메일, 비밀번호, 숫자, 파일 등등 다양한 데이터를 입력할 수 있습니다. 그런데 이렇게 입력한 데이터를 웹페이지를 제공하는 호스트가 받아보려면 어떻게 해야 할까요? 호스트가 데이터를 받으면 그 데이터를 다시 웹페이지에 뿌려 출력해줄 수 있습니다. 예를 들어, 유저가 검색엔진에 '케이크'를 입력하고 검색 버튼을 누르는 상황을 가정해보겠습니다. '케이크'라는 텍스트 데이터는 검색엔진 호스트에 전달되고, 호스트에서는 여러 알고리즘을 통해 '케이크'라는 검색어에 알맞은 검색 결과들을 추려내어 다시 사용자에게 전달해줍니다. 이런 과정은 웹에서는 http 통신을 통해 이루어집니다.
input 태그 등을 통해 우리가 지금까지 만든 UI에 사용자가 입력한 데이터를 웹서버(호스트)에게 보내려면 http를 통해 보내야 합니다. 그러기 위해 사용하는 HTML5 태그가 또 있습니다. 바로 form 태그입니다. 그래서 다음 포스팅에서는 form 태그를 통해 form data를 웹서버에 전송하는 것을 다뤄보겠습니다.
최근댓글