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

Form 요소 2 (textarea와 input)

최초 작성일
최종 수정일
이번 시간에는...
HTML form 요소인 textarea 태그와 input 태그의 다양한 타입(type)과 속성들을 살펴보며, 폼 예시 페이지를 제작해봅니다.

이번 시간에는 지난 시간에 간단하게 다뤘던 '마크 업 검증기' 페이지에 여러 옵션을 넣어 보도록 하겠습니다. 일단은 지난 시간에는 input 요소와 label 요소를 다뤘는데, '소스 직접 입력' 영역의 textarea 요소를 다루지 않은 관계로 먼저, textarea 요소에 대해 다뤄보도록 하겠습니다.

textarea 요소

textarea 요소는 input 요소의 "text" 타입과 비슷한 형태입니다. 하지만 "text" 타입의 input 요소는 한 줄만 입력이 가능하기 때문에, 긴 내용을 입력하기 위해서는 이 textarea 요소를 사용해야 합니다.

cols 속성과 rows 속성

textarea 요소는 높이와 너비를 가진 글 박스 이기 때문에, 이에 해당하는 속성을 필수로 선언해 주어야 합니다. 이 속성 정보는 'width, height'가 아닌 입력되는 글자를 기준으로 정해지기 때문에, cols, rows의 속성을 사용합니다.

여기서 cols는 이 요소의 너비를 나타내는 속성으로, 한 줄에 몇 글자까지 들어가게 할 지를 정합니다. 예를 들어 cols="40" 이라고 한다면 너비는 "40 글자"가 됩니다.

rows는 textarea의 높이를 나타내는 속성으로, 이 요소의 높이가 몇 줄로 나타날지를 정해줍니다. 예를 들어 rows="5"는 "다섯 줄"의 높이를 가지게 됩니다.

기본적으로 textarea를 사용하면 다음과 같은 방식으로 작성합니다.

물론 너비와 높이는 CSS로 수정할 수 있습니다. 그럼에도 저 두 속성은 필수 속성이기 때문에 명시해주는 것이 좋습니다. 또한 태그와 태그 사이에 내용을 넣으면 textarea의 기본 내용 값으로 들어갑니다. 참고로 안에 들어가는 내용은 pre 요소처럼 줄 바꿈이나 여러 번의 공백 등 모두 인식하며, 안에 태그가 들어 갈 수 없고 태그를 넣을 경우 해당 소스가 그대로 노출이 됩니다.

위의 소스가 보여지는 모습.


폼의 기본 내용 값이 들어갑니다.
  줄 바꿈 및
    공란도 그대로 인식하고,
      <strong>이런 태그도</strong> 소스가 그대로 노출됩니다.

textarea에 들어가는 속성들은 방금 살펴본 colsrows 말고도 더 있지만, 다른 폼 요소와도 중복되는 속성들이 있어 이 속성들은 잠시 뒤에 같이 다루도록 하겠습니다.

input 요소

input 요소는 폼 입력을 하는 주요한 요소로써, type 속성에 따라 여러 형태를 보여줍니다. 이 타입 별 형태를 하나씩 살펴 보도록 하죠.

input 요소의 타입

type="text" (텍스트 타입 인풋)

이 형태는 가장 기본적인 input의 형태로, 텍스트를 입력 받는 형태입니다. 여기에 들어간 value 속성의 값은 해당 input의 기본 값으로 들어가게 됩니다.

사용자가 이 input의 내용을 입력하고 전송을 하게 되면 이 inputvalue의 값이 입력된 값으로 저장되어 전송이 됩니다.

type="password" (암호 타입 인풋)

앞의 텍스트 타입과 비슷한 형태지만, 노출되면 안 되는 텍스트를 입력 받는 타입 입니다. 주로 로그인할 때 암호 같은 입력에 해당 되겠죠. 이 역시 value의 값은 사용자가 입력한 텍스트로 입력됩니다.

