ナビゲーションバーに検索ボックスを作成

Question

まず、並べ替えられていないリストでHTMLにナビゲーションバーを作成するのは悪いですか？ 2番目はサイト内で見た目が悪く、右隅に配置したいと思ってマップにリンクしたいのですが、HTMLでコーディングするのは初めてです誰も私にどのようにそれを行って表示することができます。

HTML：

<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 

<li> 
    <form> 
    <input type="text" placeholder="Search Location" required=""> 
    <input type="button" name="Search" value="Search"> 
    </form> 
</li> 

CSS：

nav { 
    margin: 0 0 0 0; 
    font-family: Arial; 
    font-size: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333333; 
    text-align: center; 
    vertical-align: top; 
    margin-top: 130px; 
} 

* { 
    margin: 0; 
    padding: 0; 
    line-height: 1; 
    position: sticky; 
    top: -130px; 
} 

#nav li { 
    float: left; 
} 

#nav a { 
    display: block; 
    color: white; 
    text-align: center; 
    width: 200px; 
    padding: 10px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: black; 
} 

form { 
    display: inline; 
    background-color: #000; 
    overflow: auto; 
    padding: 0; 
} 

Answer 1

グーグルマップすることができますしたがって、https://maps.google.com?q=myqueryようGETパラメータから入力を取る：

<form method="GET" action="https://maps.google.com"> 
    <input type="text" placeholder="Search Location" name="q"> 
    <input type="submit" value="Search"> 
</form>