如何用HTML写一个百度浏览器

最新推荐文章于 2025-02-17 10:39:47 发布

humorous man

最新推荐文章于 2025-02-17 10:39:47 发布

阅读量2.3k

点赞数 1

文章标签： HTML 网页浏览器

本文链接：https://blog.csdn.net/humorious/article/details/100542633

版权

本文介绍如何使用HTML和JavaScript创建一个简易的浏览器搜索界面，支持切换不同的搜索引擎，如百度和360。通过form表单和select标签实现搜索引擎的选择，同时利用JavaScript动态修改表单的action属性和input元素的name属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用HTML写一个浏览器！！！

制作可以选择搜索引擎的浏览器

先写一个form表单，初始action为“http://www.baidu.com/baidu”，引用一个文本框输入搜索内容。
利用select标签来选择搜索引擎。代码如下！！！
360的action为"https://www.so.com/s"。

<form action="http://www.baidu.com/baidu" id="form" target="_black">
        <input type="text" name=word id="text">
        <input type="submit" value="提交" onclick="a()">
        <select name="" id="check">
            <option value="百度" >百度</option>
            <option value="360">360</option>
        </select>
    </form>

接下来写Javascript

function a(){
        var i=document.getElementById("form").action;
        var a=document.getElementById("check").value;
        if(a=="百度"){
            document.getElementById("form").action="http://www.baidu.com/baidu";
            var list = document.getElementsByTagName("input");
            list[0].name='word';
        }
        else{
            document.getElementById("form").action="https://www.so.com/s";
            var list = document.getElementsByTagName("input");
            list[0].name='q';
        }
    }

注意！！

通过Javascript，使用如下代码改变form表单的action document.getElementById(“form”).action=“http://www.baidu.com/baidu”;
百度的搜索和360搜索有所不同。
在form表单中，百度的name为word，而360的为q。
要改变name的值，可以使用如下代码。
var list = document.getElementsByTagName(“input”);
list[0].name=‘q’;
先获得所有的input标签，形成一个list，再改变第一个元素的name。