Form
input, textarea 등의 폼 요소를 이용해 웹 제작자가 아닌 웹 사용자에게도 문서를 작성해 게시할 수 있는 기회를 제공할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>FormTag</title>
</head>
<body>
<p>
<input type="text">
</p>
<p>
<textarea></textarea>
</p>
<p>
<input type="submit">
</p>
</body>
</html>
위처럼 작성된 코드에서는 박스에 정보를 입력하고 제출을 눌러도 아무런 변화가 일어나지 않는다.
하지만 다음과 같이 form 태그를 사용하면 원하는 링크로 정보를 전달할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>FormTag</title>
</head>
<body>
<form action="http://localhost:3000/creat_post" method="post"> //action을 통해 보내고자 하는 링크를 지정
<p>
<input type="text" name="title"> //각 박스마다 name을 지정해주지 않으면 값이 전달되지 않음
</p>
<p>
<textarea name="body"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
폼 태그는 method라는 속성을 가지며 GET과 POST 두가지로 나뉜다
.
GET과 POST 둘 다 웹브라우저에서 폼 데이터를 받아 서버로 전송하는 역할을 하나
GET은 URL의 쿼리 스트링으로 붙여 전송하고, POST는 숨겨서 보내는 차이가 있다.
(쿼리 스트링(Query String) : URL의 끝에 입력 데이터를 붙여 보내는 단순한 전달 방식. 주로 GET방식에서 쓰이며, 위처럼 ? 뒤에 title=post1 등의 데이터가 붙는 형식이다.)
'WEB > HTML' 카테고리의 다른 글
| [HTML] POST방식으로 데이터 전달받기 (0) | 2024.01.04 |
|---|