【html】Some problems with button buttons_html/css

【html】Some problems with button buttons_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:35

Original

1152 people have browsed it

Problem:

button button works differently in different browsers when the type attribute is not set. For example:

html:

<!doctype html><html lang="en"><head>    <meta charset="UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="renderer" content="webkit"/>    <meta name="keywords" content=""/>    <meta name="description" content=""/>    <title>button按钮的一些问题</title></head><body>    <form action="result.php" method="post">        <input type="text" name="txt" placeholder="随便输入点什么吧！" autocomplete="off"/>        <button>button点击提交</button>    </form></body></html>

Copy after login

result.php:

<?php echo $_POST['txt'] ?>

Copy after login

We found that in In ie8 and above, including ie8, clicking the button can submit the form normally, but under ie6 and ie7, there is no response when clicking the button.

Reason:

Why is there a difference? Because the button button does not have a type attribute set, the type type of the button parsed in different browsers is different.

Through w3school, we can find that we need to always specify the type attribute for the button button. The default type in Internet Explorer (tested on ie6 and ie7) is "button", while the default in other browsers (including the W3C specification) is "submit". Click here for details.

Finally we modified the demo:

<!doctype html><html lang="en"><head>    <meta charset="UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="renderer" content="webkit"/>    <meta name="keywords" content=""/>    <meta name="description" content=""/>    <title>button按钮的一些问题</title></head><body>    <form action="result.php" method="post">        <input type="text" name="txt" placeholder="随便输入点什么吧！" autocomplete="off"/>        <button type="button">button按钮type为button</button>        <button type="submit">button按钮type为submit</button>    </form></body></html>

Copy after login

PS:

The purpose of writing this article is to remind myself When using buttons, you need to specify the corresponding type for the label.