HTML – form 기본

이번 시간에는 form이라고 하는 걸 배울 건데요 form이라고 하는 건 여러분들이 이미 많이 써보셨어요 여러분이 로그인을 하거나 회원가입을 하거나 아니면 어떤 물건을 사거나 또는 글을 작성할 때 여러분이 입력한 정보를 서비스를 제공하는 서버, 그쪽으로 정보를 전송하잖아요 바로 그것을 전송할 때 사용하는 글자를 입력하는 것들 또는 무언가를 선택하는 것들 이런 것들을 우리가 form 이라고 부릅니다

그래서 이 form 이라는 것은 사용자가 입력한 정보를 서버로 전송할 때 사용하는 그러한 것들을 우리가 form 이라고 부릅니다 그러면 이번 시간에는 이 form 을 어떻게 작성하는지를 살펴보겠습니다 우선 결론적으로 말씀드리면 이렇게 생긴 것들이 form이구요 이런 것들을 우리가 만드는 방법을 지금부터 살펴볼 거에요 자 여러분은 이 실습에서 form

html 이라는 파일을 만드시고 그리고 실습을 할 수 있는 준비를 해주세요 자 그리고 reload(새로고침)를 해 보면 아무것 도 없죠 자 우선 사용자가 입력한 정보를 서버에 전송하기 위해서는 사용자로부터 정보를 입력받을 수 있는 것을 만들어야겠죠 자 그때 사용하는 태그가 input 태그입니다 input 은 입력하다 라는 뜻이죠 즉 사용자로부터 어떤 정보를 입력한다라는 뜻으로 생각하시면 되겠습니다 자 input이라고 하는 태그를 만들고 이 태그 의 type 이라고 하는 속성으로 "text" 를 하게 되면 text는 뭔가요? 문자라는 뜻이죠 즉, 사용자로부터 문자 정보를 받을 수 있는 input 할 수 있는 이렇게 생긴 박스가 생깁니다 그런데 이 박스는 일반적인 박스가 아니라 어떤 사용자가 정보를 입력할 수 있는 박스라는 특징을 가지고 있어요

자 그래서 여기에서 우리가 예를 들면 '아이디:' 라고 해주면 이렇게 되는 거죠 자 그 다음에 비밀번호도 입력받을 수 있었으면 좋겠네요 자 그런 경우에는 '비밀번호: ' 그리고 이번에도 마찬가지로 input 하고 reload 를 해 보면 보시는 것처럼 이렇게 되는데 좀 보기 싫잖아요? 아이디와 텍스트를 입력하는 text 필드 라는 건데, 자 저거를 그루핑하기 위해서 단락으로 묶어주면 조금 더 보기가 좋아지죠 이렇게 됩니다 자 그리고 아이디는 egoing , 비밀번호는 뭐 뭐 뭐 그런데 우리가 일반적으로 비밀번호를 입력할 때 이렇게 되지 않잖아요 ***이 생기죠 자 이건 이제 여러분이 input 태그를 만들 때 type으로 password라고 지정을 해주시면 password에 해당되는 입력 박스가 생겨요

그래서 이제부터 입력하는 정보는 **이 쳐져서 몇 글자를 입력했는지는 알 수 있지만 어떤 글자를 입력했는지는 감추어서 뒤에 서 있는 사람이 볼 수 없도록 하는 그런 기능이죠 자 되었죠 자 그럼 여기 아이디에다가 egoing , 비밀번호 입력하고 그리고 어떻게 하나요? 보통? 어떤 버튼이 있어서 그 버튼을 누르면 우리가 입력한 정보가 그 서비스로 넘어가죠 다시 말해서 그 서비스가 가지고 있는 서버라는 곳으로 전송이 됩니다 바로 그 전송을 할 때 사용하는 버튼이 있는데 그 버튼은 바로 submit 제출하다 라는 뜻입니다

submit 버튼을 한번 만들어볼게요 "text"라고 되어있는 부분 대신에 submit(제출하다) 라고 하시면 보시는 것처럼 버튼이 생기고 그 버튼에는 제출이라고 하는 텍스트가 적혀 있습니다 자 그럼 우리가 여기에 아이디 입력하고 비밀번호 입력하고 이제 제출 버튼 누르면 서버로 전송이 될 건데 그런데 아직 정보가 불충분합니다 어떤 정보가 불충분한가요? 우리가 입력한 정보가 어디에 있는 서버로 어디로 전송될 것인지에 대한 정보가 아직 부족하다는 것이죠 그때 사용하는 태그가 바로 form 이라는 태그입니다 자 제가 화면의 구조를 좀 바꿨어요

여러분들 보기 편하게 자, form 태그를 한번 작성해볼게요 어떻게하면 되냐면, 여기에 form 태그를 주면 됩니다 조금 보기 좋게 form 태그 하위에 있는 것들을 들여쓰기 합니다 들여쓰기를 할 때는 이렇게 여러 줄을 선택하고 tab키를 누르시면 들여쓰기가 되어요 space 키를 누르시면 글자가 없어져버릴 것입니다

