HTML에서 입력 양식을 작성해보자

 

 안녕하세요. 진득코딩입니다.

 웹 페이지를 살펴보게 되면 로그인 창이나 검색창과 같이 뭔가를 입력할 수 있는 요소들이 있습니다.

 

 이렇게 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것을 입력 양식, 다른 말로 폼이라고 합니다.

 

 이번 시간에는 입력 양식을 작성하는 방법에 대해 알아보고 다양한 태그와 속성에 대해 살펴보도록 하겠습니다.

 

<form> 태그

 

• 폼(form)이란 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소를 의미합니다.
  
  
• <form> 태그는 폼을 만드는 가장 기본적인 태그로 <form>과 </form> 태그 사이에 여러 가지 폼 요소를 넣습니다.
  
  

 <form [속성="속성값"]>여러 폼 요소</form>

 

• <form> 태그는 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정합니다.
  
  

종류	설명
method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다.  - get : 데이터를 256 ~ 4,096byte까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다.  - post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다.
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다.
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다.

 

autocomplete 속성

 

• autocomplete 속성은 자동 완성 기능을 나타내는 속성입니다.
  
  
• 자동완성 기능은 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 기능입니다.
  
  
• autocomplete 속성의 기본 속성값은 "on"입니다.
  
  
• 즉, 자동 완성이 기본으로 켜져 있으므로 입력한 적 있는 값을 한두 글자 정도 입력하면 예전에 입력 내용을 자동으로 보여줍니다.
  
  

<fieldset>, <legend> 태그

 

• <fieldset> 태그는 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용합니다.
  
  
• <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있습니다.
  
  

<label> 태그

 

• <label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다.
  
  
• 레이블(label)이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말합니다.
  
  
• <label> 태그를 사용하는 첫 번째 방법은 태그 안에 폼 요소를 넣는 것입니다.
  
  
• 두 번째 방법은 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것입니다.
  
  
• 이렇게 연결하게 되면 <label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있습니다.
  
  

<input> 태그

 

• <input> 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용합니다.
  
  
• <input> 태그는 여러 type 속성이 있고 다음 과 같은 종류가 존재합니다.
  
  

종류	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣습니다.
password	비밀번호를 입력할 수 있는 필드를 넣습니다.
search	검색할 때 입력하는 필드를 넣습니다.
url	URL 주소를 입력할 수 있는 필드를 넣습니다.
email	이메일 주소를 입력할 수 있는 필드를 넣습니다.
tel	전화번호를 입력할 수 있는 필드를 넣습니다.
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다.
radio	주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
number	숫자를 조절할 수 있는 스핀 박스를 넣습니다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.
date	사용자 지역을 기준으로 날짜(연, 월, 일)를 넣습니다.
month	사용자 지역을 기준으로 날짜(연, 월)를 넣습니다.
week	사용자 지역을 기준으로 날짜(연, 주)를 넣습니다.
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣습니다.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
submit	전송 버튼을 넣습니다.
reset	리셋 버튼을 넣습니다.
image	submit 버튼 대신 사용할 이미지를 넣습니다.
button	일반 버튼을 넣습니다.
file	파일을 첨부할 수 있는 버튼을 넣습니다.
hidden	사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듭니다.

 

type="text", type="password"

 

• 텍스트 필드는 폼에서 가장 많이 사용하는 요소로, 일반 텍스트를 입력할 때 사용합니다.
  
  
• 비밀번호 필드는 텍스트 필드와 똑같이 동작하지만 입력하는 내용을 '*'나 '●'로 표시합니다.
• 텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성은 다음 표와 같습니다.
  
  

종류	설명
size	텍스트와 비밀번호 필드의 길이를 지정합니다. 즉, 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 예를 들어 최대로 입력할 수 있는 글자 수가 10개인데 size 속성값을 5로 지정하면 필드 크기는 5개 글자 크기에 맞추고 나머지 5개 글자는 화면에 보이지 않습니다.
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용입니다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됩니다. 비밀번호 필드에서 사용하지 않는 속성입니다.
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정합니다.

 

type="search", type="url", type="email", type="tel"

 

• type="search"를 사용하면 웹 브라우저에서 검색을 위한 텍스트 필드로 인식합니다.
  
  
• type="url"은 웹 주소를 입력하는 필드입니다.
  
  
• type="email"은 이메일 주소를 입력하는 필드입니다.
  
  
• type="tel"은 전화번호를 나타내는 필드입니다.
  
  
• 텍스트 필드에서 세분화된 필드는 PC용 웹 브라우저에서는 큰 변화가 없는 것처럼 보이지만, 모바일 기기의 웹 브라우저에서 확인하면 이메일 주소를 입력하거나 전화번호를 입력할 때 가상 키보드 배열이 바뀌는 것을 볼 수 있습니다.
  
  

