开发谷歌高级搜索克隆时HTML表单无法提交问题求助

问题根因 #

• 你当前的表单没有配置提交触发元素，主流浏览器默认支持回车提交表单的前提是表单内至少存在一个type="submit"类型的按钮，缺少该元素时回车不会触发提交动作。
• 表单未显式声明提交方法，虽默认是get请求，但显式声明兼容性更好。

修复步骤 #

1. 给<form>标签添加method="get"属性，明确提交方式
2. 在表单内部添加提交按钮，可根据样式需求选择可见或隐藏的按钮，不影响功能
3. 你当前使用的as_q、as_epq均为谷歌合法的高级搜索参数，无需修改

修复后代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="google-logo.png">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
  </head>
<body>
    <!-- 新增method属性 -->
    <form action="https://google.com/search" method="get">

        <div class="one">
            <label class="inp-label">all these words:</label>
            <div class="inp-box">
                <input class="inp" autofocus="autofocus" name="as_q" type="text">
            </div>
            <label class="inp-label-sec">type the important words: <b>tricolor rat terrier</b></label>
        </div>
        
        <div class="one">
            <label class="inp-label">this exact word or phrase:</label>
            <div class="inp-box">
                <input class="inp" name="as_epq" type="text">
            </div>
            <label class="inp-label-sec">put exact words in quotes: <b>"rat terrier"</b></label>
        </div>
        <!-- 新增提交按钮，不需要显示的话可以加style="display:none"，不影响回车提交逻辑 -->
        <div class="submit-box">
            <input type="submit" value="高级搜索" class="btn btn-primary">
        </div>
    </form>
</body>

内容的提问来源于stack exchange，提问作者pubeeday