[HTML] 입력받은 데이터 서버로 전송하기 - submit

지난 번에는 <form> 태그의 'type' 속성을 이용하여 사용자로부터 비밀번호를 입력 받을 수 있는 방법을 알아보았습니다.

[HTML] <form>태그로 사용자 입력 받기

[HTML] <input> 태그로 패스워드(비밀번호) 입력란 만들기

이번에는 이렇게 입력받은 데이터를 서버로 전송하는 방법을 알아보도록 하겠습니다.

입력받은 데이터 서버로 전송하기 - submit

지난번 포스팅에서 <input> 태그의 'type' 속성에 들어가는 값들을 설명했는데 기억하시나요?

• text 일반 텍스트를 입력받을 수 있습니다.
• password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.
• submit <form> 태그 내에 입력된 데이터를 서버로 전달해 줍니다.
• button 버튼을 생성해 줍니다.
• checkbox 체크박스 형태의 입력을 받을 수 있습니다.
• radio 라디오 버튼 형태의 입력을 받을 수 있습니다.
• reset <form> 태그 안의 사용자 입력을 초기화 합니다.

서버에 입력받은 데이터를 전송하기 위해서는 submit 이라는 키워드를 사용합니다.

<input> 태그의 'type' 속성을 'submit'이라고 지정해 주면,

1. 자동으로 데이터를 전송할 수 있는 버튼이 생성되고,

2. 그 버튼을 클릭하면 지정된 URL로 <form>태그 안에 입력된 값들이 'action' 속성으로 지정된 서버 페이지로 전송됩니다.

submit 버튼 생성

See the Pen html example by anna (@hianna) on CodePen.

<form>태그 안에 <input type='submit'> 이라고 지정해 주니,

자동으로 '제출'이라는 버튼이 생긴 것을 확인 할 수 있습니다.

'제출'이라는 단어는 브라우저에서 알아서 보여주는 단어입니다.

그래서 만약 브라우저가 영문으로 설정되어 있거나, 다른 언어로 설정되어 있다면

해당 언어로 '제출'이라는 단어가 보여질 것입니다.

버튼명 변경

See the Pen html example by anna (@hianna) on CodePen.

이번에는 <input type='submit' value='로그인'> 이라고 하여

value 값을 원하는 값으로 변경해 보았습니다.

생성된 버튼에 표시된 값이 변경되는 것을 볼 수 있습니다.

전송할 서버 페이지 지정

See the Pen html example by anna (@hianna) on CodePen.

그리고, <form> 태그에 'action'이라는 속성을 추가하였습니다.

그리고 'action' 속성에는 입력된 로그인 데이터를 보낼 서버 페이지의 주소를 입력하였습니다.

이제 '로그인' 버튼을 클릭하면, 해당 <form>태그 내에 지정된 값들이 'action' 태그에 지정된 페이지로 넘어가게 됩니다.

예제로 살펴보기

현재는, 서버페이지를 만들지 않은 상태이브로 데이터가 어떻게 전달되는지만 살펴보도록 하겠습니다.

1. 위의 소스코드를 복사하여, 메모장에 붙여넣은 후, 'loginForm.html' 이라는 이름으로 저장합니다.

2. 생성된 'loginForm.html' 파일을 클릭하여, 브라우저로 실행합니다.

3. 로그인 정보 입력화면에 ID와 비밀번호를 입력하고 '로그인하기' 버튼을 클릭합니다.

4. URL을 살펴보도록 하겠습니다.

① 우리가 action 에 지정한 페이지인 'login_page.php'입니다. 

하지만 여기서는 그런 페이지를 우리가 만들지 않았으므로 파일을 찾을 수 없다는 메세지가 나옵니다. 

② '?'가 중간에 하나 붙고, 우리가 'userid'의 값을 'myID'라고 입력하였으므로 'userid=myID'라고 지정하여 다음 페이지로 넘겨주고 있습니다.

③ 'pwd'값은 화면에는 패스워드 형식으로 보이지만, 다음페이지로 넘어갈때는 실제 입력한 값이 암호화되지 않고 넘어가고 있습니다.

(패스워드 암호화에 관한 내용은 별도로 다루도록 하겠습니다.)

여기까지  <input> 태그의 'type' 속성을 'submit'으로 지정하여 서버로 정보를 보내는 방법을 알아보았습니다.