Usage of html tag <button>-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Usage of html tag

In web pages, buttons are divided into three types: ordinary button button, submit button, and reset button.

1. Ordinary button button

Ordinary buttons generally need to be cooperated with JavaScript scripts to implement the form.

Syntax:

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

Description:

The value of value is the text displayed on the button, onclick is the event of the ordinary button, we will cover this in the JavaScript introductory tutorial Detailed explanation, it’s OK for everyone to understand it here.

Example:

<!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 button submit

The submit button can be regarded as an ordinary button with special functions. Clicking the submit button can submit the form content to Server processing.

Syntax:

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

Description: The value of

value is the text displayed on the button. See the example in Reset Button for an example.

The real usefulness of the submit button cannot be truly understood until we learn back-end technology.

3. Reset button reset

The reset button can also be regarded as an ordinary button with special functions. Clicking the reset button can clear the information entered by the user in the page form.

Syntax:

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

Description: The value of

value is the text displayed on the button.

Example:

<!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>

After you enter characters in the text box and press the reset button, you will find that the content of the text box is cleared! This is what the reset button does.

1. Misunderstanding of the reset button

We know from the above that the reset button can clear the information entered by the user in the form, but the reset button can only clear the "current form tag" The content of the form element is invalid for form elements outside the current form tag.

Example:

<!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>

Then if you enter information in the text box outside the

The above is the detailed content of Usage of html tag

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn