【html】button按钮的一些问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:35
Original
1153 Leute haben es durchsucht

问题:

button 按钮在不设置 type 属性时,在不同的浏览器作用不一样。举个例子:

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>
Nach dem Login kopieren

result.php:

<?php echo $_POST['txt'] ?>
Nach dem Login kopieren

我们发现,在 ie8 以上包括 ie8 点击按钮可以正常提交表单,但是在 ie6 和 ie7 下面,点击按钮没有反应。

原因:

为什么会有差异?因为 button 按钮没有设置 type 属性,在不同的浏览器中解析 button 的 type 类型不尽相同。

通过 w3school 可以发现,我们需要始终为 button 按钮规定 type 属性。Internet Explorer(经测试是 ie6 和 ie7)的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。具体内容点此了解。

最后我们修改下 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>
Nach dem Login kopieren

PS:

写这篇文章的目的在于提醒自己在使用 button 时需要为标签指定相应的 type 类型。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage