Form (#10 Vanilla JS)

## Form

 

form에 대해서 간단하게 배웠습니다. 

<form>
</form>

form 태그는 웹 페이지에서 입력 양식을 의미합니다.

로그인창, 회원가입 폼 등이 이에 해당합니다.

text를 입력하거나 password, check나 radio box를 체크하고 submit을 누르면 서버로 전달되는 방식입니다.

form 태그는 보이지않는 태그라서 실제 사용자가 양식을 입력하기 위해서는 input 태그를 입력합니다.

## input

• text: 일반문자
• password: 비밀번호
• button: 버튼
• submit: 입력 양식 제출
• reset: 입력 양식 초기화
• radio: 한 개만 선택할 수 있는 컴포넌트
• checkbox: 여러개를 선택할 수 있는 컴포넌트
• file: 파일업로드
• hidden: 사용자에게 보이지 않은 숨은 요소

 

##  preventDefault()

fuction inputSubmit(event){
	event.preventDefault();
}

기존의 form은 양식을 서버에 제출하는 방식입니다.

그래서 submit을 하게 되버리면 콘솔창에 입력양식이 잠깐 나오고 사라집니다.

그 이유는 브라우저에서 form안에 submit을 해버리면 자동으로 새로고침이 되게끔 설계?가 돼있기 때문이랍니다.

그래서 javascript에서 이러한 기본 설정을 막기위해서 preventDefault라는 function을 추가해줌으로써

서버에 입력양식이 보내지면서 새로고침을 막아주고 기존 화면에서의 입력양식 값이 남아있습니다.

 

preventDefault는 a 태그도 막아줍니다.

a 태그는 해당링크로 페이지가 넘어가는데 저 기능을 추가해줌으로써 해당링크로 페이지를 넘어가지 못하게 막아줍니다.

 

또란 function에 event라고 임의의 변수를 받아주면서 사용하고 event는 그냥 관습?이라고 합니다.ㅋㅋㅋㅋ

event말고 원하는 값을 집어 넣으셔도 상관없습니다.