20. HTML 폼의 기초

소개

1온라인에서 폼은 웹 페이지로 정보를 입력하는 영역입니다. 예를 들자면 텍스트 필드에 텍스트나 숫자를 입력하는 것, 체크박스에 표시하는 것, 라디오 버튼을 선택하는 것 등입니다. 그런 후에 사이트로 폼을 전송할 수 있습니다.

웹의 어디에서나 폼을 볼 수 있습니다. 로그인 화면에서 사용자 이름과 비밀번호를 입력하는 것, 블로그에 코멘트를 남기는 것, SNS 사이트에서 프로필을 채워 넣는 것, 쇼핑 사이트에서 결재 정보를 입력하는 것 모두가 폼을 이용합니다.

폼을 만드는 것은 쉽습니다만, 웹 표준을 준수하는 폼은 어떤 것일까요? 그동안 우리의 과정을 따라 왔다면, 웹 표준이란 앞으로 나아가는 것임을 깨달았을 것입니다. 표준을 준수하고 접근성있는 폼을 만드는 것은 더이상 허술한 폼을 만들지 않는다는 것을 뜻합니다.

그러면, 먼저 가장 기본적이고 단순한 폼을 만들어 본 후에 좀 더 복잡한 것으로 진행하겠습니다. 이 글에서는 HTML을 사용해서 우아하고 접근성있는 폼을 만들기 위해 필요한 모든 것을 다룰 것입니다. 글의 구조는 다음과 같습니다.

  • 기본적인 코드
  • 구조와 행동의 추가
  • 의미, 스타일, 그리고 조금의 구조를 더 추가
  • 요약
  • 더 읽을만한 것들
  • 연습문제

기본적인 코드

먼저 정말로 기본적인 댓글 폼을 만들어 보기로 합니다. 이 폼은 당신의 웹 사이트에 사람들이 댓글을 달 수 있도록 하는 것입니다. 다른 말로 하면, 당신의 이메일 주소 없이도 당신에게 연락하기 위한 방법이 되는 것입니다.

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

위와 같은 코드를 HTML 문서로 저장하고 브라우저에서 열어 보면, 그림 1과 같이 보일 것입니다.

그림 1. 기본적인 폼 예제

직접 테스트해보세요. 위의 코드를 HTML 문서에 삽입하고 브라우저에서 열어 보거나, 여기를 눌러서 위의 폼을 다른 페이지에서 열어 보세요. 이것저것 해 보면서 어떤 일을 할 수 있는지 직접 보세요.

코드를 보면 <form> 태그로 시작해서 </form> 태그로 끝나고, 그 사이에 다른 코드들이 있는 것을 볼 수 있습니다. 이 폼 요소는 두개의 텍스트 필드가 있어서 사용자가 거기에 자신의 이름과 이메일 주소를 입력할 수 있고, textarea가 있어서 사이트 주인에게 댓글을 남길 수 있도록 되어 있습니다.

  • <form></form>: 이 두 태그는 필수적인 태그입니다. 이것이 없다면 웹 폼을 만들 수 없습니다. 모든 폼은 반드시 <form> 로 시작해서 </form> 로 끝나야 합니다.<form> 태그에는 몇가지 속성을 사용할 수 있는데, 다음 단계에서 살펴볼 것입니다. 하지만 한가지 유념해 둘 것은, 폼 안에 폼을 쓸 수는 없다는 것입니다.
  • <input> (XHTML 문법을 사용한다면 <input />라고 써야 합니다): 이 태그는 정보를 입력할 수 있는 영역을 정의합니다. 위 예제에서는 방문자가 자신의 이름과 이메일 주소를 남길 수 있는 필드로 사용되었습니다.모든 input 요소는 type 속성을 가져야 하며, 이 속성은 이 요소가 무엇을 받아들일 것인지를 정의합니다. 사용할 수 있는 값은 text, button, checkbox, file, hidden, image, password, radio, reset, submit 입니다.모든 input 요소는 name 속성을 반드시 가져야 합니다(type 속성이 submit 이거나 reset인 경우는 예외2입니다.) 이 속성은 요소에 입력된 값의 이름이 무엇인지를 나타냅니다. 폼이 전송될 때, 많은 스크립트3가 name 속성을 사용해서 폼 데이터를 데이터베이스로 전송하든지, 아니면 사람이 읽을 수 있도록 이메일에 담든지 하게 됩니다.따라서, input 요소를 이용해서 사이트 방문자의 이름을 받으려고 했다면, name 속성은 아마도 name=”name”, 또는 name=”first name” 처럼 쓰게 될 것입니다. 이 요소를 이용해서 이메일 주소를 받으려고 헀다면, 아마도 name=”email” 처럼 썼을 것입니다. 요소의 name 속성을 의미 있게 정한다면 당신, 혹은 이후에 이 폼을 수정하려는 사람이 쉽게 이해할 수 있을 것입니다.”의미 있게” 라는 말은, 그 기능에 맞도록 이름을 정하라는 것입니다 – 위에서 자세하게 예를 든 것 처럼요. 필드에서 이메일 주소를 받을 것이라면, name=”email”을 사용하고, 방문자의 우편 주소를 받을 것이라면 name=”street-address”로 쓰는 것입니다. 정확한 단어를 사용하면 폼을 수정하는 사람 뿐만 아니라, 서버측에서 데이터베이스를 다루는 사람 역시 이것을 쉽게 이해할 수 있습니다. 정확한 의미를 전달할 단어를 생각해 보세요.
  • 모든 input 요소는 또한 value 속성을 가져야 합니다. 이 값은 비워 두어도 되는데 – value=”” – 이렇게 하면 사이트 방문자가 무엇을 입력하든지 그대로 받아들인다는 의미입니다. 체크박스, 라디오 버튼, hidden, 제출, 기타 다른 type 속성일 경우, value 속성의 값이 기본값으로 되어있길 원하는 것을 넣을 수 있습니다. submit이나 hidden 같은 경우에는 최종적으로 입력될 것과 동일한 값을 넣습니다.value 속성의 예제:빈 값 – 사용자가 입력하는 것이 값이 됩니다.
    • 코드: <input type=”text” name=”first-name” id=”first-name” value=”” />
    • 사용자 입력: Jenifer
    • 폼이 전송될 때에는 first-name 이 “Jenifer” 라는 값으로 전달됩니다.

    미리 정해진 값:

    • 코드: <input type=”checkbox” name=”mailing-list” id=”mailing-list” value=”no” />
    • 사용자는 웹사이트의 메일링 리스트에 가입하길 원하므로 이 박스에 체크합니다.
    • 폼이 전송될 때에는 mailing-list 가 “yes” 라는 값으로 전달됩니다.
  • 두개의 input 요소 뒤에 있는 것은 textarea 요소입니다.이 요소는 텍스트를 입력하기에 좀 더 좋은 공간을 제공합니다. input 요소에서 한 줄의 텍스트만을 허용하는 것 과는 다르게, textarea 요소는 여러 줄의 입력을 허용할 수 있으며, 몇 줄을 받아들일 수 있는지 정할 수도 있습니다. cols 와 rows 속성은 모든 textarea 요소에 필요한 속성이며, 텍스트 영역이 몇 행 몇 열의 공간을 차지하게 될 지 정하는 것입니다. 이 값은 글자 단위로 계산됩니다.
  • 마지막으로, value=”submit” 이라 지정된 조금 특별한 input 요소가 있습니다. submit 형태의 input은 텍스트를 입력할 수 있는 필드를 그리는 것이 아니라 제출 버튼을 만듭니다. 이것을 누르면 폼에서 지정한 곳으로 데이터를 전송하게 됩니다. (아직 그러한 것을 지정하지 않았으니까, 눌러도 아무 일도 일어나지 않습니다)
  •  

 

구조와 동작의 추가

위에서 링크된 폼을 클릭하고, 내용을 채워 넣고 제출 버튼을 눌렀다고 해 봅시다 – 왜 아무 일도 일어나지 않고, 형편없어 보이는데다가 전부 한줄로 표시되어 있을까요? 답은 아직 구조가 정의되지 않았다, 또는 수집된 정보를 제출할 것이 정의되지 않았다 라는 것입니다.

이제 다시 해 보죠

<form id="contact-form" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
        </li>
        <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </li>
    </ul>
</form>

이 폼은 브라우저에서 그림 2 와 같이 보일 것입니다.

그림 2. 두번째 폼 예제 - 조금 좋아 보이지만, 아직 완전하진 않습니다.

