html의 form은 무엇인가?

html의 form은 무엇인가!

• flask에서 값을 입력받아서 처리하기 이전에 html에 있는 form이 무엇인지에 대해서 먼저 알고 넘어가야 하지 않을까 싶어요.

what is form??

• form이란 사용자가 웹페이지에 어떤 값을 입력했을 때 그 값을 서버로 넘겨주는 일을 하는 태그 혹은 위젯을 의미합니다.
• 사용자가 값을 입력하면 그것을 서버로 넘겨준다. 그 태그를 의미한다 그것이 사실 form이 하는 모든 역할입니다.

• 다음과 같은 형태로 작성됩니다.
  • action: form이 submit되었을 때 어떤 url로 이동하게 되는가? 가 되겠죠. 즉 /arrived_page은 form 내부에서 전달받은 값을 이용해서 새로운 페이지를 만들 준비가 되어 있어야 한다는 말입니다.
  • method: 어떤 방식으로 전달할 것인가? 를 의미합니다. 간단하게는 GET을 쓸 경우에는 url에 포함하여 함께 보내는 방식이 될 것이고, POST의 경우에는 http 내부에 포함되어서 보내집니다. 중요한 정보들이거나 내용이 길거나 할 경우에는 POST로 보내진다고 생각해도 일단은 상관없습니다.

<form action="/arrived_page" method="POST">
...
</form>

input in form

• form 태그는 태그 내부에 있는 모든 값을 서버로 전달한다는 것을 의미합니다. 즉, 내부에 여러 변수가 함께 넘겨질 수 있다는 것이죠.
  • 예를 들어서 사용자 정보를 입력한다고 하면, (name, e-mail, description) 들이 모두 form태그 내에 있고 한 번에 넘어가게 된다는 것이죠.
• 다음 코드를 보시면 되는데, <div>는 무시하셔도 됩니다. 이 태그는 나중에 css를 적용할 때 편리함을 위해서 작성한 부분입니다.
• <label>: 입력받는 칸 왼쪽에서 입력받는 칸에 대해서 표시되는 부분
• <input>: type, id를 함께 정의해주어야 하는데
  • type: 해당 input은 어떤 형식인가를 말해줍니다. text, email, url 등 이미 HTML5에서 정의된 아주 많은 방식들이 있습니다.
  • id: input을 통해 입력받은 값의 변수명, 서버에서는 이 변수명을 통해 해당 값을 인식합니다.
  • 또한 input 태그의 경우는 닫는 태그 </input>가 없습니다.
• 만약 긴 글인 경우에는 <textaread>를 활용합니다. 이 태그는 닫는 태그가 있습니다.

<form action="/arrived_page" method="POST">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

• 자세한 내용은 여기에 있기 때문에 따로 작성하지는 않겠습니다.

button

• 이제 form 내에 작성한 내용을 제출해야 합니다. 이를 위해서느 버튼 태그가 필요한데,

• form 내부에 아래 부분을 추가해주면 끝납니다.

<div class="button">
    <button type="submit">Send your message</button>
</div>

wrap-up

• 아주 간단하게 form에 대해서 정리했습니다.

refence

• https://developer.mozilla.org/ko/docs/Learn/HTML/Forms/Your_first_HTML_form
• http://www.nextree.co.kr/p8428/