Home > Article > Web Front-end > Usage of html tag
Usage of html tag
- 巴扎黑Original
- 2017-06-16 14:08:002758browse
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('你点击了按钮！')">
</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 ff9c23ada1bcecdd1a0fb5d5a0f18437 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 ff9c23ada1bcecdd1a0fb5d5a0f18437 tag, and has no effect on the form elements outside the current ff9c23ada1bcecdd1a0fb5d5a0f18437 tag.
I would like to mention here that the submit button is also for the current ff9c23ada1bcecdd1a0fb5d5a0f18437 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 ff9c23ada1bcecdd1a0fb5d5a0f18437 tag is submitted to the server for processing, and the reset button clears the input information of the form element currently inside the ff9c23ada1bcecdd1a0fb5d5a0f18437 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