当前位置：首页 > 行业动态 > 正文

如何编写HTML浏览框？

admin
行业动态
2024-10-26
3116

在html中，使用“标签来插入一个浏览框。

在HTML中创建一个浏览框（通常指的是一个文本输入框，用户可以在其中输入URL并访问网页），可以通过使用<input>元素和JavaScript来实现，以下是一个简单的示例，展示了如何创建一个基本的浏览框，用户输入URL后点击按钮即可在新窗口打开该网址。

如何编写HTML浏览框？第1张

创建HTML浏览框

我们需要创建一个HTML文件，并在其中添加必要的HTML结构和元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>浏览框示例</title>
    <style>
        body {
            fontfamily: Arial, sansserif;
            display: flex;
            justifycontent: center;
            alignitems: center;
            height: 100vh;
            backgroundcolor: #f0f0f0;
        }
        .container {
            backgroundcolor: white;
            padding: 20px;
            borderradius: 5px;
            boxshadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            marginbottom: 10px;
            border: 1px solid #ccc;
            borderradius: 3px;
        }
        button {
            padding: 10px 20px;
            border: none;
            backgroundcolor: #007BFF;
            color: white;
            borderradius: 3px;
            cursor: pointer;
        }
        button:hover {
            backgroundcolor: #0056b3;
        }
    </style>
</head>
<body>
    <div >
        <h2>浏览框</h2>
        <form id="urlForm">
            <input type="text" id="urlInput" placeholder="请输入网址" required>
            <button type="submit">浏览</button>
        </form>
    </div>
    <script>
        document.getElementById('urlForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var url = document.getElementById('urlInput').value;
            if (url.startsWith("http://") || url.startsWith("https://")) {
                window.open(url, '_blank'); // 在新标签页中打开URL
            } else {
                alert('请输入有效的网址，http:// 或 https://');
            }
        });
    </script>
</body>
</html>