[HTML] Form 태그 종류 및 개념정리

1. form

폼의 뜻은 정보를 기입하는 부분이 있는 문서를 뜻한다. 따라서 HTMl에서 form은 사이트의 방문자에게 정보를 수집할 수 있는 태그들이다. HTML에서는 다양한 유형의 태그들로 사용자로부터 정보를 수집한다.

 

form의 동작 방식

(1) 사용자가 폼을 입력한 후 submit하면 정보가 웹서버에 전송된다.

(2) 웹서버는 정보를 처리하고 대부분 정보는 데이터베이스(DB)에 저장된다.

(3) DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.

(4) 서버는 수신한 정보를 브라우저로 보낼 새로운 페이지를 만든다.

 

2. <form>

- <form> 태그에는  action 속성과 method 속성 id 속성을 쓸 수 있다.

 

action

- action="url"의 형태로 쓰이며 폼에 있는 정보를 수신할 서버 페이지의 url을 입력해준다.

 

method

- method에는 정보를 전달(폼을 전송)하는 방식을 입력해 주는데, 이때 방식에는 get 방식과 post 방식이 있다. method 속성을 쓰지 않는다면 기본적으로 get방식이 적용된다.

 

1) get

- 주로 간단한 폼에 사용된다.

- 단순하게 웹 서버로부터 데이터를 조회하는 경우 사용된다.

- url의 정보가 보인다.

- 보내야 할 데이터의 양이 정해져 있다.

 

2) post

- 전송할 데이터가 매우 긴 경우 사용된다 (전달할 수 있는 데이터의 양이 정해져 있지 않기 때문이다.)

- url의 정보가 보이지 않는다.

- 민감한 데이터가 포함된 경우 사용된다.

- 데이터베이스에 정보를 추가하거나 삭제할 경우 사용된다.

 

id

- 같은 페이지에 있는 다른 요소 중에서 폼을 식별하는 데 사용된다. id 속성은 form 뿐만 아니라 모든 HTML 태그들의 속성으로 추가할 수 있다. 따라서 id를 전역 속성이라고도 하는데, 입력해준 요소를 고유하게 식별하는 데 사용된다. 따라서 동일한 페이지에 있는 태그들은 같은 id값을 가지면 안 된다. 

 

3. <input>

- <input>에 다양한 type 값과 속성들을 입력하여 여러 종류의 입력 폼을 만들 수 있다.

 

<input> type

type: "text"

- 텍스트 입력 폼을 만들어진다.

 

type: "password"

- 패스워드 입력 폼이 만들어진다. 패스워드 입력창이기 때문에 입력한 값이 mask처리된다는 게 특징이지만 해당 데이터의 전송이 보안 처리된다는 것은 아니므로 주의해야 한다.

 

type: "radio"

- 라디오 버튼을 입력할 수 있는 폼을 만들 수 있다.

- 라디오 버튼은 여러 옵션 중 하나를 선택할 수 있다는 특징이 있다.

- 라디오 버튼은 취소할 수 있는 기능이 없기 때문에 약관 동의와 같이 사용자가 취소 기능 옵션이 필요한 경우에는 체크박스 타입을 사용한다.

 

type: "check box"

- 여러 옵션을 선택할 수 있는 체크박스 폼을 만들어낸다.

- cheked="cheked"속성을 입력하여 체크 상태가 표시되어 있는 상태로 로드하게 할 수 있다.

 

type: "file"

- 사용자가 업로드할 수 있는 버튼을 만들 수 있다.

 

type: "range"

- 슬라이드 형식의 폼을 만들 수 있다. 

- min과 max로 범위를 설정할 수 있다.

 

type: "email"

- 이메일 형식의 폼을 만 들 수 있다.

- 유효성 검증을 지원하는 브라우저에서는 @를 입력하지 않으면 경고 알림이 출력된다.

 

type: "url"

- url을 입력할 수 있는 폼을 만들 수 있다.

- 유효성 검증을 지원하는 브라우저에서는 올바른 형식의 url을 입력하지 않으면 경고 알림이 출력된다.

 

type: "search"

- 검색할 수 있는 폼을 만들 수 있다.

 

type: "submit"

- 전송 버튼은 폼을 서버에 전송하는 데 사용한다.

 

type: "image"

- 전송 버튼에 이미지를 사용하고 싶을 때 사용된다.

 

type: "date" , type: "time"

