HTML_정보전달 (feat. <form> )

우리가 로그인, 물건구매, 검색 등등

여러가지 서비스를 이용할 때 사용하는 기능을 작성할 시간이다.

 

로그인할땐 그냥 단순히 아이디만 적으면 알아서 접속되는 것이 아니라

아이디와 패스워드를 어떤 서버에 전송해서 알맞는 계정에 접속된 페이지를 보여주는 것이 로그인이다.

우린 이 아이디와 패스워드를 서버에 전송하는 기능

바로 <form>을 배워보려 한다.

 

먼저 아이디, 비밀번호를 작성 할 수 있는 input 상자를 만들어야 한다.

예재

input은 기본적으로 텍스트나, 비밀번호, 버튼, 전송등을 사용할 수 있는 태그이다.

자세한 내용은 다시 다루도록 하고 지금은 이렇게 텍스트, 패스워드를 쓸수 있는 칸을 만들어보자.

그러고보니 이상하다. 칸은 만들었지만 로그인 버튼이 없는 것이다.

input태그의 타입속성 중 submit을 활용하면 된다.

또 기본적으로 submit로만 설정하면 '제출'버튼이 나오기때문에

value값으로 로그인을 지정해보자.

예재

그럼 로그인 버튼이 생긴다.

하지만 아무런 반응이 없는데, 아직 오늘 주제인 form을 작성하지 않아서 그렇다.

form은 사용자가 입력한 내용을 특정 서버로 전달하는 기능을 한다.

그렇기때문에 서버주소를 함께 적어주어야하는데

서버개발 측에서 로그인정보를 어떤 서버주소로 보내달라고 요청할 것이다.

이를 다음과 같이 작성하면 된다.

<form action="요청서버주소"> </form>

이렇게 작성하면 어떻게 전송되는지 확인해보자.

예재

분명 잘 적었는데 무언가 전송되었다는 피드백이 없다.

바로 어떤 이름으로 전송할 것인지를 지정하지 않았기 때문이다.

예재

사진이 그냥 보면 작아 안보이시는 분들은 눌러서 확대해주세요.

이렇게 input태그 안에 name이라는 속성으로 각 칸마다 이름을 지정해주고

아이디는 Test, 비밀번호는 1234로 적은 후 로그인을 눌렀더니

http://localhost/login.php?ID=Test&PW=1234

라는 주소로 이동되었다.

 

여기서 'ID=Test&PW=1234'에 주목해 볼 필요가 있다.

정확히 전송되어 성공적인 출력이 나온것은 맞다.

하지만 나의비밀번호가 이렇게 대놓고 주소창에 출력된다면

개인정보가 바로 유출되는 것이다.

 

이때 사용되는 속성이 바로 Method속성이다.

Method속성은 이 정보를 어떻게 전송할지 방식을 정하는건데,

Get, Post 이 두가지 중 선택할 수 있다.

method="get"은 프로그램 환경변수, 즉 주소창에 그대로 문자를 전송하는 방식이고,

method="post"는 표준 입력, 주소창에 표현하지 않고 데이터를 전송하는 방식의 속성이다.

예재

위와 같이 주소만 표시되며, 뒷 암호와 같은 부분은 표시되지 않는다.

자 로그인과같은 텍스트를 전송할 수 있는 폼(form)은 이제 할줄 아니,

파일전송, 콘텐츠 전송을 만들어 보자.

 

콘텐츠 전송은 우리가 한 것과 비슷하고 간단한데,

<form action="http://localhost/file.php" method="post" enctype="multipart/form-data">

  <input type="file" name="file">

  <input type="submit">

</form>

이렇게 적을 수 있다.

자 다른점이 무엇인가?

바로 form태그에 enctype이라는 속성이 생겼다.

이는 전송데이터 형식을 지정할 수 있는데, 파일을 첨부해 전송할때

꼭 적어야하는 속성이라고 기억하면 되겠다.

또 input type이 파일로 지정되었는데 파일을 첨부할 것이기 때문에 file로 지정했다.

예재

사진이 그냥 보면 작아 안보이시는 분들은 눌러서 확대해주세요.

위와 같이 파일을 선택해 전송할 수 있는 페이지를 완성했다.

 

오늘 내용을 정리하자면

<form>태그를 활용해 서버로 무언가를 전송할 수 있고,

<input>태그를 활용해 문자, 암호, 파일 등을 기록할 수 있으며,

form태그의 action, method, enctype 속성을 알게 되었다.

 

다음시간은 <input>태그를 알아보는 시간이 될 것이다.