HTML <form>tag

1. form

사용자로부터 값을 입력 받는 양식을 만들기 위해 사용.

<form>
    <label for="id">ID :</label>
    <input type="text" placeholder="id를 입력하세요." id="id">
    <label for="password">PASSWORD :</label>
    <input type="text" placeholder="password를 입력하세요." id="password">
    <button>LOGIN</button>
  </form>

2. lable 과 input 의 연결

lable은 input에 이름을 붙여주는 역할을 한다. lable의 for 값과 input의 id 값이 같으면 서로 연결되어
lable을 클릭하면 input에 입력할 수 있도록 포커스 된다.

3. input의 속성

type

• text
• email : 데이터가 이메일 형식으로 입력되어야 한다.('@'필요)
• password : 사용자에게 데이터가 보이지 않도록 원이나 별표로 마스킹되어진다.

placeholder : 사용자에게 입력에 대한 설명을 표시해 줄 수 있다. 값을 입력하면 자동으로 사라진다.

value : 사용자가 입력한 값, 또는 미리 속성으로 값을 입력해 둘 수도 있다.

required : 해당 input 박스에는 빈값이 입력될 수 없도록 도와준다. 필수로 입력해야하는 경우에 사용하면 좋다.

maxlength : input박스 안에 너무 많은 값이 입력되지 않도록 글자수를 제한해준다.

autofocus : 페이지가 로드될 때 자동으로 포커스된다.

4. button의 타입

submit : 양식을 제출하는 역할이다. form내에서는 기본 타입이 submit이다.

reset : 사용자 입력 양식을 초기화 한다.

button : 다른 기능들을 바인딩하여 사용할 수 있다.

4. 사용자 입력 가져오기

button의 기본 타입이 submit인 것을 활용하여 addEventListener에 submit 이벤트를 등록해준다.
다만 submit의 경우 기본값으로 설정되어있는 action(페이지 새로고침)이 있는데 이를 막기 위해서는 preventDefault()를 사용하면 된다.