- 각각 날짜, 시간을 입력할 수 있는 폼을 만들 수 있게 해 준다.

 

<input> 속성

 

type: 여러 형태의 폼을 만들어 주게 하는 속성이다.

 

name

- 태그의 이름을 정해주는 속성이다. 

- 서버 전송할 때 서버 전송할 때 key 값으로 주기 위해 지정한다.

 

readonly

- 태그를 읽기 전용으로 만들어주는 속성이다.

- 읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트 하거나 복사할 수는 있다.

 

maxlength, minlength

- input 태그에 입력할 수 있는 글자 수의 최댓값, 최솟값을 설정해주는 속성이다.

 

required

- 폼에 반드시 입력값이 있어야 하는 조건을 거는 속성이다.

- -checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url type 속성에 사용할 수 있다.

 

autofocus

-  페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 돼있게 설정하는 속성 값이다.

 

placeholder

- 입력한 값에 대한 힌트를 설정해 줄 수 있는 속성 값이다.

 

pattern

- 정규 표현식을 입력하여 input 요소 값을 검사할 때 사용할 수 있는 속성 값이다.

---

4.  <select>

 

- 셀렉박스를 만들어내어 사용자가 선택할 수 있게 만든다.

- <option> 태그를 사용해서 사용자가 선택할 수 있는 옵션들을 추가할 수 있다.

- selected속성을 사용해서 기본으로 선택되는 옵션을 나타내는 데 사용할 수 있다.(이때 selected속성을 작성하지 않으면 기본 값인 첫 번째 옵션이 로드된다.

- mutiple 속성을 사용하면 option 목록에서 사용자가 하나 이상을 선택할 수 있도록 만들 수 있다. 이때 다중 선택을 하는 방법은 다음과 같다.

- disabled 속성을 사용하면 적용한 option 목록 또는 셀렉박스가 비활성화 된다.

 

1) 윈도: control 누른 상태에서 다중 선택 

2) 맥: command 누른 상태에서 다중 선택 

 

5. <textarea>

 

- 여러 줄의 텍스트를 입력할 수 있는 텍스트 박스가 만들어진다.

- cols 속성을 사용해 문자가 열의 개수를 설정하고 row 속성을 사용해 텍스트 영역이 행의 수를 나타내어 텍스트 영역의 너비와 높이를 제어할 수 있지만, 최근에는 css 사용하여 조절하는 방법이 생겼다.

- 한글과 영어의 글자의 넓이가 다르기 때문에 입력되는 개수 또한 다르다.

 

6. <button>

- 클릭 가능한 버튼을 만들어 낸다.

- type: "submit"을 사용하여 서버로 데이터를 전송할 수 있게 만든다. 따로 지정하지 않을 경우의 기본 값이다. 

- form 양식을 제출하기 위한 용도가 아니라면 type을 선언해 주어야 한다.

- reset: type: "reset"을 사용하여 form의 모든 값을 초기화해줄 수 있다.

 

1) input for의 button type과 차이점:

- <button> 요소가 <input> 요소에 비해 스타일링 적용이 쉬운 편이다. input 태그는 닫기 태그가 없기 때문에 자식 요소를 작성할 수 없지만, button은 내부에 자식 요소들을 추가할 수 있기 때문이다. 또한 가상 요소를 사용하는 것도 가능하다.

 

7.  <label>

- input 태그를 설명하는 텍스트임과 동시에 시각 장애인들이 폼을 사용할 수 있도록 도움을 준다.

- 두 가지 방법으로 사용된다.

- for 속성 값은 레이블이 속할 폼의 id와 같아야 한다.

 

See the Pen Untitled by Hun-Se (@hun-se) on CodePen.

 

8. <fieldset> / <legend>

 

-  자식 요소로 사용되는 폼 컨트롤들을 그룹화할 수 있게 한다.

- 폼 내용이 방대하여 섹션별로 나눌 필요성이 있는 경우 사용된다.

- <legend>는 <fieldset> 태그 바로 뒤에 위치하고 폼 그룹의 목적을 나타내는 제목을 의미한다. 반드시 fieldset의 첫 번째 자식으로 사용해야 한다.

 

9. <datalist>

- <select>과 <input>을 섞어서 사용할 수 있는 폼을 만들어준다.

- <input>의 list 속성을 사용해서 <datalist>의 id속성과 연결해서 사용한다.