type="radio" (라디오 버튼 형태 인풋)

이 타입은 라디오 버튼 형태의 인풋으로 열거된 값 중에서 하나를 선택할 때에 사용됩니다. 다음은 label요소와 함께 사용한 예시 입니다.

보통 "약관에 동의 하시겠습니까?" 라는 질문에 "예" 또는 "아니오"를 선택합니다. 둘 다 선택하거나, 둘 다 선택하지 않을 수 없이 꼭 한가지를 선택해야 합니다. 이렇게 여러 가지 항목 중에서 한 가지만을 선택해야 할 때, 이 라디오 타입을 사용하게 됩니다.

참고로, 이 라디오 타입은 같은 name 속성 값을 가진 요소를 기준으로 선택합니다. 위의 예시에서 "예"를 클릭했을 때 "아니오"가 해제 되는 것은, 둘이 같은 name 속성 값인 "agreement"를 사용하고 있기 때문입니다. (지난 시간에 배웠듯이 "예" 또는 "아니오" 텍스트를 클릭했을 때 라디오 버튼이 체크가 되는 것은, label 요소를 사용했기 때문입니다.)

또한 앞의 텍스트 타입과는 달리 value 값이 따로 보이지 않으며, 폼 전송 시 체크된 inputvalue 값을 전달합니다. 예를 들어 위의 예시에서 "아니오"를 체크하고 전송한다면, "agreement=0"으로 전달을 하게 되겠죠.

type="checkbox" (체크박스 형태 인풋)

이 타입은 체크박스 형태의 인풋으로, radio 타입의 형태는 반드시 하나를 선택해야 하는 반면, 이 체크박스 타입은 하나를 선택할 수도 안 할 수도 있습니다. 체크를 하지 않을 경우, 해당 name의 변수가 아예 전달되지 않습니다.

type="button" (버튼 형태 인풋)

이 타입은 버튼 형태를 나타냅니다. type="submit"과 비슷한 형태로 보여지지만, submit 처럼 폼을 전송하지는 않습니다. 이 형태는 주로 자바스크립트로 동작을 구현하는 용도로 많이 사용됩니다.

참고로 좀 있다 다룰 button 요소로 대체될 수 있으며, 이 속성의 value값이 버튼의 이름으로 보여집니다.

type="file" (파일 업로드 인풋)

이 타입은 파일을 업로드 할 수 있도록 하는 형태입니다. 이 폼을 클릭하면 업로드 할 파일을 선택할 수 있고, 폼 전송 시 업로드 됩니다.

type="submit" (폼 전송 인풋)

지난 강의에서 살펴 봤듯이 이 submit 타입은 현재 이 요소가 속해져 있는 form을 제출하는 역할을 합니다.

이 타입도 button 타입처럼 value 속성이 버튼의 이름이 되고, button 태그로 대체될 수 있습니다.

type="reset" (리셋 인풋)

button 타입이나, submit 타입과 비슷한 버튼 형태를 가진 타입 입니다. 이 타입의 역할은 form 안에서 폼의 값들을 초기화하여 기본 값으로 바꿔놓습니다.

버튼 형태를 가진 요소이기 때문에, 이 역시 button 요소로 대체할 수 있습니다.

type="image" (이미지 형태 폼 전송 인풋)

submit 타입 인풋이 버튼 형태인 반면 이 image 타입 인풋은 이미지 형태로 보여줍니다. 다시 말해 이미지 버튼이라 할 수 있는데, 주의해야 할 부분은 이 타입은 submit 타입과 같이 폼 전송이 일어난다는 점입니다. 단지 이미지 버튼을 위해서 이 타입을 사용해서는 안됩니다. 폼 전송 없이 단지 버튼으로 기능하려고 이 타입을 사용하기 위해서는 별도로 스크립트 처리가 필요하며, 그러한 방법 보다는 기존 button을 CSS로 처리하는 것이 좋습니다.

