WEB/HTML

[HTML] Form

JungCw 2024. 1. 2. 17:44

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="post"를 하지 않았을 때의 결과

 

폼 태그는 method라는 속성을 가지며 GET과 POST 두가지로 나뉜다

.

GET과 POST 둘 다 웹브라우저에서 폼 데이터를 받아 서버로 전송하는 역할을 하나

GET은 URL의 쿼리 스트링으로 붙여 전송하고, POST는 숨겨서 보내는 차이가 있다.

(쿼리 스트링(Query String) : URL의 끝에 입력 데이터를 붙여 보내는 단순한 전달 방식. 주로 GET방식에서 쓰이며, 위처럼 ? 뒤에 title=post1 등의 데이터가 붙는 형식이다.)