본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

Form 요소 1 (form 태그와 input 태그)

최초 작성일
최종 수정일
이번 시간에는...
HTML form 태그와 그 안에 들어가는 요소들을 살펴 봅니다. 서버에 데이터를 보내는 GET, POST 방식을 살펴보고, input 태그와 label 태그에 대해 간단히 알아봅니다.

서론

이번 시간에는 텍스트 입력 창이나, 버튼 등에 사용되는 폼 관련 요소들을 살펴 보겠습니다. 사실 이번 강의에 대해 고민이 많았는데요, 이 폼 관련 요소들은 동적인 웹 페이지를 위해서 반드시 필요한 요소들입니다. 하지만, 이런 인풋, 버튼 등을 잘 활용하기 위해서는 자바스크립트나 서버 언어를 아는 게 좋습니다. 아무래도 처음 HTML, CSS만 알고 계시는 초보자 분들에게는 그저 '그림의 떡' 같은 존재로 보일 수 있습니다. 그리고 그렇게 되면 아무래도 흥미를 가지기 어려울 것이 분명하단 생각이 들어 이 강의를 그냥 대부분 지나치지 않을까 생각이 들었습니다. 사실 저도 처음 공부할 때, 폼 관련 요소는 그냥 지나가 버렸습니다.

하지만, 은근 이런 분들이 많아서 그런지 실무로 작업을 하는 분들 중에서도 폼에 대해서는 잘 모르시는 분도 종종 계셨습니다. 그렇기 때문에 자연스레 폼에 관련해서 웹 접근성이 떨어지는 경우도 종종 있고요. 사실 요새 처럼 웹이 점점 어플리케이션화 되어가는 요즘에는 그 만큼 폼에 대해 잘 아는 것도 중요하다고 생각합니다.

고민 끝에, 여러분의 흥미를 더하기 위해 다른 웹 서비스에 무임 승차를 하기로 결정 했습니다. 원래는 검색엔진 쪽으로 할까 했지만, 앞으로도 활용 가능한 것이 어디 없을 까 싶어, 결국 W3C의 웹 검증기 서비스를 활용하기로 결정 했습니다.

폼에 관련해서는 이번 시간과 다음 시간 두 강으로 나눠서 진행을 하고, 여러분이 만든 페이지는 W3C쪽 서버를 통해서 마크 업 검증을 하게 됩니다. 좀 더 엄밀히 말하면, 이번 시간에 만들 페이지는 W3C 검증기 서버 쪽으로 데이터를 전송하는 페이지이고, 실제로 동작하는 페이지를 만들 것입니다. (자바스크립트 없이 HTML만 가지고요) 그리고 이를 통해서 웹 페이지가 어떻게 서버와 정보를 주고 받는지 그 원리를 알게 되실 수 있을 겁니다.

다음은 이번 시간에 만들어 볼 검증기 페이지 예시 입니다.

마크 업 검증기 페이지
/attach/demo/html-3/form-simple.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기

폼(form)과 서버(server)

아무래도 기본 HTML로만 이루어진 페이지라 보기에 상당히 투박합니다. 하지만 해당 입력 창에 여러 분의 웹 페이지 주소 또는 아래 쪽에 소스를 직접 입력해서 전송을 보내면, W3C의 웹 페이지가 나오면서 여러 분의 마크 업을 잘 검증해 줍니다.

이 예시를 보면, 분명 전송 버튼이 a 요소가 아님에도 페이지가 W3C의 페이지로 이동이 되었습니다. 게다가 입력 값이 해당 페이지에 전송이 된 채로 말입니다. 이는 HTML에서 폼의 기본적인 동작입니다. 이런 동작을 위해선 자바스크립트도 필요치 않습니다. 좀 더 살펴 보기 위해서 예시의 소스를 조금 살펴 보겠습니다. 상단 URL 검증 폼부터 보도록 하죠.

여기서 일단 세 가지 태그 요소가 등장하는 것을 볼 수 있습니다. 하나는 form 요소이고, 그 안에 label 요소와 input 요소가 있는 것을 볼 수 있습니다.

form 요소

여기서 먼저 폼 요소(form 태그)를 살펴 보도록 하겠습니다.

이 form 요소에 들어간 속성을 보면, actionmethod가 있습니다. 이 중에 action 속성은 이 폼을 전송할 URL을 지정합니다. 우리는 W3C 검증기를 사용하기 위해서 검증기 페이지 주소를 사용했습니다.

method 속성, GET과 POST

