컨텐츠를 불러오는 중...
<form> 태그를 얼마만큼 능숙하게 다룰 수 있는지가 우리가 만든 웹사이트가 사용자가 편하고 안전하게 사용할 수 있는지 없는지를 결정 짓기도 합니다.<form> 태그에 대해서 다루어 보겠습니다.<div> 를 이용하여 로그인하기 위해서는 어떻게 해야할까요?input 값을 입력하지 않았을 경우 입력하지 않은 <input> 으로 포커스가 바로 이동할 수 있게끔 기능을 추가해주어야 합니다.<div> 태그에 post 요청이 일어날 수 있게끔 기능을 수정해주어야 합니다.<form> 을 이용하여 로그인하기 위해서는 어떻게 해야할까요?<form> 태그내에 action 속성에 post가 일어났을 경우 어떤 작업을 이루어질 것인지에 대한 기능을 추가해주어야 합니다.<form> 태그가 압도적으로 적은 추가 기능이 필요합니다. 물론 div를 이용하여 로그인 폼을 만들 경우의 장점 또한 존재합니다. 모든 것을 자유롭게 수정하고 디자인하고 기능을 추가할 수 있다는 장점이 있습니다. 하지만 대부분의 경우는 <form> 태그를 이용하여 작업하는 것이 더 수월합니다.<label>, <legend> 태그가 있습니다.아이디를 입력하세요.
잠시만요! 우리는 아이디가 무엇을 말하는지 이미 알고 있는걸요?
<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>
<legend>
<label htmlFor="email"> id </label>
<input id="email" name="email" type="email" required />
</legend>
<input type="text" id="email" name="email" autocomplete="email" />
<input type="text" name="name" id="name" autocomplete="name" />