HTML 폼 정리

기본적인 폼의 형태

<form>
  <label for="username">아이디</label>
  <input id="username" name="username">
  <label for="password">비밀번호</label>
  <input id="password" name="password" type="password">
  <button>로그인</button>
</form>

 

라벨

<label> 태그로 <input>을 감싸면 라벨을 클릭했을 때 인풋에 포커싱이 됩니다.

<label>
  아이디
  <input name="...">
</label>

혹은 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱이 됩니다.

<label for="username">아이디</label>
<input id="username" name="...">

 

인풋 <input>

name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름입니다. 예를 들어서 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭됩니다.

  <label for="...">아이디</label>
  <input id="..." name="username">

type 속성을 사용하면 다양한 인풋을 사용할 수 있습니다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용합니다.

<label for="password">비밀번호</label>
<input id="password" name="password" type="password">