<p> <input type="submit" value="提交" autofocus/> <input type="reset" value="重置"/> </p >美化按钮样式
时间: 2023-10-27 14:04:54 浏览: 38
你可以在CSS中为按钮添加样式来美化它们。例如,你可以使用以下CSS代码来添加圆角和阴影效果:
```css
input[type="submit"], input[type="reset"] {
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
}
```
这将给提交和重置按钮添加绿色背景、白色文本、圆角和阴影效果。你可以根据需要更改这些值。
相关问题
<p> <input type="submit" value="提交" autofocus/> <input type="reset" value="重置"/> </p >给按钮加js
可以通过给按钮添加 onclick 属性来添加 JavaScript 函数,例如:
```
<input type="submit" value="提交" onclick="submitForm()" autofocus/>
<input type="reset" value="重置" onclick="resetForm()"/>
```
然后在 `<script>` 标签内定义 `submitForm()` 和 `resetForm()` 函数,例如:
```
<script>
function submitForm() {
// 在这里添加提交表单的代码
}
function resetForm() {
// 在这里添加重置表单的代码
}
</script>
```
这样当用户点击按钮时,就会执行相应的 JavaScript 函数。
<p> <input type="submit" value="提交" autofocus/> <input type="reset" value="重置"/> </p >添加js
你可以在HTML文档的<head>标签内添加以下代码来实现对提交按钮和重置按钮的JS事件绑定:
```
<script type="text/javascript">
window.onload = function() {
var submitBtn = document.querySelector('input[type="submit"]');
var resetBtn = document.querySelector('input[type="reset"]');
submitBtn.addEventListener('click', function(event) {
// 这里可以编写提交按钮的点击事件处理逻辑
});
resetBtn.addEventListener('click', function(event) {
// 这里可以编写重置按钮的点击事件处理逻辑
});
};
</script>
```
在这段代码中,我们使用了`querySelector`方法来获取提交按钮和重置按钮的DOM元素,并使用`addEventListener`方法对它们分别绑定了`click`事件处理函数。当按钮被点击时,对应的事件处理函数将会被调用,你可以在这里编写具体的逻辑代码来处理提交和重置按钮的点击事件。
相关推荐
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
小小记事本 <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"></input> {{ index+1 }}. <label v-if="!item.editing">{{ item.content }}</label> <input v-else v-model="item.content" @keyup.enter="save(index)" @blur="save(index)" class="edit"> <button class="edit-button" @click="edit(index)" v-if="!item.editing">编辑</button> <button class="save-button" @click="save(index)" v-if="item.editing">保存</button> <button class="destroy" @click="remove(index)"></button> 在这里面加入增、删的功能
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)