HTML 폼 기본 문법 정리 (2)

 

HTML 폼 기본 문법 

 

* input 종류

 

① text : 문자열 입력

② password : 화면에 개인정보 보호 차원으로 동그라미 표시로 나타남

③ email : 이메일 형식으로 작성 유도

④ tel : 웹 브라우저에서는 숫자로 입력하지 않아도 따로 오류가 뜨지 않음, But 모바일에서는 전화 형식으로 작성 유도

⑤ number : 숫자 입력 or 화면에 화살표를 눌러 숫자 업/다운을 할 수 있음

⑥ range : 범위를 나타내는 버튼이 생성, 값은 숫자로 전달

⑦ date : 달력 생성 or 연월일 작성 가능한 화면 생성

⑧ month : 달력 생성 or 연월만 작성 가능한 화면 생성

⑨ time : 시분초 작성 or 시간 작성 가능한 표 생성

⑩ submit : 제출 버튼 생성, 기본값 : "제출" (value 속성을 사용하여, 안에 버튼 내용 따로 지정 가능)

㉮ button : 빈 버튼이지만, 나중에 javascript를 사용하여 기능을 넣는 데 사용

㉯ reset : 사용자가 작성한 정보를 전부 초기화할 때 사용, 기본값 : "초기화" (value 속성을 사용하여, 안에 버튼 내용 따로 지정 가능)

㉰ checkbox : 체크 가능한 네모 박스 생성, checked 속성을 사용하여 선택된 상태로 나타나게 할 수 있음

㉱ radio : 선택 가능한 동그란 버튼 생성, 마찬가지로 checked 속성 사용 가능함

 

※ input과 button의 차이

 

* input과 button 모두 reset / submit / button 모두 사용 가능

  → input의 경우, 자동으로 버튼 내용이 작성되며, value를 사용하여 텍스트 값만 지정 가능. 자식 요소를 가질 수 x. 즉, 스타일링이 불가능

  → button의 경우, 빈버튼이지만 자식을 가질 수 있음. 즉, 스타일링이 가능 (but button의 경우 부모의 색깔을 물려받지 못함)

 

  ex) input type을 이용해서 버튼 사용

  → reset과 submit은 작동이 되지만, button은 아무런 반응이 없음

 

  ex) button을 이용해서 버튼 사용

  → reset과 submit은 작동이 되지만, button은 아무런 반응이 없음

  → 버튼! 초기화! 제출! 이 자식에 해당 

 

==> type = "button"으로 들어간 경우에는 form이 정상적으로 넘어가지 않는다. 

 

* input의 속성

 

① name : 전체 form에서 해당 input이 어떤 역할을 하는지 구분

② placeholder : 사용자에게 어떤 형식으로 작성하는지 힌트식으로 보여줌 (화면에 희미한 글자색으로 표시)

③ autocomplete : on/off로 지정. on으로 할 경우, 전에 기록한 값을 자동완성으로 아래 표시해서 보여줌

④ required : 내용을 입력하지 않은 경우, 제출되지 않음

⑤ disabled : 입력창을 닫아버릴 때 사용, input 자체가 인식되지 않아, 아예 없는 것으로 취급

⑥ readonly : 커서를 올려도 내용을 작성할 수 없고, 기본으로 내용을 지정해서 화면에 띄울 수 있음

⑦ min, max : 최솟값과 최댓값을 지정하여 화면으로 보여줌

⑧ step : 숫자 올림/내림시, 건널 뛸 수 있는 수를 지정 (ex. 짝수, 홀수로 지정해서 나타낼 때)

 

 

* <select> 요소

 

  → input과 마찬가지로 하나의 태그로 사용, id와 name 사용

  → option이 무조건 1개 이상 있어야 하고, 화면에서 선택지로 보임

      ☆ option value를 사용하면, 서버로 보내질 때는 지정한 값으로 보내짐

           즉, 사용자가 보는 내용 '짱구', 서버에 전달되는 값은 'jjanggu'

  → optgroup은 선택지를 테마별로 구분하고 싶을 때 사용

 

      ☆ option value = ""를 지정하여, "골라보세요."를 넣고, select에 required를 넣으면

           아무것도 지정하지 않고, 골라보세요로 놓고 제출을 할 경우, 경고창이 뜬다.

 

 

      ☆ option selected를 할 경우, checked와 비슷하게 새로고침 시 가장 먼저 보이고 싶게 하는 후보를 지정할 수 있음

 

 

* <datalist>

  → input의 list 속성과 같이 사용되는 요소

  → select와 비슷하지만 다른 점은 커서를 올리면 수정이 가능하다는 점!

   ※ optgroup이나 value 등은 사용해도 적용되지 x

 

* <textarea>

  → input의 text와 비슷하지만, 입력창 크기를 조절할 수 있음

  → rows와 cols를 사용하여 입력창 가로/세로 조절