HTML 양식에 대한 자세한 소개

HTML 양식은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다. 여러 가지 새로운 양식 입력 유형을 갖춘 HTML5 입력은 더 나은 입력 제어 및 유효성 검사를 제공합니다.

양식

편집

양식은 양식 요소를 포함하는 영역입니다.

양식 요소는 사용자가 양식에 정보를 입력할 수 있는 요소(예: 텍스트 필드, 드롭다운 목록, 라디오 버튼, 확인란 등)입니다.

양식은 양식 태그(

)를 사용하여 정의됩니다.

입력 유형

편집

HTML5에는 몇 가지 새로운 양식 입력 유형이 있습니다. 이러한 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.

1.입력 유형 - email

email 유형은 이메일 주소가 포함되어야 하는 입력 필드에 사용됩니다. 양식을 제출하면 이메일 필드의 값이 자동으로 확인됩니다.

2.입력 유형 - url

url 유형은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다. 양식을 제출하면 URL 필드의 값이 자동으로 확인됩니다.

3.입력 유형 - 숫자

숫자 유형은 숫자 값을 포함해야 하는 입력 필드에 사용됩니다. 허용되는 숫자에 제한을 설정할 수도 있습니다.

4.입력 유형 - 범위

범위 유형은 특정 숫자를 입력해야 할 때 사용됩니다. 범위 내의 숫자 값에 대한 입력 필드가 포함됩니다.

범위 유형은 슬라이더로 표시됩니다.

허용되는 숫자에 제한을 설정할 수도 있습니다.

5.입력 유형 - 날짜 선택기(데이터 검사기)

HTML5에는 날짜 및 시간 선택을 위한 여러 가지 새로운 입력 유형이 있습니다.

date - 일, 월, 연도 선택

month - 월, 연도 선택

week - 주 및 연도 선택 year

time - 시간(시, 분) 선택

datetime - 시간, 일, 월, 연도(UTC 시간) 선택

datetime- 현지 - 시간, 일, 월, 연도 선택(현지 시간)

6.입력 유형 - 검색

검색 유형이 사용됨 검색 사이트 검색이나 Google 검색과 같은 도메인입니다.

검색 필드가 일반 텍스트 필드로 나타납니다.

입력

편집

대부분의 경우에 사용되는 양식 태그는 입력 태그( ). 입력 유형은 유형 속성 (유형)으로 정의됩니다. 가장 일반적으로 사용되는 입력 유형은 다음과 같습니다.

텍스트 필드

텍스트는 사용자가 양식 필드(텍스트 필드)에 문자, 숫자 등을 입력하려고 할 때 사용됩니다. ).

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

브라우저에 다음이 표시됩니다.

양식 자체는 표시되지 않습니다. 또한 대부분의 브라우저에서 텍스트 필드의 기본 너비는 20자입니다.

라디오 버튼은 사용자가 주어진 여러 선택 사항 중 하나를 선택할 때 사용됩니다.

<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>

브라우저에 다음과 같이 표시됩니다.

Male
Female

둘 중 하나만 선택할 수 있습니다.

그림과 같이

체크박스

사용자가 여러 항목 중에서 선택해야 하는 경우 주어진 선택사항 하나 또는 여러 개의 옵션을 선택할 때 체크박스가 사용됩니다.

<form>
<input type="checkbox" name="bike" />I have a bike
<br />
<input type="checkbox" name="car" />I have a car
</form>

브라우저에 다음과 같이 표시됩니다.

I have a bike
I have a car

기타 구성 요소

편집

확인버튼

사용자가 확인 버튼(제출)을 클릭하면 양식의 내용이 다른 파일로 전송됩니다. [1]

액션 속성

양식의 액션 속성(action)은 대상 파일의 파일 이름을 정의합니다. action 속성으로 정의된 파일은 일반적으로 수신된 입력 데이터에 대해 관련 처리를 수행합니다.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

브라우저에 다음과 같이 표시됩니다.

사용자 이름:

아래 그림과 같습니다.

위의 텍스트 상자에 몇 글자를 입력하고 확인 버튼을 클릭하면 입력 데이터가 "html_form_action.asp"라는 페이지로 전송됩니다. 해당 페이지에 입력 결과가 표시됩니다.

양식 태그

[관련 추천]

HTML 무료 동영상 튜토리얼

2. 양식의 작업과정에 대한 자세한 설명

3. 양식 태그의 메소드 속성에 대한 자세한 설명

4. HTML의 테이블 및 양식 양식을 익히세요.

5. HTML 양식의 매개변수 및 속성에 대한 자세한 설명

위 내용은 HTML 양식에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!