여기서 보면 다른 타입들과는 달리, 이미지가 들어가기 때문에 src 속성으로 이미지 URL 주소를 적고, alt 속성으로 해당 대체 텍스트를 넣는 것을 확인할 수 있습니다.

type="hidden" (숨김 형태 인풋)

이 형태의 타입은 아무것도 보이지 않는 형태 입니다. CSS에서 display: none; 상태와 비슷하다고 생각하시면 됩니다. 이 요소는 절대 보이지 않기 때문에, CSS로 display: block; 같은 스타일은 준다 하더라도 보여지지 않습니다.

이렇게 보이지 않는 인풋은 폼에 정보를 전송할 때, 사용자가 입력한 정보 외에 정보들을 보이지 않게 같이 전송할 수 있습니다.

input 요소의 속성들

이제 input 요소의 타입 속성 외에 사용되는 주요 속성들을 살펴 보겠습니다. 이 속성들은 전체 공통적인 속성도 있는가 하면, 타입 특성을 타는 속성도 있습니다.

그리고 대부분의 속성들이 불린 속성으로 그냥 속성 명을 선언하는 것 만으로도 적용 됩니다. 하지만, 엄격한 xhtml 표기 방식이라면 동일한 속성 값을 주어야 합니다. (HTML과 XHTML의 차이가 기억 안 나신다면, 독타입에 대한 강의를 참고하시기 바랍니다.)

disabled 속성

이 속성은 모든 타입 공통 속성으로, input 요소 뿐 아니라 모든 폼 요소들이 사용가능 한 속성입니다. 이 속성을 사용하면 해당 폼 요소를 비활성화 시켜버립니다.


readonly 속성

이 속성은 주로 텍스트 정보를 담는 type="text"textarea 요소에 사용되는 속성입니다. 이 속성을 사용하면 폼 요소 안의 텍스트를 수정할 수 없고 오직 읽을 수만 있습니다.


size 속성

이 속성은 type="text" 인풋 요소에만 해당하는 속성으로 해당 요소의 너비를 지정합니다. textareacols 속성처럼, 글자수를 기준으로 너비를 지정합니다. 물론 이 속성은 CSS로 처리 가능합니다.

네 글자 너비의 폼 :

maxlength 속성

이 속성 역시, size속성과 마찬가지로, type="text" 에서만 사용되는 속성 입니다. 이 속성은 글자 수 제한으로 속성 값으로 지정된 숫자 이상은 넣을 수 없도록 만들어 줍니다.

네 글자 이상 입력 불가 :

checked 속성

이 속성은 type="checkbox"type="radio" 에서만 쓸 수 있는 속성으로, 기본 값으로 선택되도록 보여줍니다.


마크 업 검증기에 input 요소 활용

많은 input요소의 타입과 속성을 살펴 보았습니다. 왠지 좀 지루했을 수도 있을 것 같네요. 우리가 지난 시간에 만들어 보았던 마크 업 검증기는 사실 너무 단순합니다. 이번에 살펴본 input 요소들을 추가하여 좀 더 업그레이드 해보도록 하죠.

일단 마크 업 검증 사이트 W3C validator를 다시 방문해 보도록 합시다. 그리고 들어 가셨다면, 입력 필드 하단에 "More Options"를 열어 봅니다.

W3C Validator 사이트 화면 일부
하단 "More Options" 영역

이번 시간에 살펴본 폼 요소들이 눈에 들어옵니다. 셀렉트 형태의 폼도 보입니다만, 이는 나중에 더 살펴 보고요, 일단 저 중 몇 가지만 추가해 보도록 하죠. 검증 사이트에서 "개발자 도구"를 열어 소스를 좀 확인해 봅시다.

W3C Validator 사이트를 개발자 도구에서 본 모습
개발자 도구로 본 input 요소

