설명:"/> 설명:">

>웹 프론트엔드 >HTML 튜토리얼 >html 태그 <버튼> 사용법

html 태그 <버튼> 사용법

巴扎黑
巴扎黑원래의
2017-06-16 14:08:002914검색

웹 페이지에서 버튼은 일반 버튼 버튼, 제출 버튼, 재설정 버튼의 세 가지 유형으로 나뉩니다.

1. 일반 버튼 버튼

일반 버튼은 일반적으로 양식을 구현하기 위해 JavaScript 스크립트와 조화를 이루어야 합니다.

구문: ​​

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>

설명:

값의 값은 버튼에 표시되는 텍스트이고, onclick은 일반 버튼의 이벤트입니다. 이에 대해서는 JavaScript 입문 튜토리얼에서 자세히 설명할 것이며, 다음과 같은 경우라면 괜찮을 것입니다. 당신은 여기서 그것을 이해합니다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    单击按钮弹出对话框:<br/>
    <input type="button" value="按钮" onclick="alert(&#39;你点击了按钮!&#39;)">
</body>
</html>

2. 제출 버튼 submit

제출 버튼은 특수 기능이 있는 일반 버튼으로 간주할 수 있으며, 제출 버튼을 클릭하면 양식 내용을 서버에 제출하여 처리할 수 있습니다.

구문: ​​

<input type="submit" value="提交按钮的取值"/>

설명:

값의 값은 버튼에 표시되는 텍스트입니다. 예제는 재설정 버튼의 예를 참조하세요.

제출 버튼의 실제 유용성은 백엔드 기술을 배우기 전까지는 진정으로 이해할 수 없습니다.

3. 재설정 버튼 재설정

재설정 버튼은 특수 기능이 있는 일반 버튼으로도 간주할 수 있으며, 재설정 버튼을 클릭하면 사용자가 페이지 양식에 입력한 정보가 지워질 수 있습니다.

구문: ​​

<input type="reset" value="重置按钮的取值"/>

설명:

값의 값은 버튼에 표시되는 텍스트입니다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号:<input type="text"/><br/>
        密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

텍스트 상자에 문자를 입력하고 재설정 버튼을 누르면 텍스트 상자의 내용이 지워지는 것을 확인할 수 있습니다! 이것이 재설정 버튼의 역할입니다.

1. 재설정 버튼에 대한 오해

위에서 재설정 버튼은 사용자가 양식에 입력한 정보를 지울 수 있지만 재설정 버튼은 '현재 양식'에 있는 양식 요소의 내용만 지울 수 있다는 것을 알고 있습니다. 태그". 양식 태그 외부의 양식 요소는 유효하지 않습니다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号:<input type="text"/><br/>
        密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
    昵称:<input type="text"/><br/>
</body>
</html>

그런 다음

태그 외부의 텍스트 상자, 즉 닉네임 텍스트 상자에 정보를 입력한 다음 재설정 버튼을 누르면 유효하지 않음을 알 수 있습니다.

결론: 재설정 버튼은 현재

태그 내부에 있는 양식 요소의 입력 정보만 지울 수 있으며 현재
태그 외부에 있는 양식 요소에는 영향을 미치지 않습니다.

여기서 언급하자면 제출 버튼은 현재

태그에도 적용됩니다.

4 일반 버튼, 제출 버튼 및 재설정 버튼의 차이점

위에서 우리는 알고 있습니다: 일반 버튼은 일반적으로 일부 특수 효과를 얻기 위해 JavaScript 스크립트와 결합되며 제출 버튼은 주로 현재 태그 내부 양식 입력 정보는 처리를 위해 서버에 제출되며 재설정 버튼은 현재

태그 내에 있는 양식 요소의 입력 정보를 지웁니다.

HTML 입문 단계에서는 이 세 가지 버튼의 기능을 완전히 이해하는 것이 불가능합니다. 그러니 당황하지 마십시오. JavaScript와 동적 웹 페이지가 포함되어 있으므로 잘 이해하지 못하더라도 문제가 되지 않으며, 이후 과정을 수강한 후에는 명확하게 이해할 수 있습니다. HTML 단계에서는 버튼의 종류와 라벨 코드 작성 방법만 알면 됩니다. 매우 간단합니다.

위 내용은 html 태그 <버튼> 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.