html 按下按钮弹出文本表单的代码实例
时间: 2024-01-05 21:45:51 浏览: 34
好的,以下是一个简单的 HTML 代码实例,按下按钮可以弹出文本表单:
```
<!DOCTYPE html>
<html>
<head>
<title>弹出表单示例</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="openForm()">打开表单</button>
<div id="form" style="display:none;">
<form action="">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">提交</button>
</form>
</div>
<script>
function openForm() {
document.getElementById("form").style.display = "block";
}
</script>
</body>
</html>
```
当用户按下按钮时,JavaScript 函数 `openForm()` 会将 `form` 元素的 `display` 属性设置为 `block`,从而显示出表单。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)