일단 유일한 radio 타입인 "List Message Sequentially" 와 "Group Error Message by Type"을 살펴 보도록 하죠. 이것은 각각 "메시지 목록을 순차적으로" 와 "메시지를 타입에 따라 그룹화해서"로 볼 수 있는데요, 개발자 도구로 이 radio 인풋이 어떤 name 값과 value 값을 가지고 있는지 보시기 바랍니다.

확인해 보면, 둘 다 name="group"을 쓰고 있고, value는 각각 "0" 과 "1"을 쓰고 있습니다. 그리고 "List Message Sequentially"에 checked 속성을 이용해서 기본 값을 설정해 주었고요. 이제 우리의 마크 업 검증기에 추가해 보도록 합시다. 해당 form 요소 안에 들어가야 한다는 점 잊지 마세요.

같은 방식으로 "Show Source" 와 "Clean up Markup with HTML-Tidy"를 추가해 보죠. "Show Sorce"는 원본 소스를 보여주는 옵션이고, "Clean up Markup with HTML-Tidy"는 "HTML-Tidy"라는 프로그램을 이용해서 "HTML" 소스의 들여쓰기를 없애주는 것 입니다. 들여쓰기를 없애서 보다 HTML 파일의 용량을 약간은 줄일 수 있겠죠?

이런 식으로 원하는 옵션을 넣어 주실 수 있습니다. "소스 직접 입력" 영역도 이와 같이 넣어 보시기 바랍니다. 다음은 몇 가지 옵션을 넣은 예시 입니다. 줄 바꿈을 위해 div를 좀 더 추가했습니다. 또한 이번 시간에 배운 type="reset"을 추가하여, 폼을 초기화하는 버튼도 넣었습니다.

마크 업 검증기 추가 버전
/attach/demo/html-3/form-advance.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기

정리

원래는 폼 강의를 두 번에 걸쳐 하려고 했으나, 생각보다 분량이 많은 관계로 한 시간을 더 가지도록 하겠습니다. 그 만큼 input 요소는 다양한 형태를 가지고 있으며, 나중에 HTML5 에서부터는 더 많은 타입을 지원합니다. 그럼 일단 잠시 쉬었다가, 다음 시간에 뵙겠습니다.

요점 정리
  • textarea 요소는 긴 내용의 텍스트 입력을 위한 입력 폼. cols와 rows은 필수 속성으로 기본 입력 영역을 지정
  • input 요소는 type 속성으로 다양한 형태의 입력 폼을 구현
    • input[type="text"]는 텍스트 타입
    • input[type="password"]는 암호 타입
    • input[type="radio"]는 라디오 버튼 타입. 열거된 값 중 하나를 필히 선택
    • input[type="checkbox"]는 체크박스 타입. 선택하거나 안 할 수 있음.
    • input[type="button"]은 기본 버튼 타입. 주로 자바스크립트 동작을 구현
    • input[type="file"]은 파일 업로드 타입.
    • input[type="submit"]은 폼에 입력된 값을 서버에 전송.
    • input[type="reset"]은 폼에 입력된 값을 모두 초기화
    • input[type="image"] "submit" 타입과 동일한 역할을 하나, 이미지 형태의 버튼. 이미지이기 때문에 src, alt 속성 필요.
    • input[type="hidden"]은 숨김 형태 인풋, 보이지 않게 값을 전송
  • input 요소의 type 외 속성
    • disabled 속성은 모든 폼 요소들이 쓸 수 있는 속성. 해당 폼 요소를 비활성화
    • readonly 속성 - input[type="text"]와 textarea 요소에 쓰이는 속성. 내용을 수정하지 못 함
    • size 속성 - input[type="text"]에만 쓰이는 속성. 글자수로 너비 지정
    • maxlength 속성 - input[type="text"]에만 쓰임. 최대 글자 수 제한
    • checked 속성 - input[type="checkbox"], input[type="radio"]에서 사용. 기본 값으로 선택 됨.

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