HTML 양식을 만드는 방법(예제 설명)

양식은 연락처 정보와 같은 사용자로부터 데이터를 수집하거나 사용자가 댓글을 게시하거나 검색을 수행하는 등 웹 사이트와 상호 작용할 수 있도록 하는 데 사용됩니다. 이 기사에서는 HTML을 사용하여 기본 양식을 작성하는 방법을 배웁니다.

HTML 양식의 구조

태그를 사용하여 HTML 양식이 생성됩니다.. 이 태그 내에는 텍스트 필드, 버튼, 확인란, 라디오 버튼 등과 같은 다양한 입력 요소가 있을 수 있습니다.

입력 요소는 여기로 이동

입력 요소

텍스트 필드

텍스트 필드는 태그를 사용하여 생성됩니다. 속성으로 유형 에 누워 텍스트. 예를 들어:

이름:




핸드폰

요소 전화 번호 입력 필드에 사용됩니다.

핸드폰:


날짜

요소 날짜를 선택할 때 사용합니다.

생일:


비밀번호

요소 암호 입력 필드에 사용됩니다. 이 필드에 입력한 텍스트는 암호를 숨기기 위해 점으로 표시됩니다.

비밀번호:


보관소

요소 사용자가 로컬 파일 시스템에서 파일을 선택할 수 있도록 하는 데 사용됩니다.

파일 업로드:


확인란

요소 사용자가 없음, 하나 또는 여러 옵션을 선택할 수 있는 입력 필드에 사용됩니다.

나는 이용 약관에 동의합니다

라디오

요소 사용자가 옵션 세트에서 하나의 옵션을 선택할 수 있도록 하는 입력 필드에 사용됩니다.

성별:

남성

여성

숫자

요소 숫자 입력 필드에 사용됩니다.

양:


범위

요소 값 범위의 값을 포함해야 하는 입력 필드에 사용됩니다.

용량:




버튼

버튼은 태그를 사용하여 생성됩니다. 속성으로 유형 에 누워 제출하다. 이 버튼을 누르면 양식 데이터가 제출됩니다. 예를 들어:

이름:




양식 입력 처리

제출 버튼을 누르면 양식 데이터가 처리를 위해 제출됩니다. 이것은 속성을 사용하여 지정되는 GET 또는 POST의 두 가지 방법 중 하나를 통해 수행됩니다. 방법 레이블에서 .

GET 방식

GET 메서드는 양식 데이터를 URL의 일부로 제출합니다. 양식 데이터가 민감하지 않은 검색과 같은 작업에 유용합니다. 그러나 이 방법은 전송할 수 있는 데이터 길이에 제한이 있습니다.

입력 요소는 여기로 이동

POST 방식

POST 메서드는 URL과 별도로 양식 데이터를 제출합니다. 이것은 더 안전하고 훨씬 더 많은 양의 데이터를 처리할 수 있으므로 연락처 또는 로그인 양식 제출과 같은 작업에 사용됩니다.

입력 요소는 여기로 이동

두 경우 모두 속성 행동 양식 데이터를 처리할 서버 측 스크립트의 URL을 지정하는 데 사용됩니다.

모든 요소가 포함된 HTML 양식 예제 

다음은 이 문서에서 검토한 모든 요소를 ​​사용하는 양식입니다.

등록 양식

이름:



성:



이메일:



핸드폰:



생일:



비밀번호:



파일 업로드:



나는 이용 약관에 동의합니다


성별:

남성

여성

양:



용량:




이 양식에는 이름, 성, 이메일, 전화번호, 생년월일, 비밀번호, 파일, 이용약관 체크박스, 성별 선택을 위한 라디오, 수량 및 수량에 대한 숫자 및 범위 필드, 각기.

끝에 있는 "제출" 버튼은 속성에 지정된 URL로 양식을 제출하는 역할을 합니다. 행동 라벨의 모양 (이 경우 "/submit_form"). 이 양식이 실제 웹사이트에서 작동하려면 "/submit_form" 경로에서 이 양식의 정보를 수신하고 처리하도록 구성된 서버가 있어야 합니다.