더 좋아진 폼을 새 페이지에서 테스트해 볼 수 있습니다

기초적이고 단순한 폼에 몇가지를 더했습니다. 하나씩 살펴보도록 합시다.

  • <form> 요소에 새로운 속성이 추가되었습니다. 이 폼에 의미있는 이름을 부여함과 동시에, 필요할 경우 CSS나 자바스크립트에서 이용할 수 있게끔 id 속성을 추가했습니다. 하나의 id 값은 페이지당 하나씩만 있을 수 있습니다. 여기에서는 그 값으로 contact-form 을 사용했습니다.
  • 첫번째 폼에서 제출 버튼을 눌렀을 때 아무 일도 일어나지 않은 것은, action과 method가 없었기 때문입니다. method 속성은 이 폼을 처리할 서버 페이지에 데이터를 전달할 방법을 나타내는 것입니다. 일반적으로 쓰이는 두가지 방법은 “GET” 과 “POST” 입니다. get 은 데이터를 페이지의 URL에 첨부해서 보냅니다. 이것을 사용하면, http://www.example.com/page.php?data1=value1&data2=value2… 같은 URL을 보게 될 것입니다. 그렇게 해야 하는 명확한 이유가 있지 않다면, 일반적으로 get 을 쓰는 것은 그다지 좋지 않습니다. 이 방식을 사용 하면 모든 정보들이 URL을 통해 전송되기 때문에, 보안이 필요한 정보가 전부 노출될 가능성이 있습니다.4 post 방식을 쓰게 되면 데이터가 URL을 통하지 않고 인코드되어 전달됩니다. post 방식은 좀 더 안전하며 일반적으로 더 좋은 옵션입니다폼 데이터가 보안에 매우 민감한 – 예를 들어 신용카드 정보 – 경우, SSL 과 함께 https 프로토콜을 사용해야 합니다. 기본적으로, 이것은 데이터가 http 프로토콜이 아니라 https 프로토콜을 통해 전송되는 것을 의미합니다. 다음에 쇼핑 사이트에서 뭔가 구입하거나 인터넷 뱅킹을 이용하려고 한다면, 주소 창을 한번 보십시오 – 아마도 http:// 가 아니라 https:// 를 보게 될 것입니다. https 연결은 http에 비해 약간 느리긴 하지만, 데이터가 암호화되므로 누군가가 해킹한다고 하더라도 안전할 수 있습니다. https와 SSL을 사용하고자 한다면 호스팅 업체에 문의해볼 수 있습니다.
  • action 속성은 폼 데이터를 처리할 스크립트가 담긴 파일을 명시합니다. 많은 웹 호스트에서 단순한 메일 전송 스크립트 같은 것을 제공합니다. 혹은 서버 쪽에서 사용할 스크립트가 있을 수도 있습니다. 아마 거의 대부분의 경우에, PHP, Perl, Ruby 같은 언어를 다루는 사람들이 서버쪽 스크립트를 작성하게 될 것입니다.서버 사이드 스크립트를 다루는 것은 이 시리즈의 초점을 벗어나는 일입니다. 더 많은 것을 알고 싶다면 다음의 자원들을 참고하세요:
  • 두번째 예제의 두번째 줄에 있는 것은 “hidden” 필드입니다. 여기에서는 리다이렉트를 나타내고 있습니다.마크업의 구조에서 표현과 동작을 분리해낸다는 목적에 걸맞게 하려면, 폼이 전송되었을때 그것을 처리하는 스크립트에서 사용자의 리다이렉션 역시 담당하는 것이 이치에 맞을 것입니다. 사용자들이 폼을 제출한 뒤, 다음엔 도대체 무슨 일을 해야 하는 것인지 의아해 하는 것은 바라지 않을 것입니다. 폼이 잘 전송되었다면, “다음에 할 일” 같은 링크를 제공하는 대신 거기로 리다이렉트하는 것이 좋을 것입니다. 이 줄에서는 폼이 전송된 뒤에 할 일을 명시하고 있는데, 사용자는 오페라 홈페이지로 리다이렉트 될 것입니다.
  • 폼의 외관을 개선하기 위해, 모든 폼 요소들을 순서 없는 목록에 넣어서 줄이 바뀌게끔 했고, CSS를 이용해 스타일을 적용하기 쉽도록 했습니다.폼을 마크업할 때 순서없는 목록을 사용하면 안되고 대신 정의 목록을 사용해야 한다고 주장하는 사람이 있습니다. 목록을 전혀 사용하지 말고, CSS로 <label>과 <input> 요소에 스타일을 주어야 한다고 주장하는 사람들도 있습니다. 무엇을 선택할지는 당신에게 맡기려고 합니다. 우리 예제에서는 단순함을 위해서 순서 없는 목록을 사용할 것입니다.
  • 마지막으로, 두개의 폼 요소에 레이블을 붙였습니다. 의미의 관점에서, 그리고 다양한 종류의 인터넷 장치들에서 폼이 접근성있게 되도록 하려면, 모든 폼 요소에 레이블을 붙이는 것이 최선입니다. 예제를 보면, 레이블은 input 요소와 textarea 요소의 id 속성을 이용해서 그 요소에 묶여 있습니다. 이렇게 하면 화면에 나타나는 각각의 폼 필드에 시각적인 식별자를 제공할 수 있을 뿐만 아니라, 의미론적인 의미를 부여할 수 있습니다. 예를 들면, 스크린 리더를 이용하는 시각 장애인도 어떤 레이블이 어떤 폼 요소에 묶여 있는지 알 수 있는 것입니다. id 는 또한 각각의 폼 필드에 CSS 스타일을 부여하는데에도 사용됩니다.name 요소가 있는데 왜 id 요소를 또 식별자로 추가하고 있는지 의아할 것입니다. 그에 대한 답은, name 속성을 갖지 않는 input 요소들은 서버로 전송되지 않기 때문에 name 속성은 반드시 필요한 것이며, id 속성은 폼 요소와 그에 대응하는 label 요소를 연결하기 위해 필요한 것이라는 겁니다. 따라서 둘 모두를 사용해야 합니다.

