Detailed explanation of the use of

黄舟

Release： 2017-06-20 13:40:56

Original

9909 people have browsed it

Introduction to button button Know: button is to define a button, but there is also a button that can be defined in the form. We know that when , a button is also created on the web page. What I want to talk about now is the difference between the button label and the label in the input. Of course, this tag provides us with more powerful functions. We can set the button, set the text on the button, and even load images, etc.MultimediaIn HTML5, the button tag has added some attributes, such as autofocus, disabled, form, formation, formenctype, formmethod, fornovalidate, formtarget, name, type, value. Let’s do a few small cases to illustrate this tag

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title></title>
</head>
<body>
   <button type="button">这是一个按钮</button>
    <hr/>
   <br/>
   <!-- 这个地方告诉我们在button之间的文本都会写到button这个按钮上面 -->
   <button type="button">
   <img  src="https://www.baidu.com/img/bd_logo1.png"    style="max-width:90%"  style="max-width:90%" alt="Detailed explanation of the use of <button> tag in html" >
   </button>
   <!-- 这一个部分告诉我们可以将按钮设置为图画，在按钮上增加图片 -->
   <hr/>
   <button type="button" autofocus="autofocus">已经获得焦点</button>


   <!--这个地方定义一个获得焦点的按钮，获得焦点就和鼠标在上面滑动一样-->
   <hr/>
   <button type="button" disabled="disabled">失效</button>
   <!-- 在这个地方定义一个失效的按钮，已经禁用，其实就是在button中增加一个属性
   并且将值设置为disabled -->
    <form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <button name="subject" type="submit" value="HTML">HTML</button>
    <button name="subject" type="subject" value="CSS">CSS</button>
     </form>
        <!--在这个地方用到form和button进行结合使用，其实form提供的是
        一个来链接，button的属性是提交submit，而且method方法是得到
        应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的
        内容是不同的，有的 是value的值，有的 是button之间的内容  -->


</body>
</html>

Copy after login

1. Ordinary button button

Normal buttons generally need to be combined 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 do this in Getting Started with JavaScript It will be explained in detail in the tutorial, so 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

The preview effect in the browser is as follows:

Detailed explanation of the use of <button> tag in html

Then you click the button and a prompt box will pop up:

Detailed explanation of the use of <button> tag in 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 the server for 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

The preview effect in the browser is as follows:

Detailed explanation of the use of <button> tag in html

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

The above is the detailed content of Detailed explanation of the use of