html3

입력 받기

<input> 태그는 웹 페이지 이용자로부터 입력을 받기 위해 사용하는 태그 중 가장 대표적인 태그입니다. <input> 태그는 텍스트를 입력할 수 있는 '입력 필드'를 나타내는 단일 태그입니다.

<body>
  <h1>입력 필드를 만든다</h1>
  <input>
  <input>
</body>

<input> 태그의 핵심 속성 type

<input> 태그의 기본 형태는 텍스트를 입력할 수 있는 대화형 필드이지만, <input> 태그의 type 속성을 활용하면 보다 다양한 형태의 입력 요소를 만들 수 있습니다. type 속성에 지정할 수 있는 속성값만 해도 무려 20여 가지가 넘지만, 여기에서는 대표적인 유형 몇 가지만 소개하도록 하겠습니다.

<input> 태그의 모든 유형을 살펴보고 싶은 독자라면, 모질라 개발자 네트워크에서 제공되는 표를 확인해보실 것을 추천합니다. 다음 링크로 이동하면 확인하실 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95

텍스트를 입력받는 text 유형

text 유형은 한 줄 짜리 일반 텍스트를 입력할 수 있는 유형입니다. <input> 요소의 기본 유형으로, 따로 type 속성을 지정하지 않은 경우에도 사용할 수 있는 유형입니다.

<body>
  <h1>type="text"</h1>
  <input type="text" placeholder="텍스트를 입력하세요" maxlength="15" size="20">
</body>

위 예제에서는 <input> 태그에 placeholder라는 속성을 사용했는데, placeholder에 작성된 내용은 입력 요소에 아무 값도 입력되지 않았을 때 표시되는 '안내문' 역할을 하게 됩니다. maxlength 속성은 입력할 수 있는 최대 문자 개수를 지정하는 속성이고, size 속성은 입력 필드의 길이를 지정하는 속성입니다. size의 길이는 문자 수를 기준으로 합니다.

placeholder, maxlength, size 속성은 텍스트를 입력받는 다른 유형에서도 공통적으로 사용할 수 있는 속성입니다.

비밀번호를 입력받는 password 유형

password 유형 또한 텍스트를 입력받습니다. 그러나 text 유형과 달리 password 유형은 웹 이용자가 입력한 내용이 화면에 표시되지 않습니다.

<body>
  <h1>type="text" & type="password"</h1>
  <input type="text" placeholder="아이디를 입력하세요">
  <br>
  <input type="password" placeholder="비밀번호를 입력하세요">
</body>

text와 password는 둘 다 텍스트를 입력받기 때문에 형태가 같습니다. 그러나 값을 입력해보면 차이가 있음을 확인할 수 있습니다.

숫자를 입력받는 number 유형

number 유형은 숫자를 입력받을 때 사용합니다. 이를 이용하면 웹 이용자는 입력 필드에 직접 숫자를 타이핑하거나 증감 버튼을 클릭해 숫자를 선택할 수도 있습니다.

<body>
  <h1>type="number"</h1>
  사과 <input type="number" min="0" max="10" step="1">개 주세요!
</body>

number 유형의 <input> 태그에 함께 사용된 min과 max는 수치의 최소값과 최대값을 각각 지정할 수 있는 속성입니다. 또한 step은 증감 버튼을 클릭할 때 수치가 변경되는 간격을 지정하는 속성입니다. 이 세 가지 속성들은 수치를 입력받는 다른 유형에서도 사용할 수 있는 속성입니다.

수치를 입력받는 다른 유형으로는 data, time, range 등이 있습니다.

색상을 입력받는 color 유형

color는 웹 이용자에게 색상표를 제공해 색상을 선택할 수 있게 해줍니다.

<body>
  <h1>type="color"</h1>
  <input type="color">
</body>

color 유형의 입력 요소는 텍스트를 입력받지 않고, 클릭을 통해 색상을 선택하는 방식입니다. 렌더링된 요소를 클릭하면 색상표가 나타나고, 그 안에서 원하는 색상을 선택할 수 있습니다. 색상을 선택하고 나면 입력 요소에 표시되는 색상도 변경됩니다.

클릭을 입력받는 button 유형

클릭할 수 있는 버튼을 만드는 유형입니다. 만들어진 버튼에는 '클릭할 수 있다'는 특징 외에 특별한 기능이 존재하지 않습니다. 버튼에 스타일이나 기능을 추가하기 위해서는 CSS나 자바스크립트 같은 언어를 사용해야 합니다.

<body>
  <h1>type="button"</h1>
  <input type="button" value="PUSH">
</body>

button 유형의 <input> 태그에 표시할 텍스트는 value 속성을 통해 지정합니다.

선택지를 제공하는 radio와 checkbox 유형

웹을 이용하다 보면 종종 웹 상에서 객관식 문제를 풀거나, 설문 조사에 응하는 경험을 하게 되는 경우가 있습니다. 여러 항목 중 원하는 항목을 선택할 수 있는 요소를 구성할 때는 <input> 태그의 radio와 checkbox 유형을 사용할 수 있습니다. 이때 radio 유형은 여러 항목 중 하나의 항목만을 선택해야 할 때 주로 사용되고, checkbox 유형은 여러 항목 중 몇 가지 동시에 선택할 때 주로 사용됩니다.

<body>
  <p>좋아하는 과목을 하나만 고르세요</p>
  <input type="radio" name="subject">국어 
  <input type="radio" name="subject">영어 
  <input type="radio" name="subject">수학 

  <p>좋아하는 음식을 모두 고르세요</p>
  <input type="checkbox" name="food">제육볶음 
  <input type="checkbox" name="food">돈까스 
  <input type="checkbox" name="food">떡볶이 
</body>

radio 유형에서는 한 문제 당 하나의 항목만을 선택할 수 있습니다. 따라서 어느 한 항목이 선택될 때마다 기존 선택되어 있는 항목은 선택이 해제되는 것을 확인할 수 있습니다. 반면 checkbox 유형은 여러 항목을 함께 선택할 수 있습니다.
예제에서는 각 유형에 name이라는 속성이 사용된 것을 확인할 수 있습니다. name은 <input> 요소에 지정할 수 있는 식별자 속성으로, radio나 checkbox는 name 속성이 같은 것끼리 하나로 묶이게 됩니다. name이 서로 다른 항목끼리는 아무런 관계가 없는 것이므로, 문제를 만들 때는 이 부분을 주의해가며 만들어야 합니다.

name 속성은 모든 입력 요소에서 식별자 역할을 할 수 있는 속성입니다. 이와 관련해서는 이어지는 다른 절에서 좀 더 자세히 이야기하도록 하겠습니다.

<label>과 함께 사용하기

<label> 태그는 입력 요소에 라벨을 붙이는 역할을 합니다. 이를 이용하면 웹 이용자에게는 좀 더 직관적인 입력 요소를 제공할 수 있고, 코드의 가독성 및 명확성이 향상되어 코드 작성자에게도 도움이 됩니다.
<label> 태그는 두 가지 형태로 사용할 수 있습니다. 하나는 <label> 태그의 안에 입력 요소를 포함시키는 방식이고, 또 하나는 입력 요소의 id를 기반으로 <label> 태그와 입력 요소를 짝 지어주는 방식입니다. 다음 예제는 두 가지 방법으로 각각 text 유형의 요소와 password 유형의 요소에 라벨을 추가한 예입니다.

<body>
  <h1>로그인 해주세요</h1>
  <label>
    아이디
    <input type="text">
  </label>
  <br>
  <label for="pw">비밀번호</label>
  <input id="pw" type="password">
</body>

드롭다운 메뉴를 만드는 <select>