두번쨰 폼은 좀 더 나아 보이지만, 여전히 보기가 썩 좋진 않습니다. 약간의 스타일을 더 적용해보죠.

의미, 스타일, 그리고 조금의 구조를 더 추가

이제 아래와 같이 폼을 완성해 보도록 하겠습니다.

<form id="contact-form" action="script.php" method="post">
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="comments">Comments:</label>
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
        <label for="mailing-list">Would you like to sign up for our mailing list?</label>
        <input type="checkbox" checked="checked" id="mailing-list" value="Yes, sign me up!" />
      </li>
      <li>
        <input type="submit" value="submit" />
        <input type="reset" value="reset" />
      </li>
    </ul>
  </fieldset>
</form>

브라우저에서 보면, 그림 3과 같이 보입니다.5

그림 3. 훨씬 좋아 보이는 마지막 예제

이 폼을 브라우저에서 보고 테스트해보려면, 이 링크를 따라가세요 (새 창에서 열립니다)

마지막에 추가한 요소는 fleldset과 legend 입니다. 둘 모두 필수적인 것은 아니지만, 복잡한 폼에는 매우 유용하며, 또한 표현적인 목적으로도 쓸모가 있습니다.

fieldset 요소는 폼을 의미적인 모듈로 분류할 수 있도록 합니다. 복잡한 폼 에서는, 예를 들어 주소 정보, 결재 정보, 고객의 추가 요청 등에 대해 별도의 fieldset 요소들을 사용할 수 있습니다. legend 요소는 각각의 fieldset 섹션들에 이름을 줍니다.

