Vanilla JS 주요 특징 정리 3 - 변수 입력받기, form 태그

변수 입력받기

<input> 태그

input은 사용자로부터 데이터를 입력받을 때 사용하는 html 태그다.

 

만약 입력받는 데이터에 제약을 걸고 싶다면 어떻게 해야 할까?

ex) 필수 항목, 최대 길이 제한 등.

 

1. JS로 조건문을 사용하여 예외처리.

이 방식을 이용해도 괜찮지만 필수요소나 예외처리같은 경우는 input 태그의 속성만으로도 제어하는게 가능하다.

2. input 태그의 속성 사용

required: 필수로 필요한 요소로 빠뜨린 채 submit하면 브라우저 자체 알람이 발생한다.

maxlength: input 태그 내부의 총 문자 개수를 지정하여 그 이상의 입력은 받지 않는다.

이 방법은 input 태그를 form 태그가 감싸고 있어야만 작동한다.

<form> 태그

사용자로부터 데이터를 입력받아 서버 등으로 제출할 때 사용하는 태그.

내부에 input, button 등의 요소들과 함께 사용된다.

submit 이벤트

form 태그 내부 폼요소에서 [enter]를 누르거나 버튼을 클릭하면 발생하는 이벤트.

이벤트가 발생하면 내부 폼 요소의 value값이 제출되며 페이지가 새로고침된다.

이 때 새로고침을 방지하고 싶으면 이벤트객체의 preventDefault() 메소드를 실행하면 된다.

localStorage

브라우저를 사용하다보면 새로고침을 해도 그대로 유지하고싶은 정보들이 있다.

예를 들면, 로그인 유무나 todoList 같은 요소들이 있다.

 

브라우저에서는 자체적으로 localStorage라는 데이터베이스를 제공한다.

Window.localStorage - Web API | MDN (mozilla.org)

Window.localStorage - Web API | MDN

로컬 스토리지는 브라우저가 자체적으로 제공하는 기능이므로 바로 사용할 수 있다.

getItem같은 경우, 찾는 아이템이 없다면 null을 반환한다.