form
- 사용자가 입력한 데이터(입력값)을 서버로 보내기 위해 사용하는 태그
서버와 클라이언트
- 클라이언트가 요청하면 서버는 그에 대한 응답으로 정보를 제공
- 클라이언트의 요청이 어떤 것인지에 따라 응답은 달라짐
예1) 사용자가 네이버 홈페이지로 이동하고 싶은 상황
- 클라이언트 : 네이버 홈페이지 주소 입력 → 엔터 → 서버에 네이버 홈페이지로 이동한다는 요청 보냄
- 서버 : 요청을 받아 응답으로 네이버 웹페이지 보냄 (홈페이지 html 문서)
- 클라이언트 : 사용자 웹브라우저에 네이버 홈페이지 오픈됨
예2) 네이버 로그인 상황
- 클라이언트 : 로그인을 위한 아이디, 비밀번호 입력 후 로그인 클릭 (엔터)
→ 3가지의 입력 요소 - 서버 : 로그인 정보 확인 후 맞으면 로그인 성공 화면 / 틀리면 로그인 실패를 알림
- 3개의 입력 요소로 구성 → 3개의 입력 데이터는 form을 통해 서버로 전송
form 태그
- 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출할 수 있음
- <input type="text" placeholder="아이디" /> 등의 입력 요소를 <form></form> 태그로 감싸서 전달
form의 내용 제출
- input 태그의 submit 타입 사용!
<form>
<input type="text" placeholder="아이디">
<br>
<input type="text" placeholder="비밀번호">
<br>
<input type="submit" value="로그인">
</form>- input 태그의 submit 형식 ≫ 버튼 형식
- '로그인' 버튼을 누르면 입력된 아이디와 비밀번호가 서버로 전송 (요청)
- 서버 측에서 데이터를 처리한 결과를 클라이어언트에게 보내줌 (응답)
form의 속성
- action ≫ 입력값을 전송할 서버의 url
- method ≫ 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET / POST)
<form action="exam.php" method="POST">
</form>- exam.php라는 서버 프로그램으로 입력값을 전송하여 요청
- POST 방식으로 전송
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>서버에 요청을 보내자, 폼!</title>
</head>
<body>
<h1>키우고 싶은 동물 고르기</h1>
<form action="exam.php" method="POST">
<input type="text" placeholder="NAME" name="name">
<br>
<select name="pet">
<option value="dog">강아지</option>
<option value="cat">고양이</option>
<option value="parrot">앵무새</option>
</select>
<br>
<input type="submit" value="전송">
</form>
</body>
</html>- <input type="submit" value="전송">
- 전송 버튼 누르면 exam.php 창으로 바뀌면서 입력값 전송
- name이 중요 !
- name 속성값에 따라 서버에 다르게 전송됨
- name="name"인 입력값은 name으로 / name="pet"인 입력값은 pet으로 서버에 전송됨
'front-end' 카테고리의 다른 글
| [HTML] SELECT와 TEXTAREA (0) | 2024.12.01 |
|---|---|
| [HTML] 입력 요소 만들기 (0) | 2024.12.01 |
| [HTML] 목록 표시하기 (0) | 2024.12.01 |
| [HTML] 링크 만들기 (0) | 2024.12.01 |
| [HTML] 컨테이너와 전역 속성 (0) | 2024.12.01 |