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

Usage of html tag

巴扎黑

Release： 2017-06-16 14:08:00

Original

2803 people have browsed it

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脚本程序"/>

Copy after login

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>

Copy after login

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="提交按钮的取值"/>

Copy after login

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="重置按钮的取值"/>

Copy after login

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>

Copy after login

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>

Copy after login

Then if you enter information in the text box outside the

tag, that is, the nickname text box and then press the reset button, you will find that it is invalid.

Conclusion: The reset button can only clear the input information of the form element inside the current tag, and has no effect on the form elements outside the current tag.

I would like to mention here that the submit button is also for the current tag.

4. The difference between ordinary buttons, submit buttons and reset buttons

We know from the above: ordinary buttons are generally combined with JavaScript scripts to achieve some special effects, and submit buttons are mainly used to The form input information currently inside the tag is submitted to the server for processing, and the reset button clears the input information of the form element currently inside the tag.

It is impossible for you to fully understand the functions of these three buttons at the introductory stage of HTML. So don’t panic, it doesn’t matter if you don’t understand it well, because it involves JavaScript and dynamic web pages, and we will understand it clearly after taking the later courses. In the HTML stage, we only need to know what kinds of buttons there are and how to write the label code. It's very simple.

The above is the detailed content of Usage of html tag