URLの/以降だけを入力したいです。

HTMLでサイトのページを作成する際に、例えば下記の様なURLのhttps://typhoon.yahoo.co.jp/weather/jp/の部分だけ固定でその後のtyphoon部分だけを入力して別のサイトへ飛ぶ場合はどのようにHTMLを記述すれば良いですか？

https://typhoon.yahoo.co.jp/weather/jp/typhoon


https://typhoon.yahoo.co.jp/weather/jp/→この部分は固定
jp/以降は入力フィールドが表示されていてtsunamiなどを入力すれば、そのURLにジャンプできるようにしたいです。

HTMLの記述だけで可能でしょうか？

質問者からの補足コメント

• 

  メモ帳に上記URLを貼付け'http://example.com/foo/'部分をhttps://typhoon.yahoo.co.jp/weather/jp/に変更し、入力フィールドにtyphoonを入力してもサイトにジャンプしません。やり方が間違っていますでしょうか？

  No.2の回答に寄せられた補足コメントです。 補足日時：2019/07/19 14:16

No.2 回答者： Ogre7077 回答日時： 2019/07/19 13:40

スクリプト込みの HTML で可能です。

<script>
window.addEventListener('submit', function(ev){
_ var form = ev.target;
_ if (form.name == 'jumper') {
_ _ ev.preventDefault();
_ _ var v = form.elements['f'].value;
_ _ v = v? v.trim(): null;
_ _ if (v) {
_ _ _ var base = form.dataset['baseurl'];
_ _ _ var url = base + encodeURIComponent(v);
_ _ _ window.location = url;
_ _ } else {
_ _ _ alert('please write file name.');
_ _ }
_ }
}, false);
</script>

<form method=get name=jumper data-baseurl='http://example.com/foo/'>
<input type=text name=f placeholder="file name of url"> <button type=submit>Go!</button>
</form>

No.1 回答者： sankaku_neko 回答日時： 2019/07/19 13:19

ひとつの方法として、入力フィールドのデフォルト値に固定URLを設定すればいいです。

ただし、この方法だと、入力フィールドに固定URLが表示されます。