지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML 양식 및 입력 텍스트 상자

黄舟
풀어 주다： 2016-12-22 14:41:26
원래의
3011명이 탐색했습니다.

HTML 양식은 사용자가 입력한 다양한 유형의 정보를 수집하는 데 사용됩니다.

1) 예

텍스트 필드
이 예는 HTML 페이지에서 텍스트 필드를 만드는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다.

비밀번호 상자
이 예는 HTML 페이지에 비밀번호 입력 상자를 만드는 방법을 보여줍니다.

(이 기사 뒷부분에 더 많은 예제가 제공됩니다.)

2) 양식

양식은 양식 내의 다양한 요소를 포함하는 양식 필드입니다.

양식 필드 내의 양식 요소를 통해 사용자는 관련 정보(예: 텍스트 입력 상자, 텍스트 영역, 드롭다운 목록, 라디오 버튼, 확인 버튼 등)를 입력할 수 있습니다.

양식은

태그로 정의됩니다.





양식에서 가장 일반적으로 사용되는 태그는 입력 태그인 입니다. 입력 유형은 속성 유형에 따라 지정됩니다. 가장 일반적으로 사용되는 입력 유형은 다음과 같습니다(4~6 참조).

4) 텍스트 필드

사용자가 양식에 문자, 숫자 등을 입력해야 하는 경우 텍스트 필드를 사용해야 합니다.

이름:


성:






위 코드 실행 결과:

참고: 양식 자체는 표시되지 않으며 대부분의 브라우저에서 텍스트 필드에 입력할 수 있는 기본 문자 수는 20자입니다.

5) 라디오 버튼

라디오 버튼은 제한된 옵션 중에서 하나의 항목을 선택할 수 있는 대화형 입구를 사용자에게 제공하는 데 사용됩니다.

value="male">남성


value="female">여성




위 코드 실행 결과:

옵션 중 하나만 선택할 수 있으니 참고하세요.

6) 체크박스

체크박스는 사용자에게 제한된 옵션 내에서 여러 항목을 선택할 수 있는 대화형 입구를 제공하는 데 사용됩니다.

자전거가 있습니다:

name="vehicle"

value="Bike" /> ;



저는 자동차를 가지고 있습니다:
name="vehicle"
value="Car" />


항공기가 있습니다:
name="vehicle"
value="Airplane"/>
< /form>



위 코드의 실행 결과:

7) 폼의 Action 속성과 Submit 버튼(Submit 버튼)

사용자가 클릭할 때 양식에서 양식 제출 버튼("제출")을 클릭하면 양식의 내용이 해당 처리를 위해 다른 파일(일반적으로 파일은 스크립트임)로 전송됩니다. 양식의 작업 속성은 양식에서 제출된 콘텐츠를 처리할 스크립트 파일을 정의합니다(일반적으로 스크립트 파일의 이름 또는 전체 경로가 작업 속성에 할당될 수 있음). 스크립트 파일은 일반적으로 양식에서 제출된 데이터를 처리합니다.

action="html_form_action.asp"

method="get">

사용자 이름:






위 내용 code 실행 결과:

위의 텍스트 입력 상자에 내용을 입력하고 제출 버튼("제출")을 클릭하면 입력한 정보가 "html_form_action.asp" 페이지라는 파일에 제출됩니다( 이는 스크립트입니다.) 이 스크립트 파일은 수집된 정보를 사용자에게 출력합니다.
{
여기에 있는 스크립트 파일인 "html_form_action.asp"는 Sina 블로그 시스템의 파일이 아니고 단지 시연용이므로 오류 보고서 페이지가 여기에서 생성됩니다. 웹사이트에서는 자신만의 스크립트 파일을 지정해야 합니다.

}

8) 추가 예시

체크박스
이 예시는 HTML 페이지에서 체크박스를 만드는 방법을 보여줍니다. 체크박스의 각 항목에 대해 사용자가 체크하거나 체크하지 않을 수 있습니다.

라디오 버튼
이 예는 HTML 페이지에서 라디오 버튼을 만드는 방법을 보여줍니다.

드롭다운 목록 상자
이 예에서는 HTML 페이지에 간단한 드롭다운 목록 상자를 만드는 방법을 보여줍니다. 드롭다운 목록 상자는 실제로 옵션을 제공하는 목록 상자입니다.

옵션을 현재 옵션으로 지정하는 드롭다운 목록 상자
이 예에서는 현재 선택한 항목을 지정하는 드롭다운 목록을 만드는 방법을 보여줍니다.

파일 영역
이 예는 텍스트 영역(여러 줄 텍스트 입력 컨트롤)을 만드는 방법을 보여줍니다. 사용자는 텍스트 영역에 텍스트를 입력할 수 있으며, 입력하는 문자 수에는 제한이 없습니다.

버튼 만들기
이 예에서는 버튼을 만들고 버튼에 대한 설명 텍스트를 직접 정의하는 방법을 보여줍니다.

데이터세트
이 예에서는 모든 데이터가 테두리로 둘러싸인 동일한 성격의 데이터세트를 만드는 방법을 보여줍니다.

9) 양식 클래스 예

텍스트 입력 필드와 제출 버튼이 있는 양식
이 예에서는 텍스트 입력 필드와 제출 버튼이 포함된 HTML 페이지에 양식을 추가하는 방법을 보여줍니다. 단추.

체크박스가 있는 양식
이 예는 두 개의 체크박스와 제출 버튼이 있는 양식을 보여줍니다.

라디오 버튼이 있는 양식
이 예는 두 개의 라디오 버튼과 하나의 제출 버튼이 있는 양식을 보여줍니다.

양식을 통해 이메일 보내기
이 예에서는 양식을 통해 이메일을 보내는 방법을 보여줍니다.

10) 양식 관련 태그

태그

설명

양식

입력 필드 정의