form 관련 요소 정리 / form, fieldset, input, lnput

form

정보를 제풀하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냄.

- input과 같이 입력 받는 요소들을 묶어서 표현.

- <input action=""> : 데이터를 보낼 주소값 입력 / post, get,, dialog

- <button type="submit"> : 버튼을 통해서 제출

- <label for=""> : input의 설명을 넣어주며, id를 통해서 연결하여 구분한다.

 

fieldset

웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용한다.

- 여러 label이 있을 때 <fieldset>을 통해서 그룹으로 묶을 수 있다.

- block 요소이다.

- legend : fieldset의 자식 요소로만 사용할 수 있으며, 설명을 입력할 수 있다.

- disabled 를 사용하면 입력하지 못하게 할 수 있다.

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

 

---

input

- 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 입력 요소이다.

- disabled 를 사용하면 입력하지 못하게 할 수 있다.

- type=""에 따라서 기능이 달라진다.

- 속성도 type마다 달라지는 것들이 있다. 

● type = "text"

- minlength = 최소 텍스트

- maxlength = 최대 텍스트

 

● type = "password"

- minlength = 최소 텍스트

- maxlength = 최대 텍스트

 

● type = "email"

- minlength = 최소 텍스트

- maxlength = 최대 텍스트

 

● type = "TEL"

- 모바일에서 입력하게 될때 숫자키패드가 나오게 된다.

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

● type = "number"

- 숫자 입력

 

● type = "range"

- 범위를 컨트롤 하는 위젯

 

● type = "date"

- 날짜

 

● type = "month"

- 년, 월만 선택

- week, time / 주, 시간을 선택하는 속성도 있다.

 

● type = "submit"

- 제출

- value="" 버튼에 나오는 문자를 수정

 

● type = "reset"

- 초기화

 

● type = "checkbox"

- 체크박스에 name을 입력해서 전달값을 입력

- checked를 속성에 넣게 되면 미리 체크되어 있음

 

● type = "radio"

- 여러 radio가 같이 들어가게 되면 name이 아닌 value=""로 다르게 설정

- checked를 속성에 넣게 되면 미리 체크되어 있음

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

● placeholder

- 입력이 안되어 있을 때 예시로 나오는 문자 입력

 

● autocomplete

- on, off로 지정

- 입력값 자동 완성 기능

 

● required

- 입력을 했는지 확인할 수 있는 기능(필수 기능 지정)

 

● disabled

- 입력 및 전송을 할 수 없게

- 비활성화로 지정

 

● readonly

- 포커싱은 되지만 입력하지 못함

- 입력만 할 수 없게

- default값을 지정해서 수정할 수 없게 하는!?

 

● min, max

- 최소, 최대값으로 number, lange속성에 사용하여 지정

 

● step

- step="2" number, lange속성에서 2씩 수정

- step= "3" number, lange속성에서 3씩 수정