Form 전송에 대한 이해 기초(+ 매우 중요한 label 태그)

Form 전송에 대한 이해 기초

 

html을 공부하다가 <form> 태그에 대해서 배우기 시작하면, 드디어 뭔가 프로그래밍 적인 단계에 들어서게 되는 느낌이 듭니다. 뭔가를 입력 받고 서버로 전송하고 할 수 있는 기능이 바로 <form> 태그의 역할이기 때문입니다.

 

form의 사전적의미는 '입력양식'들을 의미하는데요, 사용자에게 입력 받게 되는 입력란들과, 그것을 서버로 전송하는 버튼은 모두 <form> ~ </form> 사이에 위치하게 됩니다. 버튼도 form 태그 안에 포함되어 있어야합니다.(Javascript를 사용하지 않는다는 전제하)

 

 

 

로그인창 UI를 이용한 예제

 

가장 흔하게 접할 수 있는 form 예제는 바로 <로그인> 화면일 것입니다.

사용자가 ID와 PW를 입력하고 버튼을 눌러 입력한 값을 서버로 전송하면, 로그인을 시켜줄지 말지를 실행하게 되죠.

 

아래 예제를 살펴봅시다.

<div>
  <form action="">
    <input type="text" />
    <input type="password" />
    <button>로그인</button>
  </form>
</div>

HTML로 간단하게 만든 로그인창

 

실행하면, input 태그로 인해 입력란이 2개 생기고 끝에는 버튼도 생겼습니다.

한쪽으로 쭈욱~ 늘어서게 된 것은 input이나 button이나 모두 in-line 속성을 가지고 있기 때문에 그렇습니다.

Block 속성과 in-line 속성은 이전 포슽팅에서 다루었습니다.

 

 

보기 좋은 떡이 먹기 좋다고 했으니, ID / PW 입력란을 위 아래로 배치해봅니다.

블록 속성인 <p>태그를 이용해보겠습니다.(p = paragraph, 문단)

<div>
  <form action="">
    <p>
      <input type="text" />
    </p>
    <p>
      <input type="password" />
    </p>
    <button>로그인</button>
  </form>
</div>

블록요소 <p>로 감싸주었습니다.

 

구글, 네이버, 다음 등에서 많이 보아온 형태가 되었습니다.

 

 

 

매우 중요한 Label 태그의 사용

 

입력 양식은 <label> 태그를 반드시 써주는 게 매우 중요합니다. 접근성, 사용성 등 여러 가지 이유가 있는데요, 중급 레벨의 이야기가 되니까 일단, label은 무조건 사용해주는 게 좋다고 기억해두시기 바랍니다.

 

label 태그는 input 태그 등의 폼 요소와 쌍(pair)을 이룹니다. 그리고 태그 안에서 for 속성으로 input과 연결이 되는데요, 이때 input 태그의 id 속성과 일치해야 합니다.

 

영어시간의 '숙어' 외우기 공식 같지만, label for로 기억해두고, 코드를 다음과 같이 조금 수정해봅시다.

<div>
  <form action="">
    <p>
      <label for="id">ID를 입력해주세요</label>
      <input type="text" id="id" />
    </p>
    <p>
      <label for="pw">PW를 입력해주세요</label>
      <input type="password" id="pw" />
    </p>
    <button>로그인</button>
  </form>
</div>

input type = "password"는 입력내용을 숨겨줍니다.

 

브라우저에서 실행해보고, id와 pw를 대충 아무거나 입력해봅니다. 뭔가 그럴듯해졌죠?

 

위 사례에서 'ID를 입력해주세요' 부분을 마우스로 클릭해보면, inoput 박스 안으로 마우스 포커스(focus)가 자동으로 이동합니다. label 태그 덕분인데요, 이런 동작기능은 화면이 좁은 모바일 환경에서 훨씬더 효과적입니다.

 

그리고, ID 입력란은 글자가 보이는데, PW 입력란은 ******* 식으로 글자가 숨겨집니다.

