首页设计一个清空输入框内容的按钮网页

设计一个清空输入框内容的按钮网页

时间: 2023-11-20 08:06:51 浏览: 83

好的，以下是一个示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清空输入框内容的按钮网页</title> <style> /* 样式 */ input[type=text] { padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; } </style> <script> // 清空输入框内容的函数 function clearInput() { document.getElementById("input-box").value = ""; } </script> </head> <body> <form> <label for="input-box">输入框：</label> <input type="text" id="input-box" name="input-box" placeholder="在此输入"> <button type="button" onclick="clearInput()">清空</button> </form> </body> </html> ``` 在这个示例中，我们添加了一个清空按钮，并使用 `onclick` 属性来指定点击按钮时应该执行的函数。当用户点击清空按钮时，`clearInput()` 函数将被调用，它将获取输入框的元素并将其值设置为空字符串，从而清空输入框的内容。请注意，我们将按钮的 `type` 属性设置为 `"button"`，以避免它默认行为的表单提交行为。

阅读全文