method 속성은 폼에 전송할 방식을 지정합니다. 이 전송 방식을 살펴 보기 위해서, 검증을 한 번 다시 해보도록 하겠습니다. 사실 이 서버에 값을 전송하는 방식은 웹 개발자가 아닌 이상, 필요치 않을 수 있습니다. 필요치 않다고 생각되시면 이 부분은 건너 뛰셔도 좋습니다. (input 요소부터 보시면 됩니다.)

GET 방식

우선 GET 방식부터 알아 보겠습니다. URL 검사와 소스 직접 입력 검사가 있는데, URL 검사를 살펴 보도록 하죠. 한 번 url 입력 창에 'webberstudy.com'이라고 치고 전송 버튼을 눌러 보겠습니다. 물론 예상대로 W3C 검증기 화면이 나타납니다. 하지만, 여기서 지금 주목해야 할 부분은 브라우저의 주소 창입니다.

웨버스터디로 검증해본 페이지의 URL 주소
GET 방식의 전송

여기서 URL 주소를 보면, 'http://validator.w3.org/check?uri=webberstudy.com'로 되어있습니다. 우리가 formaction 속성 값으로 줬던, 'http://validator.w3.org/check' 뒤로 '?uri=webberstudy.com'라고 더 붙었습니다.

그럼 이번에는 '?uri=' 뒤로 다른 사이트 주소를 넣어볼까요? 뒤에 값을 '?uri=google.com'으로 바꿔보고 들어가 봅시다. (물론 구글이 아닌 다른 주소를 넣으셔도 상관 없습니다.) 그러면 검증기가 해당 URL 주소를 검증하는 것을 확인할 수 있습니다.

이를 통해서 서버가 URL을 통해서 페이지의 값을 받았다는 것을 알 수 있습니다. 이와 같이 URL로 값을 받는 방식을 GET 방식이라고 합니다. 이 검증 서비스는 GET 방식으로 'uri=webberstudy.com' 이라고 할당된 값을 받아서 서버가 계산을 한 뒤, 여러분에게 결과를 보여주는 것입니다.

이러한 GET 방식의 예를 한 가지 더 들어보면, 바로 검색 엔진이 있습니다. 국내 압도적인 점유율을 가진 네이버의 경우를 보면, 'http://search.naver.com/search.naver?query=test'의 주소를 입력하면 "test"에 대한 검색 결과를 알 수 있습니다. 네 아까와 같이 URL 주소를 찬찬히 살펴보면, 'search.naver'란 페이지에 '?query=test'이 붙어서 'query=test'라는 값을 전송한 것을 알 수 있습니다. (참고로 아까 검증기에서의 'uri'나 네이버에서 'query'라는 명칭은 해당 서버에서 요구하는 임의 변수 이름입니다.)

POST 방식

이번에는 POST 방식입니다. 아까 검증기에서 소스 직접 입력을 하고 전송을 눌러 보겠습니다. (아무 내용이나 적으셔도 괜찮습니다.) 그리고 이번에도 주소 창을 살펴보겠습니다.

이번에는 방금 살펴본 GET 방식하고는 다르다는 것을 알 수 있으실 겁니다. 네 바로 주소 창에 '?'으로 시작하던 할당 값들이 나타나지 않습니다. 이렇게 서버에 값을 URL이 아닌 숨겨져서 보내지는 것을 POST 방식이라고 합니다.

GET 과 POST의 비교

일단 기본적으로 방금 살펴봤듯이, GET은 URL로 접근이 되는 반면, POST는 URL에 노출이 되지 않음을 알 수 있습니다. 이 URL로 접근이 되느냐 안되느냐는 서버로 보내지는 이 값이 보다 공개적인가 또는 중요한 비공개 정보인가로도 판단할 수 있습니다. 예를 들어 여러분이 어느 웹 서비스에 로그인을 위해서 아이디와 패스워드를 치고 확인을 누른다고 합시다. 만약 이 폼을 GET 방식으로 구현한다면, 여러분의 민감한 비밀번호가 바로 주소 창에 뜨게 됩니다.

http://example.com/?id=mycoolname&password=mypass1234

정말 끔찍한 일이 아닐 수 없습니다. 이런 정보들을 GET 방식으로 보내는 것은 절대 해서는 안될 행동입니다.

하지만, GET 방식은 URL 만으로도 접근이 가능하기 때문에, 접근성이 높아집니다. 굳이 폼으로 보내지 않아도 URL 만으로 접근이 가능 하다는 것은 검색엔진도 접근이 가능하다는 것이 됩니다. 그렇기 때문에 아까 살펴본 네이버와 같은 검색엔진, 또한 대부분 커뮤니티의 게시판 글 같은 경우는 이 GET 방식을 사용한다 할 수 있습니다.