또한 이 폼에는 약간의 CSS를 적용했습니다. 외부 스타일시트 파일을 이용해서 마지막 폼에 스타일을 적용했는데, 이것을 클릭해서 스타일을 볼 수 있습니다. 스타일을 적용하면서 주로 신경을 쓴 것은 레이블과 필드를 정렬하기 위해 마진을 추가하고, 순서없는 목록의 불릿을 없앤 것입니다. 스타일시트에는 이런 내용이 들어 있습니다:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input  {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

무슨 의미일까요? 첫번째 줄은 fieldset의 테두리가 페이지 전체로 확장되지 않도록 하는 것입니다. border: none;을 추가하면 테두리를 아예 없앨 수도 있습니다. 두번째 줄은 li 요소에 10픽셀의 마진을 주어서 각각의 목록 사이에 공백을 넣은 것입니다. 세번째와 네번째는 input, textarea 요소에 왼쪽 마진을 주어서 정렬되도록 한 것입니다.

폼의 스타일링에 관한 더 많은 정보를 보려면, 곧 이어질 이 시리즈의 글을 참고하거나, Nick Rigby가 A List Apart 에 기고한 “보기좋고 접근성있는 폼” 을 참고하기 바랍니다. 또한 이 시리즈의 다음 글에서 마진과 테두리에 대해 더 많은 것을 배우게 될 것입니다.

요약

이 글에서는 웹 표준을 준수하는 폼을 만드는 가장 기초적인 세가지 단계를 다루었습니다. 여기에서 다루지 않은 것이 아주 많이 있지만, 그런 것들은 여러분이 직접 해 보아야 할 것입니다. 억세스키, 콤보박스, 라디오 버튼, 셀렉트 박스 같은 것들이 있습니다.

위의 세번째 폼에서는 평범한 텍스트 이외의 것을 전달하는 방법을 보여주기 위해 체크박스를 하나 추가했습니다. checkbox, radio button 타입은 짧은 질문을 하거나 선택지를 제공하는 용도로 사용할 수 있습니다(체크박스는 여러개의 선택을, 라디오 버튼은 하나만). 라디오 버튼은 설문조사 폼에서 매우 유용하게 쓸 수 있습니다.

이 글에서는 select 요소는 다루지 않았는데, 드롭다운 메뉴를 만드는데 사용할 수 있습니다.

더 읽어볼 것들

연습문제

  1. 방문자에게 이름, 이메일주소, 코멘트를 요청하는 단순한 폼을 만들어 보세요
  2. 메일링 리스트에 가입할 것인지 의사를 묻는 체크박스를 추가해보세요
  3. CSS를 이용해서 폼에 스타일을 넣어 보세요: 너비를 정하고, 레이블을 왼쪽에 정렬하고, 배경색을 추가해보세요.

저자

Ms. Jen 은 생후 11개월부터 음식에 관한 그림과 벽화들을 그려 온 전문적인 웹 디자이너/개발자입니다. 그녀는 1996에 컴퓨터 상점에서 예술가들은 코드에 무지하다는 말을 들은 다음부터 HTML을 배워 왔는데, 그 후로 웹 디자인에 관한 것은 무엇이든지 다 즐기고 있습니다.

Ms. Jen은 웹 &amp; 모바일 디자인 회사인 Black Phoebe Designs의 설립자이며 소유주입니다. Ms. Jen은 아일랜드 더블린의 Trinity 대학에서 컴퓨터 과학과 멀티미디어 시스템 학위를 받았으며, 2001년부터 2005년까지 LA 근교의 대학에서 웹 디자인을 가르쳤습니다. 그녀는 두개의 노키아 모바일 블로그 프로젝트에 참여한 바 있는데, 그것들은 Wasabi Lifeblog (2004–2005) 와 Nokia Urbanista Diaries (2008) 입니다. Ms. Jen을 온라인에서 만나려면 blackphoebe.com 또는 blackphoebe.mobi 를 방문하면 됩니다.

  1. 역주: 저자는 “쉬운” 표현을 사용하면서 거부감 없게 글을 쓰려고 한 것 같지만, 문화의 차이 및 역자의 부족함 때문에 이러한 부분을 빠짐없이 옮기려고 하면 어색해지는 점이 있어서 다소 없애면서 의역하였습니다. 내용 자체는 변한것이 없지만 표현이 많이 축소되었습니다. 양해 바랍니다.
  2. 역주:XHTML 1.1일 경우에는 <a>, <map>, <form>, <img> 요소에서는 name 속성이 폐지되어 사용할 수 없습니다.
  3. 역주: 서버사이드 스크립트를 말합니다.
  4. 역주: 장점도 있습니다 – get 방식을 사용하면 결과가 캐쉬에 저장될 가능성이 있습니다.
  5. 역주: 이 예제는 조금 잘못되었는데, 메일링 리스트에 가입할 것인지를 묻는 체크박스에 name 속성이 빠져 있습니다.
이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.
  • Nool Kim

    블로그 글씨의 두께가 들쑥날쑥 해서 예전보다 가독성이 떨어 졌어요.ㅠㅠ 크롬 최신버전을 사용하고 있습니다. 다른 분들도 그러신지요?