form은 어떻게 작성해야 할까?

form을 분석 해봅시다!

HTML에서 form은 가장 중요한 태그로 구분되어도 이상하지 않습니다. 왜냐하면 웹에서 일어나는 사용자의 정보를 주고 받는데 사용되는 주된 역할로 사용이 되기 때문입니다.

<form> 태그를 얼마만큼 능숙하게 다룰 수 있는지가 우리가 만든 웹사이트가 사용자가 편하고 안전하게 사용할 수 있는지 없는지를 결정 짓기도 합니다.

현재는 대부분의 메이저 웹사이트나 애플리케이션에서는 로그인에 있어 지문을 등록하여 로그인을 하거나 구글이나 네이버와 같은 대기업에 가입되어 있는 이메일을 통해 자동으로 로그인을 하는 방식과 PIN 번호를 이용하여 로그인하는 방식이 매우 널리 유용하게 사용되고 있습니다.

이러한 방식 중 우선 웹에서 흔히 볼 수 있는 email 혹은 id와 password를 이용하여 로그인하기 위한 <form> 태그에 대해서 다루어 보겠습니다.

의미있는 HTML 요소 사용

여기서 의미있는이 뜻하는 것이 무엇일까요? 사용자는 모르더라도 기능 상에서 현재 태그에 대한 힌트들을 제공하는 것을 의미있다고 이야기 합니다. 예를 들어 생각 해 보겠습니다.

<div>
  <h1>Login</h1>
  <label htmlFor="email"> id </label>
  <input id="email" name="email" type="email" required />
  <button>login</button>
</div>

<form>
  <h1>Login</h1>
  <label htmlFor="email"> id </label>
  <input id="email" name="email" type="email" required />
  <button>login</button>
</form>

위의 두 경우를 살펴보았을 경우 어떤 것이 더 의미가 있는 것일까요? 두 가지 모두 웹에서 렌더되는 스타일은 동일한 스타일로 사용자에게 표기 될 것입니다. 하지만 실제로 로그인 기능을 작동시키기 위해서는 필요한 기능들은 전혀 다른 양상을 보여줍니다.

위의 <div> 를 이용하여 로그인하기 위해서는 어떻게 해야할까요?

웹에서 div 태그가 로그인을 위해서 사용될 것이라는 것을 명시적으로 표기해주어야 합니다.
사용자가 엔터키를 눌렀을 경우 로그인이 진행될 수 있게끔 이벤트 리스너를 이용하여 keydown 이벤트를 추가해주어야 합니다.
키다운 이벤트가 일어 났을 경우 button을 통해 데이터를 전송할 수 있게끔 기능을 연결해주어야 합니다.
input 값을 입력하지 않았을 경우 입력하지 않은 <input> 으로 포커스가 바로 이동할 수 있게끔 기능을 추가해주어야 합니다.
login 버튼을 통해서 로그인 이벤트가 발생하였을 경우 데이터가 전송될 수 있게끔 <div> 태그에 post 요청이 일어날 수 있게끔 기능을 수정해주어야 합니다.
post 요청 시의 어떤 작업을 할 것인지에 대한 코드를 작성해야 합니다.

반대로 <form> 을 이용하여 로그인하기 위해서는 어떻게 해야할까요?

<form> 태그내에 action 속성에 post가 일어났을 경우 어떤 작업을 이루어질 것인지에 대한 기능을 추가해주어야 합니다.

위에서 살펴본 바와 같이 <form> 태그가 압도적으로 적은 추가 기능이 필요합니다. 물론 div를 이용하여 로그인 폼을 만들 경우의 장점 또한 존재합니다. 모든 것을 자유롭게 수정하고 디자인하고 기능을 추가할 수 있다는 장점이 있습니다. 하지만 대부분의 경우는 <form> 태그를 이용하여 작업하는 것이 더 수월합니다.

form을 이용하였을 경우에 장점으 또 한 가지 있습니다. 태그내의 submit 역할을 하는 button 을 추가 작업 없이 추적할 수 있다는 장점이 있습니다.

사용자가 양식에 데이터를 입력하도록 지원

데이터 입력시 사용자에게 어떠한 데이터인지 표시하기 용이한 tag는 <label>, <legend> 태그가 있습니다.

<legend>
  <label htmlFor="email"> id </label>
  <input id="email" name="email" type="email" required />
</legend>

사용자가 데이터를 불필요하게 재입력 하는 것을 방지하도록 지원해야 한다.

사용자가 불필요하게 데이터를 재입력 하는 경우에 대한 예시는 다음과 같습니다.

아이디를 입력하세요.

위의 문장만 보았을 경우 아이디는 무엇인가요? 영어로 구성되어 있는 문자인가요? 아니면 영어와 숫자가 혼합된 문자인가요? 그것도 아니면 한글로 구성된 문자인가요? 이렇듯 아이디 라는 단순한 문장만으로는 사용자가 무엇을 입력해야하는지 명확하게 설명할 수 없습니다.

잠시만요! 우리는 아이디가 무엇을 말하는지 이미 알고 있는걸요?

물론 현재 전자기기에 능숙하고 많은 아이디를 갖고 있고 로그인을 해본 사람들은 아이디라는 단어만으로 많은 것을 추측할 수 있습니다. 이러한 것은 사용자가 많은 경험을 했기 때문에 얻은 경험으로 추측한 것이기 때문입니다. 우리는 그래서는 안됩니다! 더 높은 사용자 경험을 제공하기 위해서는 모호해서는 안됩니다.

name, id, type, autocomplete

위의 3가지 속성을 이용해서 자동완성 속성을 추가할 수 있습니다.

<input type="text" id="email" name="email" autocomplete="email" />
<input type="text" name="name" id="name" autocomplete="name" />

위와 같이 input 태그의 name, id, autocomplete 속성들을 사용 용도에 맞게 적절하게 작성할 경우 사용자가 자동완성 기능을 통해서 헷갈리지 않고 입력 값을 입력 할 수 있게끔 유도할 수 있습니다.