HTML5를 사용한 이미지 버튼

다음 글에서는 HTML5 이미지 버튼 사용법을 배워보겠습니다.

우리는 이미지를 버튼 역할을 하도록 만들고 있습니다. 사용자가 버튼을 클릭하면 양식이 서버로 전송되었는지 살펴보겠습니다.

이미지 버튼이란 무엇입니까

이미지 버튼은 태그 안에 태그를 삽입하여 생성되며, 이미지가 포함된 클릭 가능한 HTML 버튼이 생성됩니다.

태그

태그를 사용하면 HTML 페이지에 이미지를 포함할 수 있습니다. 이미지는 실제로 웹페이지에 포함되지 않으며, 태그는 src와 alt라는 두 가지 필수 속성으로 구성됩니다. .

구문

다음은 태그의 구문입니다. 으아악

태그

클릭 가능한 버튼은 태그로 정의됩니다. (, , , 등과 같은 태그도 삽입할 수 있습니다. ) 요소 안에는 요소로 만든 버튼이 있습니다.

HTML5의 이미지 버튼 이해를 위해 예시를 살펴보겠습니다.

예 1

아래 예에서는 간단한 이미지 버튼을 만듭니다.

으아악

스크립트가 실행되면 웹페이지의 프롬프트와 함께 텍스트가 포함된 이미지 버튼을 표시하는 출력이 생성됩니다.

사용자가 이미지 버튼을 클릭하면 이벤트가 실행되고 "동물을 사냥하지 마세요"라는 경고가 표시됩니다.

예 2

아래 예에서는 를 사용하여 이미지 버튼을 만들었습니다.

으아악

스크립트가 실행되면 웹페이지의 이미지 버튼과 함께 사용자 이름 및 비밀번호 입력 필드를 표시하는 출력이 생성됩니다. 사용자가 이미지 버튼을 클릭하면 양식이 서버에 제출됩니다.

예 3

아래 예에서는 으아악 위 스크립트를 실행하면 출력 창이 팝업되고 웹페이지의 이미지 버튼과 함께 이메일 입력을 위한 자리 표시자와 함께 제공된 로그인이 표시됩니다.

예 4

다음에서는 이미지 버튼을 생성하지만 태그 안에 태그를 삽입합니다.

으아악

위 스크립트를 실행하면 웹페이지에 텍스트가 포함된 이미지 버튼이 생성됩니다.

위 내용은 HTML5를 사용한 이미지 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!