用户在 html 中输入 url 修饰符

Question

我正在为一个城市创建一个网站，并打算在上面添加一个 phone 号码查找框。我希望它是纯粹的 html 和简单的。我需要某种用户输入框，这样他们就可以在一个框中输入名字，然后在下一个框中输入姓氏，然后是城市框，然后是州框。所以当他们推送提交时，它适合这个 url: http://www.yellowpages.com/whitepages?first=FIRSTNAMEHERE&last=LASTNAMEHERE&zip=ZIPCODEHERE&state=STATEHERE

我已经尝试过 jQuery 并且有点奏效，但我想继续使用纯粹的 html。

我试过的代码是：

 <input id="input" name="url" onfocus="this.value='';" style="border: 1px solid 
#A4A4A4; font-size: 0.9em; padding: 5px; width: 350px;" type="text" value="Type url here..">
<input onclick="window.open('http://www.yellowpages.com/whitepages?first=&last=&zip=&state=' + 

window.document.getElementById('input').value.replace(/^https?:\/\//,''))" style="font-family: Arial, sans-serif; font-size: 0.9em; margin: 2px 0; padding: 

4px; width: 100px;" type="button" value="Surf">

我知道我在 "onclick" 值的某个地方犯了错误。

Answer 1

听起来您只需要一个简单的表单 GET 请求。 GET 请求意味着它通过 URL 参数将数据传递到页面。此代码获取每个提交的输入名称并将其包含的数据放在您的黄页之后 URL。

<form method="get" action="http://www.yellowpages.com/whitepages">
    <input name="first" type="text">
    <input name="last" type="text">
    <input name="zip" type="text">
    <input name="state" type="text">
    <input type="submit" value="Submit">
</form>

用户在 html 中输入 url 修饰符

User input url modifier in html

html

weebly