HTML 폼 관련 요소

 

 

 

form : 값을 입력하고 제출하는데 사용되는 요소

   > 다른 요소들과는 다르게, 값을 입력받고 정보를 전달하는데 사용되는 요소

   > 회원가입, 설문조사, 주문서 등을 만들때 사용된다.

 

   - action 속성 : 목적지 주소, 양식 데이터를 해당 URL 로 전송하여 이동한다.

   - method 속성 : 전송 타입

      > GET : 양식 데이터를 url에 첨부하여 전송한다.

         데이터가 url 상으로 보이기 때문에 비밀번호 등의 중요정보가 포함되는경우 사용하면 안된다. 

      > POST : 양식 데이터를 요청 본문으로 전송한다.

         공개하면 안되는 중요 정보를 처리할때 사용한다. 

 

input : form 내에서 입력을 처리하는 태그

   - type 속성을 사용하여 형태를 지정한다

      - text : 텍스트 값을 입력하는 속성

         > minlength, maxlength 속성을 사용하여 최대 입력글자, 최소 입력글자를 지정할 수 있다.

         > email, tel 등의 특정 목적을 가진 text type이 따로 존재한다.

      - password : 텍스트를 입력하지만, 값이 마스킹 처리되어 가려진다.

      - number : 숫자를 입력하는 폼을 제공한다.

         > min,max 속성으로 최소/최대 값을 지정할 수 있으며, step을 통해 한번에 증감하는 숫자를 지정할 수 있다.

      - range : 범위를 지정하는 슬라이드 바를 만들 수 있다.

         > min / max 속성으로 최소/최대 값을 지정할 수 있다 ( 기본값은 min = 0, max = 100 )

         > step 속성을 통해 한번에 변화되는 숫자 폭을 지정할 수 있다.

      - date / month / week / time : 시간을 설정할 수 있다.

      - checkbox : 체크박스, name 속성을 사용하여 한가지만 체크할 수 있는 체크박스 그룹을 만들수도 있다.

      - radio : 라디오버튼, name 속성을 사용하여 하나만 선택할 수 있는 라디오 그룹을 만들수도 있다.

      - button : 버튼, 입력하는데 사용되지는 않는다.

      - reset : 초기화 버튼, 입력 값을 초기화한다.

      - submit : 제출, 양식 데이터를 action으로 지정된 URL로 보낸다.

         그 외 다양한 type 값이 존재한다.

 

   - placeholder 속성 : 어떤 값을 입력할 지 안내해주는 가이드라인을 알려준다.

   - autocomplete 속성 : 기존 입력값을 바탕으로 자동완성 기능을 제공한다. off로 설정시 자동완성 기능을 사용할 수 없다.

   - required 속성 : 해당 속성이 있는 input 태그는 submit을 클릭하기 전 반드시 채워져있어야 한다.

   - disabled 속성 : 해당 태그를 비활성화 시킨다. submit 시 값이 전송되지 않으며, 드래그나 복사도 허용하지 않는다.

   - readonly 속성 : 읽기 전용 속성, 값을 입력할수는 없지만 submit시 값이 전송되며, 드래그나 복사 또한 할 수 있다.

   - list 속성 : 지정된 리스트를 선택할 수 있는 폼을 제공하며, 직접 값을 입력할 수도 있다.

      > datalist : list 폼에 추천해줄 목록들을 지정하는 태그, option 태그로 목록을 지정한다.

   

 

button : 버튼, <input type="submit"/> 과 동일하다.

   > type="submit" 을 추가할 수도 있으며, type="button"을 통해 <input type="button"/>과 동일하게 사용할 수 있다.

   > Input은 type에 따라 value값을 지정해주지만 button은 자식요소에 텍스트를 입력해주어야 한다.

   > button 태그는 input 태그와 다르게 글자 스타일을 적용하기가 수월하다.

   > button 태그에 아이콘이나 이미지를 넣을 수 있지만, 접근성을 위해 텍스트도 같이 넣는것이 좋다.

 

label : 입력 값 앞 또는 위에 텍스트를 첨부할 때 사용하는 태그

   > for 속성을 통해 input과 연결시킬 수 있다.

      - for="연결하고자 하는 태그의 id" 를 추가하여 사용한다.

   > label 태그 내부에 input을 넣는다면 id를 추가하지 않아도 된다.

 

select : 여러 값의 옵션 중 하나를 선택하게 하는 태그

   - option 태그 : select 내의 후보군을 표시하는 태그, select 태그 안에 하나 이상 존재해야 한다.

      > 제출할 때 선택된 option 태그의 value 값을 전달한다.

      > selected 속성으로 기본 값을 지정할 수도 있다.

 

textarea : 여러 줄의 텍스트를 입력할 수 있는 태그

   > 내부에 미리 값을 입력할 수 있다. 태그 내부에 입력된 값은 pre 태그와 같이 적용된다.

   > rows와 cols 로 입력 가능한 행과 열의 개수를 지정할 수 있다.

 

fieldset : 여러 컨트롤과 label을 묶을 때 사용된다.

   - legend 태그 : 범례, fieldset의 설명을 나타내며, fieldset 태그의 첫번째 자식으로만 사용해야 한다.

   > 스타일적인 측면에서 좋다

   > fieldset 태그에 disabled 속성을 사용하여 묶여있는 input 을 한번에 비활성화 시킬 수 있다.