조금 더 정리하자면, GET 방식은 주로 서버에서 받아오는(get) 방식에 (주로 페이지를 검색/조회) 사용되고, POST 방식은 서버에 올리면서(post) 수행하는 방식(글 쓰기나 글 삭제 등과 같이 서버의 값을 변화 시키는 작업)에 사용 됩니다.

단적인 예를 들어 '글 삭제'버튼을 GET방식으로 전송한다면, 굳이 그 폼에서 삭제를 누를 필요 없이, 단지 URL 입력으로 글 삭제가 이루어지게 되어 버립니다. 이는 운이 나쁘면, 검색엔진이 해당 URL에 접속하고 그로 인해 글이 삭제 되어버리는 웃지 못할 상황이 일어나겠죠.

또한, GET 방식은 URL로 전송되기 때문에, 값의 길이 제한이 있지만, POST 방식은 비교적 제한이 덜 합니다. 이 때문에 소스 직접 입력 검증 폼은 POST 방식을 사용하고 있습니다.

혹시 위의 검증기의 전송 방식을 변경해도 같은 결과가 나타날까요? (예를 들어 get을 post로 바꿔서) 결과적으로 이는 동작하지 않습니다. 서버는 GET과 POST를 전혀 별개로 받아드립니다.

form 요소의 속성

이제 다시 form 요소로 돌아와 살펴보지 않은 다른 속성들을 살펴 보겠습니다. 일단 사실 form 요소에 대해서는 방금 살펴본 method 속성과 action 속성만 아셔도 큰 무리는 없습니다. 나머지는 아주 간단히 몇 가지만 다음 도표로 살펴 보겠습니다.

action
폼을 전송할 URL을 입력합니다.
method
전송 방식을 결정합니다. (get 또는 post)
autocomplete
폼 내부 요소의 자동 완성 기능을 사용할지 안할지 결정합니다.
accept-charset
폼 전송 시 인코딩 방식을 명시합니다. (utf-8, euc-kr 등)
enctype
인코딩 방법을 지정합니다. accept-charset과 달리 어떤 문자를 인코딩할 지 등을 결정합니다.

input 요소

이제 주로 폼 안에 들어가는 input 요소를 살펴 보겠습니다. input 요소는 텍스트 입력 뿐 아니라, 전송 버튼, 라디오 버튼, 체크 박스 등 여러 가지로 표현될 수 있습니다. 이는 type 속성에 따라 결정되는 데, 일단 이번 시간에는 텍스트 입력과 전송 버튼만 살펴보고, 다음 시간에 다른 폼 요소들과 함께 더 자세히 살펴 보겠습니다.

input 요소는 주로 다음과 같이 사용합니다.

input 요소는 보시다시피, 스스로 닫는 태그입니다. 때문에 마지막을 '/'로 닫아 주셔야 합니다. (XHTML 표기 방식) 여기서 type 속성을 통해서 이 인풋의 형태 타입을 결정합니다. 이 소스 예시는 텍스트 인풋을 나타냅니다. 그리고 name 속성은 데이터가 서버로 전송될 때 할당되는 변수의 이름입니다. 만약 name 값이 'abc'이고, 해당 form이 GET 방식으로 전송한다면, URL 주소에 'abc=값'이 붙어서 전송이 됩니다. 이 변수의 이름은 해당 서버 페이지가 원하는 변수에 맞게 적어주시면 됩니다.

이는 input 요소가 '폼 전송 버튼(submit)' 타입인 경우 입니다. submit 타입의 요소를 클릭할 경우, 해당 폼 안에 있는 값들이 해당 서버로 전송이 됩니다. 위의 소스에서 value 속성 값은 원래 요소의 기본 할당 값 입니다만, (텍스트 타입 type="text"에서 쓰일 경우, 기본으로 적힌 텍스트 값입니다.) 버튼 형태에서는 해당 버튼에 표시되는 텍스트 입니다. 만약 submit 타입이 value 속성 값이 없을 경우는, 해당 브라우저의 기본 텍스트로 보여집니다. (예를 들어 크롬이라면 '제출', 파이어 폭스라면 '질의 보내기', IE라면 '쿼리 전송'같은 식입니다.)

그리고 당연하게도 만약 name 속성을 달아준다면, 해당 변수로 value 값이 전송됩니다. (name이 'send'이고 value가 '전송'이라면, 'send=전송'의 형태로 전달 됩니다.)

label 요소

label 요소는 해당 폼 요소에 어떤 값을 넣어야 하는지 라벨을 붙여주는 요소입니다. 다음과 같이 사용합니다.