자 그리고 제가 방금 말씀드린 것처럼 사용자가 입력한 정보들이 자 여기에 입력한 이 정보들을 submit 버튼을 눌렀을 때 어디로 보낼 것인가라고 하는 정보는 바로 이 form 태그에 action이라는 속성에다가 써주시면 됩니다 그래서 여러분이 html을 전문적으로 하는 분이 있고 그리고 다른 사람이 서버 관련된 작업을 하는 전문적인 프로그래머가 있다면 아마 서버 쪽에서 작업하는 프로그래머가 여러분에게 이렇게 이야기할 거예요 사용자가 입력하는 로그인 정보는 예를 들면, 'http://localhost/loginphp' 로 보내주세요 이렇게 얘기할 겁니다

그러면 여러분은 이 주소를 여기에다가 적어주시면 되는거에요 그리고 우리가 reload를 한 다음에 여기에다가 정보를 입력하고 제출버튼을 누르면 url이 어떻게 바뀌는지 보세요 어때요? 우리가 지금 입력한 'http://localhost/loginphp' 로 url이 바뀌는 것을 볼 수 있습니다 앞에 'http://'가 안 보이는 건 생략된거고 뒤에 물음표가 붙은 건 무시해주세요

여러분이 꼭 서버가 무엇인지 서버가 어떻게 동작하는지 어떻게 정보를 받는지 몰라도 그냥 여기로 전송해주세요 라는 얘기를 듣고 그 주소를 정확히 action의 속성값으로 넣어주기만 하면 된다는 겁니다 아시겠죠? 자 그런데 우리가 지금 사용자가 입력한 정보, 여기있는 아이디와 비밀번호가 서버로 전송될 때 어떠한 이름으로 전송될지가 애매하다는 거죠 자, 예를 들어 볼게요 여기 아이디를 복사해서 여기에다 넣어볼까요? 주소 이렇게 사용자가 입력하는 정보를 바꿔봤어요 이렇게 되면 여기에다가 입력한 정보는 바로 이 태그에 해당되죠 그리고 여기 주소에다 입력한 정보도 바로 여기에 있는 이 태그에 해당됩니다 자 그러면 사용자가 id값으로 입력한 값과 주소를 입력한 값이 서로 구별이 안 되는거죠

그럼 어떻게 해야 되냐면 이 각각의, 요런 것들을 우리가 control이라고 하는데요 field 라고도 하고 이 각각의 control 에다가 이름을 정해주셔야 됩니다 이렇게 name 은 "id" 그리고 name은 "pwd" 라고 할게요 (password를) 줄여서 그리고 name은 "address" 자 이렇게 각각의 control에다가 이름을 준 거죠 이건 id 이건 pwd, 이것은 address 이런 식으로 우리가 이름을 줬기 때문에 서버 쪽으로 전송할 때 바로 이 각각의 이름의 값으로 데이터가 전송됩니다

자 한번 해볼게요 여기 아이디에는 egoing을 쓰고 비밀번호는 1111 그리고 주소는 서울이라고 한 다음에 영어로 쓸게요 그리고 제출 버튼을 누르면, url이 어떻게 바뀌는지 보세요 보시는 것처럼 이렇게 바뀌죠 그래서 이 앞에 있는 이만큼은 여기 있는 액션에 해당되는 부분이고 이 뒤에 있는 id 는 egoing 이라는 것은 바로 name값이 id인 이 control에 사용자가 입력한 정보가 서버로 전송될때 url뒤에 id가 egoing이라는 문자가 붙어서 전송이 됩니다 그리고 사용자가 pwd 뒤에 입력했던 비밀번호는 pwd는 1111 이다 라는 형식으로 전송이 되고 address는 보시는 것처럼 이렇게 전송이 되도록 약속이 되어 있는 거예요 그럼 이 url을 누가 만들어 준 거겠어요? 웹브라우저가 만들어준 거죠

이렇게 전송을 하게 되면 바로 이 localhost라고 하는 주소에 해당되는 컴퓨터가 예를 들면, navercom이 들어갈 수도 있고 googlecom 이 들어갈 수도 있는 거예요 거기에 있는 loginphp 라는 여러분들은 잘 모르는 지금은 모를 수밖에 없는 어떠한 웹 애플리케이션이라는 것으로 데이터를 전송하는데 그 전송한 데이터의 값으로 id값은 egoing pwd는 1111 address 값은 seoul이 전송된 겁니다

이렇게 url을 통해서요 자 그런데 loginphp라는 것은 우리는 몰라도 되어요 우리는 그냥 여기로 데이터를 전송할 때는 html 코드를 이렇게 작성하면 된다 라는 건만 알고 그 규칙에 맞게 코딩을 하시면 된다는 거죠 자, 이렇게 해서 사용자가 입력한 정보를 서버로 전송하는 기능인 form의 기본적인 사용법을 지금까지 알아봤습니다

아마 여러분이 웹 프로그래밍을 해본 적이 없으시다면 지금 여기 action에다 이렇게 주소를 입력하는 것 그리고 서버로 데이터를 전송할 때 이렇게 전송되는 부분이 굉장히 혼란스럽게 느껴질겁니다 알고 있어요 그리고 그런 것들은 혼란스러운 채로 내버려두셔도 돼요 왜냐면 지금부터 설명드리는 이야기는 지금 여러분이 혼란스러워하는 그것을 이해하지 못해도 할 수 있는 것들이거든요 그러니까 잘 이해가 안 되는 부분은 훌훌 털어버리고 나머지 이야기로 따라오시면 됩니다 아셨죠? 여기서 머물러 계시면 안 돼요