JavaScript - Form / Input / preventDefault / localStorage

💡 Form이란?

정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 뜻한다.

<form></form>

💡 Input이란?

사용자로부터 입력을 받을 수 있는 입력 필드를 뜻한다.

1. Type

• text: type속성의 기본값, 한 줄로 된 텍스트 필드
• pssword: 비밀번호를 입력할 수 있는 입력 필드
• file: 파일을 업로드 할 수 있는 입력 필드
• radio: 라디오 버튼을 정의
• checkbox: 체크 박스를 정의, 다중 선택시 사용
• button: 클릭 가능한 버튼을 정의, value로 텍스트 입력 가능
• submit: 제출 버튼을 정의, value로 텍스트 입력 가능
• reset: 리셋 버튼을 정의, value로 텍스트 입력 가능

참고
http://www.tcpschool.com/html-tag-attrs/input-type

2. 속성

• placeholder: 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말
• required: 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 검사, 블리언으로 구분
• maxlength: 입력 가능한 최대 길이를 제한
  
  

💡 login 만들기

1. preventDefault

function onLoginSubmit(event) {
  event.preventDefault();
}

• addEventListener의 함수에서 첫 arument는 지금 막 벌어진 event들에 대한 정보를 받아 저장하고, object 형식으로 볼 수 있다.
• form을 submit하면 브라우저는 기본적으로 페이지를 새로고침하게 되어 있는데 이때 preventDefault 함수를 사용하여 기본 동작을 실행하지 못하도록 막는다.
• a태그 click시 페이지 이동을 막을때도 사용한다.

2. localStorage

• 브라우저 상에 데이터를 저장할 수 있는 기술

localStorage.setItem("Key","Value"); //저장
localStorage.getItem("Key"); //불러오기
localStorage.removeItem("Key"); //삭제

👋 마치며

스터디 활동을 위해 기록하고 있습니다.
다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
• http://www.tcpschool.com/
• https://www.daleseo.com/js-web-storage/