<select> 태그는 웹 이용자가 여러 가지 항목 중 원하는 항목을 선택할 수 있도록 '드롭다운 메뉴'를 제공하는 태그입니다. 드롭다운 메뉴란 요소를 클릭했을 때 선택 가능한 항목들이 아래로 펼쳐지는 메뉴를 말합니다. <select> 태그는 드롭다운 메뉴의 개별 항목을 나타내는 <option> 태그와 함께 사용합니다.

<body>
  <select>
    <option>커피</option>
    <option>콜라</option>
    <option>쥬스</option>
    <option>생수</option>
  </select>
</body>

처음 메뉴가 만들어졌을 때는 첫 번째 option이 선택된 상태입니다.

메뉴를 클릭하면 항목이 펼쳐집니다

<select>와 <option>에 속성 추가하기

여느 다른 태그들처럼, <select>와 <option>에도 속성을 추가하여 형태 및 기능을 다양하게 변경할 수 있습니다. <select> 태그에 추가할 수 있는 대표적인 속성은 다음과 같습니다.

size : 화면에 표시될 메뉴 항목의 개수를 지정하고, 드롭다운 메뉴의 형태를 변경합니다.
multiple : 여러 개의 항목을 함께 선택할 수 있도록 합니다.

다음 예제는 항목 세 개가 화면에 표시되는 메뉴를 만들고, 여러 개의 항목을 함께 선택할 수 있도록 한 예입니다. 이때 여러 항목을 선택하기 위해서는 키보드의 Ctrl 버튼을 누른 상태에서 항목들을 연달아 선택하면 됩니다.

<body>
  <select size="3" multiple>
    <option>커피</option>
    <option>콜라</option>
    <option>쥬스</option>
    <option>생수</option>
    <option>녹차</option>
    <option>맥주</option>
  </select>
</body>

multiple 속성은 속성명을 쓰면 적용되고 쓰지 않으면 적용되지 않는 속성입니다. 이러한 속성을 '불(bool) 속성'이라 부르기도 합니다.

여러 줄의 텍스트를 입력받는 <textarea>

앞서 06-1절에서 이미 <input> 태그를 이용해 텍스트를 입력받는 요소를 만든 적이 있었습니다. 그러나 한 가지 아쉬운 점은 <input> 요소는 텍스트를 입력받을 때 한 줄 짜리 텍스트만 입력받을 수 있다는 점입니다. 반면에 <textarea> 태그를 이용해 만든 '텍스트 영역'은 여러 줄의 텍스트를 입력받을 수 있어 편지를 쓰거나 건의 사항을 제출하는 페이지를 만들 때 활용하기 좋습니다.
<textarea> 태그는 다음과 같은 속성들과 함께 사용할 수 있습니다.

cols : 텍스트 영역의 가로 너비를 지정합니다. 이때 수치는 문자의 개수를 기준으로 합니다.
rows : 텍스트 영역의 세로 너비를 지정합니다. 기준은 cols와 동일하게 문자의 개수입니다.

<body>
  <textarea cols="10" rows="6"></textarea>
</body>

텍스트가 세로로 더 길어질 경우 텍스트 영역 내에 세로 스크롤이 생깁니다.

<textarea> 태그는 <input> 태그와 달리 여는 태그와 닫는 태그가 함께 사용되는데, 코드 작성 시 여는 태그와 닫는 태그 사이에 텍스트를 입력하면 웹 페이지에 렌더링될 때 이미 텍스트가 입력되어 있는 상태로 렌더링됩니다.

진척도를 표시하는 <progress>

<progress> 태그는 작업이 얼마 정도 진행되었는지를 나타낼 때 사용하는 태그입니다. 다음 속성들을 이용해 간단하게 진척도를 나타낼 수 있습니다.

max : 작업 완료를 위해 필요한 작업량을 지정합니다. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
value : 화면에 표시할 진척도를 지정합니다. max의 값보다 작거나 같아야 합니다.

<body>
  <p>작업 진행 중... 60%...</p>
  <progress value="60" max="100"></progress>
</body>

버튼을 만드는 또 다른 방법 <button>

앞서 06-1절에서는 <input> 태그의 type을 변경해 버튼을 만들었었는데, <input>이 아닌 <button> 태그를 이용해도 같은 모습의 버튼을 만들 수 있습니다.
<input type="button">과 <button>을 통해 만든 요소는 형태나 기능 면에서 차이가 없습니다. 다만 <button> 태그의 경우에는 코드 작성 시 여는 태그와 닫는 태그 사이에 콘텐츠를 입력해 버튼에 표시될 콘텐츠를 지정할 수 있다는 특징이 있습니다.

<body>
  <!-- value 속성에 콘텐츠를 써 줍니다. -->
  <input type="button" value="PUSH">

  <!-- 태그 사이에 콘텐츠를 써 줍니다. -->
  <button>PUSH</button>
</body>

<body>
  <form method="post" action="fake_server.php">
    <label for="id">아이디</label>
    <input type="text" id="id">
    <br>
    <label for="pw">비밀번호</label>
    <input type="password" id="pw">
    <br>
    <input type="button" value="로그인">
  </form>
</body>

위와 같은 형태의 폼 요소에 웹 이용자가 올바른 아이디와 비밀번호를 입력한 후 로그인 버튼을 누르면, 해당 값들은 서버로 전송되어 서버가 웹 이용자의 로그인을 처리해줄 수 있게 됩니다. 로그인이 성공적으로 완료되면, 서버는 웹 이용자에게 로그인 이후의 페이지를 전달하는 작업을 진행할 수 있습니다.

우리는 서버가 없는 상태에서 단순히 폼 요소의 사용법만을 학습하고 있으므로, 위 예제의 action에는 실재하지 않는 서버를 기입해두었습니다. 따라서 실제 로그인 처리는 진행되지 않습니다.

이름을 지어주세요

코드 작성자는 폼 요소 안에 필요한 만큼의 입력 요소를 포함해 다양한 형태의 양식을 만들 수 있습니다. 그리고 이때 폼 요소 안에 포함되는 각 입력 요소에는 name 속성을 추가하여 각 입력 항목의 역할을 구별해줄 수 있습니다. 다음은 각 입력 값의 역할에 맞게 name 속성을 일일이 추가한 폼 요소의 예입니다.

<body>
  <form method="post" action="fake_server.php">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">나이</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="character">성격</label>
    <textarea id="character" name="character"></textarea>
    <br>
    <input type="button" value="전송">
  </form>
</body>

id나 class가 이미 요소를 식별하는 역할을 하는데, 왜 굳이 name 속성을 추가하는지가 의문스러운 분들도 계실 겁니다. 그러나 폼 요소에서 name의 역할은 무척 중요합니다. 각 입력 요소에 지정된 name 속성은 폼 안에서 입력 요소를 구분하는 역할을 함과 동시에, 서버에 전송된 입력 값의 이름으로 사용되기도 하기 떄문입니다. 서버 프로그램에서 입력 값을 처리할 때는 id나 class가 아닌 name 속성에 지정된 이름을 통해 각 입력 값을 구분하는 방식이 가장 많이 사용됩니다.

submit 타입 사용하기

폼 요소에 값을 입력한 다음에는, 해당 값들을 서버로 보내는 작업을 해주어야 합니다. 이때 <input> 태그의 submit 유형을 사용하면 클릭 한 번만으로 해당 작업을 손쉽게 처리할 수 있습니다. submit 유형의 <input>은 기본적으로 button 타입의 <input>과 형태가 같지만, 클릭 시 서버로의 값 전송이 이루어진다는 기능이 추가됩니다. 다음 예제는 앞서 확인한 예제에서 버튼의 유형만 submit으로 변경한 예입니다.

<body>
  <form method="post" action="fake_server.php">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">나이</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="character">성격</label>
    <textarea id="character" name="character"></textarea>
    <br>
    <!-- 클릭하면 입력 값들이 서버로 전송됩니다 -->
    <input type="submit" value="전송">
  </form>
</body>

설화스터디 소프트웨어학과