다양한 웹 언어에서 사용되는 <form> 태그

제목처럼 다양한 웹 언어(jsp, spring 등)에서 사용되는 <form> 태그에 대해 알아보겠습니다. <form> 태그는 웹 상에서 많이 사용되는데 사용자에게 무엇인가 입력하여 값을 전달할 때 사용됩니다.

예를 들어보겠습니다.

대부분의 홈페이지는 로그인, 회원가입 메뉴가 있습니다.

로그인의 경우 아이디, 비밀번호를 적는 칸이 있죠. 로그인하려면 어떻게 해야 하나요? 바로 그 칸에 아이디와 비밀번호를 적고 로인 버튼을 누르죠? 그리고 아이디와 비밀번호가 틀리면 경고창이 나오면서 다시 입력하라는 메세지가 나올 것입니다. 혹은, 아이디와 비밀번호가 맞다면 로그인이 된 상태의 메인화면이 나올것입니다.

이것이 바로 <form> 태그의 역할입니다.

<form> 태그 사용법

<form> 태그는 사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그입니다. 사용자가 아이디와 비밀번호를 입력 후 로그인 버튼을 클릭하면 회원가입할 때 입력한 id와 pw의 값과 사용자가 입력한 값을 비교하여 같으면 로그인이 성공한 것이고 틀리면 경고 메세지가 나오게 합니다.

<form > 태그 기본 구조

<form method="전달방식" action="이동하고자 하는 페이지">
   <input type="text" name="id">
   <input type="password" name="pw">
   <input type="submit" value="로그인">
</form>

<form> 태그의 속성으로는 method, action 등이 있습니다.

<form> 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼 것인지를 정합니다.

action : 어디로 보내야 하는지에 해당하는 속성입니다. 이동하고자하는 페이지를 확장자를 포함하여 적어줘야 합니다.

method : 어떤 방법으로 보낼 것이지에 해당하는 속성입니다. post방식과 get 방식이 있습니다.

※ post와 get 방식

get : 위 사진과 같이 전송할 때 입력한 값이 보여지는 속성값입니다.

post : 위 사진과 깉이 전송할 때 입력한 값이 보여지지 않는 속성값입니다.

<form> 태그안에 <input> 태그

<form> 태그는 <input> 태그를 사용하여 데이터를 데이터베이스에 저장하거나 불러오거나 할 수 있습니다. 로그인, 회원가입등이 예시로 들 수 있습니다.

<input> 태그에는 type 속성을 가지고 있습니다.

type : 입력 유형

- text : 일반 문자

- password : 패스워드(*****)

- submit : <form> 태그 안에 있는 데이터 전송

- button : 버튼

- reset : <form> 태그 안에 있는 데이터 초기화