[02-3] HTML 필수태그 정리 3: 폼태그

 

 

폼태그란 웹 페이지에서의 입력 양식을 말합니다. 우리가 평소 로그인할 때 아이디와 패스워드를 기입하는 용도로 쓰이죠. 사용자가 기입한 정보를 백엔드서버로 전송해주는 역할을 합니다. 다양한 폼태그들을 사진과 함께 어떻게 사용되는지 확인해봅시다!

 

 

---

 

폼태그

---

 

01. 폼태그 속성

폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다.

 

• name: 폼의 이름을 지정합니다.
• action: 폼 데이터가 전송되는 백엔드 url을 지정합니다.
• method: 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST)
• target: action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다.
• accept-charset: 폼 전송에 사용할 문자 인코딩을 지정합니다.

 

 

https://www.w3schools.com/tags/ref_httpmethods.asp

method에서 GET과 POST의 차이점은 이 사이트에서 자세하게 설명이 되어 있으니 참고바랍니다.

 

 

<form>폼태그는 전체양식을 의미하며 화면에는 보이지 않는 태그입니다. 사용자가 입력하기 위해서 눈에 보이는 태그는 <input> 태그가 있습니다. <input>태그에 대해서 하나씩 알아보도록 합시다.

 

 

 

02. <input>태그

<input>태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다. 다양한 속성들이 있고 자주 사용되니 알아두면 좋을 거 같습니다. 아래에 자주 사용되는 속성들을 정리했습니다.

 

<input> 속성

• type: 태그 모양을 다양하게 변경할 수 있습니다.
• name: 데이터의 이름을 지정합니다.
• value: 기본값을 지정합니다.
• maxlength: 최대 글자 수를 지정합니다.
• placeholder: 입력할 값에 대한 힌트를 줍니다.

 

type 종류

종류	설명
text	문자를 입력할 수 있습니다.
password	패스워드를 입력할 수 있습니다.
checkbox	여러개를 선택할 수 있는 컴포넌트를 형성합니다.
radio	한 가지만 선택할 수 있는 컴포넌트를 형성합니다.
file	파일을 첨부할 수 있습니다.
color	색상을 정할 수 있습니다.
date	날짜를 정할 수 있습니다.
reset	입력한 양식을 초기화할 수 있습니다.
submit	입력한 양식을 전송합니다.

 

 

계속 글로 살펴보니 재미가 없을겁니다. 이미지를 통해 하나씩 설명하겠습니다.

 

 

type="text"

참고로 <label>은 <input>값의 이름을 지정해주는 용도로 쓰입니다. id="값"과 동일하게 적어주면 됩니다.

 

type="checkbox"

 

type="radio"

 

 

[checkbox vs radio]

여기서 잠깐! checkbox와 radio의 차이점이 무엇일까요? 모양이 다르다일 수도 있지만 checkbox는 여러 항목을 선택할 수 있지만 radio는 한 가지만 선택할 수 있다는 것입니다. 그래서 radio같은 경우 뒤에 name값을 동일하게 지정해줘야 여러 항목이 체크되는 오류를 막을 수 있습니다. name="네임값" 이라고 입력하면 됩니다. 저 같은 경우 name값에 'car'를 넣어줬습니다.

 

 

 

type="file"

 

 

type="color"

 

 

type="date"

 

 

type="reset"

 

 

type="submit"

 

---

 

 

03. 드롭다운 태그: Select, Option

<select>와 <option>은 드롭다운 리스트를 만드는 태그입니다. <select>하위 태그로 <option>태그가 사용됩니다. <select>태그의 속성중 size는 한 번에 표시할 항목 수를 정할 수 있고, multiple은 다중선택을 허용할 것인지 지정할 수 있게 하는 속성입니다. 사진으로 어떻게 사용되는지 확인해봅시다.

 

 

 

04. textarea

<textarea>는 여러 줄을 입력받는 태그입니다. 속성 중 rows는 줄을, cols는 한 줄에 입력될 크기를 지정합니다. 

 

 

 

---

 

 

 

 

이 외에도 여러 태그들이 존재합니다. HTML5에서 새로 추가된 태그들도 있으니 추가로 필요한 것이 있으면 확인해봐도 좋을 거 같습니다! 다음 포스팅에서는 웹 페이지에 어떻게 사진, 영상, 음악같은 미디어 파일을 보여줄 수 있는지 알아보도록 하겠습니다.