UI / UX 웹 퍼블리셔 & 프론트엔드 [7] - form 태그

이번 실습은 저번 실습에 이어 UI를 구성하는 실습이다.

저번의 틀을 만드는 과정이면 이번엔 <form>을 이용하여 데이터를 주고받을 수 있는 기능을 추가하였다.

 

 

index7.html - <form>태그

<form> 태그

: 데이터를 주고 받기 위해 큰 테두리로 감싸는 개념 (안에서 일어나는 데이터 = form data)

 

 

action="" 속성

: form data를 서버로 보낼 때, 해당 데이터가 도착할 URL을 명시

 

 

type="submit" | "reset" 속성

: <form> 태그가 있어야 작동된다.

 

** submit : form의 action이 수행되도록 한다.

** reset : 사용자가 form에 입력한 값 초기화

 

 

 

index7.html - 결과

 

결과창에서 첫 번째 text와 두 번째 text의 값을 서로 입력하고 입력 초기화[reset]를 누를 경우 어떻게 될까?

→ 첫 번째 text는 초기화되지 않고, 두 번째 text만 초기화된다

   그 이유는 첫 번째 text는 form 안에 포함되어 있지 않기 때문이다!

   

   입력완료[submit] 버튼 역시 마찬가지로 두 번째 text에 값이 없으면 www.naver.com으로 이동하지 않는다!