[HTML 기초] <form> 태그로 속성 지정하기

<form> 태그란?

​HTML 태그 요소 중 하나로, '사용자가 입력(input)한 정보를 수집'하여  '어디 서버로 어떻게 전송할 것인지 '그 속성을 정해주는 것'입니다.

 

로그인, 회원가입, 글 작성 등에 입력한 정보를 제공 서버에 전송할 때 사용하는 글자 입력 방식으로 Text Filed에 정보를 입력하거나 선택한 후 제출하면 그 양식이 Backend 서버에 전달돼 정보처리를 할 수 있습니다. 

그 모든 입력창, 선택란 등이 <form>에 해당 하는데요, '구글폼, 네이버폼'이라고 흔히들 들어보셨죠? 그 폼이 이 <form>(폼)입니다.

 

 

 

 

<form> 속성, 속성값 지정하기

지정할 수 있는 여러 '속성'들이 있는데 다양한 속성과 속성값들을 <form> 태그 안에 입력해 아래와 같은 형식으로 사용합니다.

 

 

 

<form> 태그 속성 종류

> action, name(=id), target, method,

속성	설명	태그 입력 방식
action	폼 데이터가 전송할 서버 스크립트 파일의 '저장위치'를 지정	<form action="url"></form>
name(=id)	폼을 식별하기 위해 사용 <form>뿐 아니라 <input>, <button> 등 다른 태그 요소에도 사용 가능	<form id="me"></form>
target	데이터를 제출한 후 받은 응답을 열 때 표시할 위치를 나타냄 _self : 현재 브라우저에 표시 → default _blank : 새로운 브라우저에 표시 _parent : 현재 브라우저의 부모에 표시, 없을 경우 현재 브라우저에 표시 _top : 최상단 브라우저에 표시 * 보통 브라우저라함은 '탭'을 생각하면 됨	<form target="blank"></form>
method	폼을 전송할 방식을 선택하는 속성으로 클라이언트와 서버가 데이터를 주고받는 방식(http method)을 지정하는 속성 _get : url로 넘어가는 방식 / 클라이언트가 <form> 데이터를 이름과 값이 결합된 형태로 전달 /웹 브라우저에 직접 입력해서 접근이 가능 / 북마크 가능 / 전송할 수 있는 데이터의 크기에 한계가 있음 / 전송 내용이 그대로 노출되어 보안에 약함 _post / 데이터를 body로 연결하여 전송하는 방식 / 클라이언트와 서버간의 약속된 형식으로 인코딩하여 서버로 전송 / 전송할 수 있는 데이터의 길이에 제한이 없음 / 웹 브라우저에서 접근이 불가하여 보안에 강함	<form method="get"></form>

 

 

---

 

 

오늘은 사용자가 입력한 정보를 어떻게 전송할지 속성을 정해주는 <form> 태그로 속성 지정하는 방법에 대해 알아 보았습니다. 하지만 <form> 태그는 단독으로 사용할수가 없어서 오늘은 결과물 양식이 없습니다.

 

<form>과 같이 사용하는 <input> 태그가 있는데 <form> 태그가 서버에 정보를 전송해주는 일을 한다면, <input> 태그는 그 전에 그 정보를 입력받는 일을 합니다. <input> 없이 <form>만 지정하면 정보를 입력할 할 공간이 없기 때문에 <form>은 보통 <input>과 함께 사용하게 됩니다. 다음 시간은 무슨 내용에 다루게 될지 바로 감이 오시죠?

 

정보를 입력 받아 수집하는 <input> 태그에 대해 배워보도록 하겠습니다.

<form> 태그와 함께 보면 이해가 더 빠르기 때문에 최대한 빠르게 포스팅 하도록 하겠습니다.