制作一个带有搜索文本框的静态网页
时间: 2023-07-04 21:11:02 浏览: 52
以下是一个带有搜索文本框的 HTML 静态网页制作代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>搜索页面</title>
</head>
<body>
<header>
<h1>搜索页面</h1>
</header>
<main>
<section>
<h2>搜索</h2>
<form action="#" method="get">
<label for="search">搜索:</label>
<input type="text" id="search" name="search">
<input type="submit" value="搜索">
</form>
</section>
<section>
<h2>搜索结果</h2>
<p>这里是搜索结果的内容。</p>
</section>
</main>
<footer>
<p>版权所有 © 我的网页</p>
</footer>
</body>
</html>
```
这个代码示例包括了一个简单的搜索页面结构,包括头部、搜索框和搜索结果。你可以根据自己的需求进行修改和扩展。在这个例子中,搜索框使用了 HTML 表单元素,通过 method 属性设置为 "get",表示提交表单时使用 GET 方法。当用户在搜索框中输入关键字并提交表单时,表单数据将被传递到服务器端,在 URL 中附加查询字符串。
相关问题
JavaScript添加一个文本框并带有删除按钮
您可以通过以下代码在HTML中添加一个文本框和一个删除按钮:
```html
<div>
<input type="text" id="myText">
<button onclick="clearText()">删除</button>
</div>
```
然后在JavaScript中定义一个名为`clearText()`的函数,以清除文本框中的内容:
```javascript
function clearText() {
document.getElementById("myText").value = "";
}
```
这个函数将获取具有`id`为`myText`的元素,并将其值设置为空字符串,这样就可以清除文本框中的内容。
生成一个带6个文本框的javaGUI程序
以下是一个生成带6个文本框的Java GUI程序的示例代码:
```java
import javax.swing.*;
import java.awt.*;
public class SixTextFieldGUI extends JFrame {
private JTextField textField1, textField2, textField3, textField4, textField5, textField6;
public SixTextFieldGUI() {
setTitle("六个文本框示例");
setSize(400, 200);
setLocationRelativeTo(null);
setDefaultCloseOperation(EXIT_ON_CLOSE);
JPanel panel = new JPanel(new GridLayout(2, 3));
textField1 = new JTextField();
textField2 = new JTextField();
textField3 = new JTextField();
textField4 = new JTextField();
textField5 = new JTextField();
textField6 = new JTextField();
panel.add(textField1);
panel.add(textField2);
panel.add(textField3);
panel.add(textField4);
panel.add(textField5);
panel.add(textField6);
add(panel);
setVisible(true);
}
public static void main(String[] args) {
new SixTextFieldGUI();
}
}
```
在上述代码中,我们创建了一个JPanel面板,并将6个文本框对象加入到其中。使用GridLayout布局管理器将6个文本框平均分布在2行3列的网格中。最后将该面板加入到JFrame窗口中并设置为可见。