type="checkbox", type="radio"

 

• 체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소입니다.
  
  
• 이때 항목을1개만 선택하려면 라디오 버튼을 사용하고, 2개 이상 선택하려면 체크 박스를 사용합니다.
  
  

종류	설명
value	선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다.
checked	체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용합니다. 속성값은 따로 없습니다.

 

type="number", type="range"

 

• type="number"를 사용하면 스핀박스가 나타나면서 숫자를 선택할 수 있습니다.
  
  
• type="range"는 슬라이드 막대를 움직여 숫자를 입력할 수 있습니다.
  
  
• 두 필드에서 사용할 수 있는 속성은 다음과 같습니다.
  
  

속성	설명
min	필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다.
max	필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다.
step	숫자 간격을 지정할 수 있습니다. 기본값은 1입니다.
value	필드에 표시할 초깃값입니다.

 

type="date", type="month", type="week"

 

• 위 유형은 웹 문서나 애플리케이션에 달력을 넣을 때 사용합니다.
  
  
• date로 지정하면 달력에서 날짜를 선택하면 연도, 월, 일이 표시됩니다.
  
  
• month 로 지정하면 달력에서 날짜를 선택하면 연도, 월이 표시됩니다.
  
  
• week 로 지정하면 달력에서 주를 선택할 수 있고, 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시됩니다.
  
  

type="time", type="datetime", type="datetime-local

 

• 위 유형들은 시간 입력을 나타냅니다.
  
  
• 시간을 지정할 때는 type="time"을 사용하고 날짜와 시간을 함께 지정하려면 type="datetime"이나 type="datetime-local"을 사용합니다.
  
  

type="submit", type="reset"

 

• submit은 폼에 입력한 정보를 서버로 전송합니다.
  
  
• submit 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨집니다.
  
  
• reset 버튼은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다.
  
  

그 외 여러가지 type

 

•  type="image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다.
•  type="button"은 기능이 없고 오직 버튼 형태만 삽입합니다.
•  type="flie"로 지정하면 폼에 파일을 첨부할 수 있습니다.
•  히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전홍되는 요소입니다.

input 태그의 주요 속성

 

•  autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있습니다.
  
  
• placeholder 속성을 사용하면 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있습니다.
  
  
• readonly 속성을 사용하면 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있습니다.
  
  
• required 속성을 사용하면 반드시 내용을 입력해야 하는 필수 필드로 만들 수 있습니다.
  
  

폼에서 사용하는 여러 가지 태그

 

1. <textarea>태그
   - 폼에서 텍스트를 여러 줄 입력하는 영역을 만들어주는 태그입니다.
   - 너비 크기를 지정하는 cols속성과 화면에 텍스트를 몇 줄로 표시할지 지정하는 rows 속성을 사용합니다.
   
   
2. <select>, <option> 태그
   - 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용합니다.
   - <select> 태그로 드롭다운 목로의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가합니다.
   - <option> 태그에는 vlaue 속성을 이용해 서버로 넘겨주는 값을 지정합니다.
   
   
3. <select> 태그의 속성
   - <select> 태그는 기본적으로 옵션이 하나만 표시되는데, 옆에 있는 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 항목을 선택할 수 있습니다.

종류	설명
size	화면에 표시할 드롭다운 항목의 개수를 지정합니다.
multiple	드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용합니다.

 

  4. <option> 태그의 속성
      - <option> 태그로 드롭다운 목록에 표시되는 옵션을 지정할 수 있습니다.

종류	설명
value	해당 항목을 선택할 때 서버로 넘겨줄 값을 지정합니다.
selected	드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정합니다.

 

  5. <datalist>, <option> 태그
      - 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있습니다.

      - <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션           을 표시합니다.

 

  6. <button> 태그

      - <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있습니다.

      - <button> 태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정합니다.

      - submit, reset, button 중에서 선택할 수 있고 submit이 기본값입니다.

 

종류	설명
submit	폼을 서버로 전송합니다. <input type="submit">과 같은 기능을 합니다.
reset	폼에 입력한 내용을 초기화합니다. <input type="reset">과 같은 기능을 합니다.
button	버튼 형태만 만들 뿐 자체 기능은 없습니다. <input type="button">과 같은 기능을 합니다.

 

---

 

 이번 시간에는 input태그나 form태그와 같이 입력 양식을 작성하는 방법에 대해 살펴보았습니다.

 

 백엔드 개발을 해보지 않았다면 form태그의 용도나 개념이 모호할 수 있으나 일단 포스팅한 내용에 대해서 살펴보고 넘어가는 정도로 지나가시고 필요할 때 다시 찾아보는 것이 좋다고 생각합니다.

 

 이번 시간은 여기까지입니다.

 

 궁금하신 내용이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