有俩个文本框,一个按钮能实现一键清空俩个文本框中的内容的HTML代码
时间: 2024-05-19 12:14:37 浏览: 9
<html>
<head>
<title>一键清空文本框</title>
<script>
function clearText() {
document.getElementById("text1").value = "";
document.getElementById("text2").value = "";
}
</script>
</head>
<body>
<label for="text1">文本框1:</label>
<input type="text" id="text1"><br><br>
<label for="text2">文本框2:</label>
<input type="text" id="text2"><br><br>
<button onclick="clearText()">清空文本框</button>
</body>
</html>
相关问题
html css 十一个文本框一个按钮怎么布局
可以使用`<form>`标签来包裹这些文本框和按钮,然后使用CSS来布局。
首先,可以使用`display:flex`来将它们放在同一行,然后使用`justify-content: space-between`来让它们平均分布在一行上,如下所示:
```html
<form>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button type="submit">Submit</button>
</form>
```
```css
form {
display: flex;
justify-content: space-between;
}
```
如果你想让文本框和按钮垂直居中,可以使用`align-items: center`,如下所示:
```css
form {
display: flex;
justify-content: space-between;
align-items: center;
}
```
这样就可以实现十一个文本框和一个按钮的布局了。
HTMLtextarea文本框可以与input文本框用一个按钮重置吗
A:可以,可以使用JavaScript来重置HTMLtextarea文本框和input文本框,同时使用同一个按钮来触发重置操作。可以通过设置textarea和input的value属性,将其内容重置为空字符串或默认值。以下是示例代码:
```
<textarea id="myTextarea"></textarea>
<input type="text" id="myInput">
<button onclick="resetFields()">Reset Fields</button>
<script>
function resetFields() {
document.getElementById("myTextarea").value = "";
document.getElementById("myInput").value = "";
}
</script>
```
在上述代码中,resetFields()函数将会被按钮的onclick事件调用,该函数会将文本框的内容重置为空字符串。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)