[HTML] 웹페이지에 빠질 수 없는 태그?! form태그 알아보기

안녕하세요, 오늘은 form 관련 태그에 대해 알아볼게요.

form 태그는 모든 웹사이트에 들어간다고 해도 과언이 아닐 만큼 필수적인 요소입니다.
바로 로그인과 회원가입, 주문 페이지 등에 들어가는 태그이기 때문이죠.
프로젝트에도 바로 적용시킬 수 있는 코드이니 집중!! 🚀

---

먼저, form이란 백엔드나 다른 페이지에 요청을 보낼 수 있는 태그예요.
form 태그 안에 담긴 데이터들도 함께 보낼 수 있습니다.
데이터는 어떻게 담냐고요??
form 관련 태그들을 이용하여 사용자가 값을 입력하도록 하는 창을 만들고,
그 창에 입력된 값들을 form 태그가 가지고 있다가 요청을 보낼 때 같이 보내지게 돼요.

간단하게, 아이디를 입력하여 로그인을 하는 form 태그를 한 번 살펴보면서 개념을 설명해드릴게요.

🔍form 태그의 기본 예시

<form action="/user/login" method="post">
    <label>아이디
        <input type="text">
    </label>
    <label>비밀번호
        <input type="password">
    </label>
</form>

➡️위 코드에서 사용된 태그는 총 세 개예요.

• form
• label
• input

지금부터 이 세 개의 태그와 그에 대한 속성값들을 알아보며 위 코드를 이해해볼게요.

---

📄 form 태그

form 태그를 이용해서 요청을 보낼 수 있다고 말씀드렸는데요.
요청을 어떻게 보낼지는 form 태그의 속성값을 통해 지정해요.

• action: form 태그가 요청을 보낼 곳을 지정하는 속성 값이에요.
  위 코드에선 사용자가 텍스트 창에 입력한 값을 가지고 "/user/login"로 이동하게 돼요.

• method: 요청을 보내는 방식을 지정해요. form 태그에서는 post 방식과 get 방식으로 이루어져 있어요.
  post는 이동하는 URL에 정보가 노출되지 않으며, get 방식은 정보가 노출돼요.
  보통 개인정보 노출 우려가 중요한 정보들은 대부분 post 방식을 이용합니다.

🏷️ label 태그

form 태그 안에 제목을 달아주는 태그예요.
창만 생성된다면 사용자가 무엇을 입력하는 창인지 모르기 때문에
위 코드에서는 '아이디'와 '비밀번호' label 태그를 달아주어 무엇을 입력하는 필드인지 명시해주었어요.

⌨️ input 태그

form 태그에서 사용자가 값을 입력하도록 하는 것이 바로 이 input 태그입니다.
어떤 형태로 사용자에게 값을 입력받을지는 다양한 type 속성을 통해 지정하죠.
위 코드에서는 아이디 값은 text 타입으로 필드를 생성해주었고
비밀번호는 password 타입으로 정보 노출의 우려를 줄이며 필드를 생성해주었어요.
type 속성에 관한 자세한 설명은 아래와 같아요.

input 태그의 type 속성 유형

• hidden: 화면에서 보이지 않게 데이터를 전송할 때 사용돼요.
  보통 특정 데이터를 숨기고 싶을 때 사용됩니다.
• text: 한 줄짜리 텍스트를 입력할 수 있는 창을 생성해요.
• tel: 전화번호를 입력하는 창 생성.
• url: URL 주소를 입력하는 창 생성.
• email: 이메일 주소를 입력하는 창 생성.
• password: 비밀번호를 입력하는 창 생성. 입력한 값이 *로 표출됩니다.
• checkbox, radio: 중복 선택이 가능한 checkbox 또는 중복 선택이 불가한 radio 버튼 생성.
• submit: form 태그의 action 값에 지정되어 있는 URL로 요청을 보내는 버튼.
  form 태그 안에 있는 데이터들도 함께 전송
• reset: 폼에 입력되어 있는 내용을 초기화하는 버튼 생성. ex) 다시 작성하기 버튼

💡Tip: checkbox나 radio 속성을 사용할 때 label 태그를 함께 이용하면 효용성이 올라가요.
원래는 버튼 부분을 클릭해야 하지만 label 태그를 이용하면
label 태그에 입력된 텍스트를 클릭해도 버튼이 클릭돼요.


❗그리고 input 태그에서는 type 속성 외에 id 속성이 존재해요❗
id 값은 form 태그가 요청을 보내는 곳에서 사용하게 되는데요.
쉽게 말하자면 form 안에 담긴 각각의 데이터들에게 이름을 주는 것이에요.
위 코드에서 비밀번호를 입력받는 필드에 id 속성을 추가해볼게요.

<label>비밀번호
        <input type="password" id="userpassword">
</label>

➡️이렇게 코드를 수정하고 요청을 보내면 사용자가 비밀번호를 입력하는 필드에 입력된 값은
userpassword의 이름을 가지고 요청이 보내지게 되죠.

---

오늘은 기본적인 코드를 먼저 예시로 보여준 다음에 각 태그와 속성들에 대해 하나씩 설명해보았는데요.
어떠신가요?! 속성값들이 많아서 하나하나 실습을 해보진 못했어요.
직접 다른 속성들도 작성을 해보면서 이해해나가면 좋을 것 같습니다!
눈으로 보며 코드를 이해하는 것보다 직접 타이핑하며 이해해 나가는 것이 중요해요.
그럼 다음 시간에는 input 태그에 대한 추가적인 설명과 HTML 총정리를 하며 HTML을 끝내겠습니다!!