HTML5 웹 페이지의 양식 구조 태그 사용 - 처음부터 인형

처음부터 웹 페이지는 사용자로부터 데이터를 수집 할 수있는 기능을 가지고있었습니다. HTML5는 표준이지만 매우 유용한 양식 요소 세트를 사용하여 입력을 얻을 수 있습니다. 이 양식 요소는 다른 태그와 동일한 규칙을 많이 따릅니다.

이 그림은 발생할 수있는 모든 주요 HTML 양식 요소를 포함하는 양식을 보여줍니다.

양식의 일반 구조를 관리하는 데 사용하는 태그는 다음과 같습니다.

• : 이 태그는 실제 양식을 포함합니다. 다른 모든 폼 요소를 둘러 쌉니다. 태그에는 action = "속성도 포함되어야합니다. 이는 양식을 제출할 때 서버 측 스크립트를 호출 할 계획이 없음을 나타냅니다.

• : 이 특수 태그를 사용하여 일련의 입력 요소를 그룹화 할 수 있습니다. 필수는 아니지만 복잡한 양식을 더 쉽게 탐색 할 수 있습니다. 기본적으로 필드 세트에는 경계선이 하나 있지만 CSS로이를 변경할 수 있습니다.

• : 필드 세트에 범례를 추가하여 전체 필드 세트의 레이블 역할을 할 수 있습니다.

• : 이것은 텍스트를 특정 입력 요소와 연관된 레이블로 표시합니다. optional for 속성을 사용하여 라벨이 연결된 입력 요소를 지정할 수 있습니다. 레이블 태그는 일반적으로 양식의 CSS 스타일링을보다 쉽게 ​​관리하는 데 사용됩니다.

그림에 표시된 모든 구조 태그를 사용하는 페이지의 코드는 다음과 같이 실행됩니다.

formDemo. html

텍스트 데모
텍스트 입력
텍스트 상자
비밀번호
텍스트 영역 여기에 텍스트
요소 선택
선택 1 2 3 4 선택
확인란 녹색 달걀 햄
라디오 버튼 작은 보통 큰
버튼
표준 버튼

fieldset, legend 및 label 태그는 필수는 아니지만 페이지 구성을 도와 CSS로 쉽게 배치 할 수 있습니다. 이러한 태그와 CSS를 올바르게 사용하면 이전 테이블 기반 해킹보다 훨씬 쉽게 작업 할 수 있습니다.