设计一个输入框的按钮网页
时间: 2023-11-20 15:06:51 浏览: 32
好的,以下是一个简单的示例:
```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>
</head>
<body>
<form>
<label for="input-box">输入框:</label>
<input type="text" id="input-box" name="input-box" placeholder="在此输入">
<button type="submit">提交</button>
</form>
</body>
</html>
```
在这个示例中,我们使用了一个 `<form>` 元素来包含输入框和按钮。在输入框中使用了 `placeholder` 属性来提供一个示例文本,让用户知道应该在输入框中输入什么内容。在按钮上使用了 `type="submit"` 属性,表示这是一个提交按钮,当用户点击它时,表单将被提交。
相关推荐
![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)