입문자를 위한 기초 html (13-14) - form part 1,2

김의찬·2023년 3월 16일

html & css

목록 보기
7/11

13. form part 1. 서버와 클라이언트

form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그.
-> 서버란? 정보를 제공하는 호스트이다.

서버와 클라이언트

-> 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다.

  • 클라이언트 : (네이버 홈페이지 주소를 입력하며) 저 네이버 홈페이지 보고싶어요. 요청할게요.엔터!

  • 서버 : 네 알겠습니다. 홈페이지 html 문서를 보내드릴테니 보세요!(응답으로 네이버 웹페이지를 보냄)

  • 클라이언트 : 네 제 웹브라우저에 네이버 홈페이지 오픈됐어요. 감사합니다^^

14. form part 2. 폼 태그

  • form은 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출할 수 있다.
  • form의 내용을 제출하기 위해 input 태그의 "submit" 타입 사용 가능.

form의 속성

  • action : 입력값을 전송할 서버의 url

  • method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET or POST)

    • GET : 서버에 요청을 보내어 응답을 받아낸다. 서버로부터 정보를 '가져오겠다'는 성격의 요청
    • POST : 서버에 요청을 보내어 작업을 수행한다.
      서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.
      서버의 정보를 '조작하겠다'는 성격의 요청이다.

action 값에 임의로 만든 exam.php를 적어주고 방법을 POST로 지정해주었다.
이름을 적는 text 타입의 input과
pet을 선택할 수 있는 select option을 지정해주었다.
마지막으로 type이 submit이고 전송이라는 값을 가진 input 값을 설정해주었다.

전송 버튼을 누르게 되면 서버에 각각의 name과 value 값들이 전송되게 된다.

전송했을 때 임의로 설정한 php 주소인 exam.php 가 나타나는 것을 확인할 수 있다.

내용 정리

  • form은 사용자가 입력 요소에 입력한 데이터를 서버로 전송해준다.
  • 서버란 데이터를 제공하는 호스트이다.
  • 클라이언트란 데이터를 제공받아 이용하는 고객이다.
  • form은 입력요소(input,select,textarea 등)를 감싸고, 데이터를 제출(submit) 한다.
  • form의 action은 서버 측 주소를 지정하는 속성이다.
  • form의 method는 데이터 전송 방식을 지정하는 속성이다.
profile
김의찬입니다

0개의 댓글