html 태그 <버튼> 사용법-HTML 튜토리얼-php.cn

html 태그 <버튼> 사용법

巴扎黑

풀어 주다： 2017-06-16 14:08:00

원래의

2802명이 탐색했습니다.

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

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 스크립트와 결합되며 제출 버튼은 주로 현재 < form> 태그 내부 양식 입력 정보는 처리를 위해 서버에 제출되며 재설정 버튼은 현재

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

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

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