위의 속성과 같이 for 속성에 해당하는 폼 요소의 id 이름을 입력해서 연결 합니다. 만약 id 값이 없을 경우, 다음과 같이 해당 폼 요소를 label 안에 넣어서 표현할 수 있습니다.

하지만, 이와 같은 방식은 국내 스크린 리더 프로그램에서 지원하지 않을 수 있으므로, for 속성과 id로 매치시켜 주는 것이 좋습니다. 이는 해당 폼 요소가 label 요소에 포함되는 안 되든 동일 합니다. 만약 label이 폼 요소를 포함 하더라도 for 값이 해당 폼 요소가 아니라면, 서로 연결이 되지 않습니다.

만약 label 요소가 폼 입력 요소와 연결이 잘 이루어진 경우, 마우스로 label 요소를 클릭만 해도, 해당하는 폼 입력 요소로 포커스가 맞춰 집니다.

아래 "텍스트 입력" 라벨을 클릭 해보세요, 해당 input 요소가 포커스 됩니다.

웹 접근성 기준 상, 폼 입력 요소가 있다면 이에 해당하는 label 요소를 반드시 가지고 있어야 합니다. 만약 label을 넣을만한 공간적인 여유가 없거나 부득이한 경우라면, 해당 폼 입력 요소에 title 속성이라도 넣도록 권장하고 있습니다.

정리

이번 시간에는 form 요소와 이를 통해서 웹 페이지가 서버에 데이터를 어떻게 전송하는 지를 알아 봤습니다. 그리고 해당 데이터를 입력하는 input과 그 입력 폼의 라벨을 명시해주는 label 요소를 배웠습니다. 사실 input 요소 외에도 입력 요소는 더 있습니다. 이에 대해서는 다음 시간에 살펴 봅니다.

또한, 이번 강의에서 폼 입력 요소들(input 등)을 form 요소 안에만 포함 시켰는데요, 사실 모든 폼 입력 요소들이 form 안에 있어야 하는 것은 아닙니다. 사실 실제로 많은 버튼들은 굳이 서버에 데이터를 보내지 않으며, 그저 웹 페이지를 동적으로 동작하게 만들어 줍니다. (예를 들어 글씨 크기 변경이나 이미지 슬라이더 같은 형태들)

하지만, 만약 서버에 데이터를 보내는 양식이라면 꼭 form 요소를 이용하는 것이 좋습니다. 사실 form 요소가 없더라도, 이를 자바스크립트로 구현할 수 있습니다. (게다가 보안과 입력 양식의 검증을 위해서도 자바스크립트는 필요합니다.) 하지만, 이는 접근성을 떨어트립니다. 만약 자바스크립트에 조금이라도 오류가 있는 경우 폼 전송이 안되겠죠. 보통 검색 창이나, 로그인 폼 같은 경우 모두 입력하고 엔터 키(enter)를 누르면 폼이 전송이 됩니다. 이는 자바스크립트를 사용하지 않아도 동작하는 form 요소의 기본 특성입니다. 하지만, form을 사용하지 않는다면, 이런 동작이 동작하지 않으며, 이를 구현하기 위해선 또 자바스크립트로 구현을 해야 합니다. 이는 불필요한 소모적인 방법일 수 있습니다.

이제 폼의 기본 원리와 기본적인 부분은 이만 알아보고 다음 시간에 좀 더 다루도록 하겠습니다.

요점 정리
  • form 요소는 폼 안에 입력된 데이터를 웹 서버로 전송하는 역할을 함.
  • 서버에 데이터를 전송하는 방식으로 기본적으로 GET/POST 방식이 있음.
  • GET은 URL을 통해서 전송, 주로 조회나 검색 같은 서버에 직접적인 영향을 미치지 않는 형식에 사용. 접근성이 좋음
  • POST는 정보를 숨겨서 전송, 서버에 영향을 주며 수행하는 형식에 주로 사용. 보다 보안성이 높으나, URL 접근이 안 되는 관계로 검색엔진 등의 접근성은 떨어짐
  • input 요소는 폼 안에서 데이터를 입력하는 요소. type 속성으로 형태를 바꿀 수 있음.
  • type="submit"인 input 요소는 클릭 시 폼을 서버로 전송함.
  • label은 폼 입력 요소에 무엇을 입력하는 지 명시해 주는 요소. 주로 해당 입력 요소의 id를 연결.
  • label은 꼭 명시해 주는 것이 좋으며, label이 들어갈 공간이 없는 경우, 해당 입력 요소에 title 속성으로라도 명시

이 글이 유용하셨다면 친구들에게 공유 해주세요.