이유는 input 태그의 type 속성 때문입니다. type="password" 속성은 글자를 숨겨줍니다.

 

TMI - input 태그는 이 type 속성에 의해 매우 다채롭게 변경되는 모습을 가지고 있습니다. (너~무 많아요!)

 

 

 

 

form action 속성

 

button을 클릭하면, 사용자가 입력한 내용을 서버로 전송해줍니다.

(button의 기본 속성은 submit 이기 때문인데요, button도 여러 가지 type을 가지고 있습니다.)

 

form 속성에 담긴 값들을 "어디로?" 전송할 것인가에 대한 목표지는 action에 담게 됩니다.

아래 예제에서는 로그인을 처리해주는 /login.html 페이지로 전송한다고 가정을 해보았습니다.

 

그리고 [로그인] 버튼을 클릭해보세요.

<div>
  <form action="/login.html">
    <p>
      <label for="id">ID를 입력해주세요</label>
      <input type="text" id="id" />
    </p>
    <p>
      <label for="pw">PW를 입력해주세요</label>
      <input type="password" id="pw" />
    </p>
    <button>로그인</button>
  </form>
</div>

form의 action 속성은 보내주는 정보를 받는 곳 주소입니다

 

로그인 버튼을 클릭하면, 브라우저 주소창에 login.html? 이라고 표시가 됩니다. 일단 action에 의해 목적지를 잘 찾은 것 같습니다.

 

참고로, ?(물음표)가 붙는 것은 서버와 통신하는 방법 중 하나인 GET 방식의 요청이기 때문인데요, 이전 포스팅에서 GET 요청에 대해서는 이미 살펴보았습니다.

 

Node.js + Express로 초간단 서버 만들기, 3분 컷

Node.js + Express로 초간단 서버 만들기, 3분 컷

 

 

 

name 속성 - 서버와 통신할 때

 

http://127.0.0.1:5501/login.html? 에서 살펴보면 물음표 뒤로 아무것도 없습니다. 물음표 뒤로 GET 요청 방식에 맞도록 뭔가 보내는 data를 부착해줘야 하는데요, 이 역할을 하는 것이 input 태그의 name 속성입니다.

 

input 태그에 name 속성을 추가해도록  합니다.

<div>
  <form action="/login.html">
    <p>
      <label for="id">ID를 입력해주세요</label>
      <input type="text" id="id" name="userId" />
    </p>
    <p>
      <label for="pw">PW를 입력해주세요</label>
      <input type="password" id="pw" name="userPW" />
    </p>
    <button>로그인</button>
  </form>
</div>

input 상자에 아이디와 패스워드를 입력해줍니다.

 

브라우저 새로고침하고, ID와 PW를 입력하고 [로그인] 버튼을 클릭해보면,

데이터를 action에서 지정한 경로로 잘 보내고 있습니다

이번에는 http://127.0.0.1:5501/login.html?userId=apple&userPW=1234 라고 표시가 되었습니다.

 

물음표 뒷 부분이 중요한데요,

?userId=apple&userPW=1234

 

에서 의미는 userId = apple userPW = 1234 라는 의미입니다.  중간에 &를 이용하여 각 값들을 붙여 놓은 모습이죠? 

여기서 userId와 userPW라는 단어는 input 태그에서의 name 속성값이었구요.

 

알고 보면 역시 쉽죠?

 

 

 

마치며

 

그런데, 사용자가 서버로 보내는 PW값이 저렇게 브라우저 주소창에 보여지면 안되는 거 아닌가요? 혹시 누가 본다면 나의 패스워드를 바로 알수 있게 되는 거잖아요?^^

 

서버가 없는 상황에서 form 전송 방식을 간단하게 이해하기 위해 GET요청 방식을 예로 들었기 때문입니다. 실무에서는 PW를 전송할 때는 주로 POST 요청 방식을 이용해서 서버로 보내게 됩니다.

 

오늘은 일단 form 전송에 대한 이해만 해두시고, GET/POST는 다음 기회에 다시 살펴보도록 하겠습니다.