프론트엔드/HTML

HTML 폼 기본 문법 정리 (1)

진기명기 2022. 12. 9. 20:00

 

HTML 폼 기본 문법

 

* <form> : 사용자가 작성한 정보를 전달할 때 사용 (ex. 회원가입, 로그인, 설문조사 등)

   → 체크박스, 라디오, 날짜, 시간, 버튼까지 모두 폼에 해당

 

* <form> 사용 시 기본 문법

  - name : 전체 form에서 input이 어떤 역할을 하는지 구분 (name 값은 겹쳐도 됨)

  - id : label 태그를 사용할 때, 어떤 input을 나타내는지 구분 (id 값은 겹치면 안 됨)

  - action : 정보를 최종적으로 전달하는 목적지

  - method는 POST / GET으로 구분. 

   → POST 메서드 : 대부분 POST 메서드로 만들며, 주소창에 값이 뜨지 않음

   → GET 메서드 : 입력한 데이터가 주소창에 뜨며, 단순한 검색창일 때 사용

 

 * <label>과 <input>

   - label은 사용자가 화면을 볼 때, input이 어떤 내용을 받으려는지 쉽게 알게 하기 위해 사용

   - input의 유일한 id 값을 지정하여, label for에 지정. label이 어떤 input을 가리키는지 id 값을 넣어 구분

   - label 사용 문법 2가지 

      +a : 추가로 주소창에 이름과 나이 name 값이 나온 것을 볼 수 있다.

 

* <fieldset> : 여러 컨트롤과 <label>을 그룹화할 때 사용

  → form에 테두리가 생성, legend를 사용하면 form의 제목이 생성

  ※ fieldset이 부모이고, 첫 번째 자식으로 무조건 legend가 나와야 한다.