HTML | URLの入力フォームパーツのサンプルコード

2023-10-08HTML フォーム,HTML

URLの入力フォームパーツのHTMLサンプルコードと表示例の紹介になります。

URLの入力フォームパーツのサンプル

HTMLでURLの入力フォームパーツを設置する際のサンプルコードです。

サンプルコードでは<input>タグに「type」属性で「url」を指定、「autocomplete」で履歴からURLの候補を表示するようにしています。

また「placeholder」属性で入力例として「https://example.com」を表示するようにしています。

<p>URL</p>
<p><input type="url" name="url" value="" autocomplete="url" placeholder="https://example.com"></p>

以下は上記フォームのHTMLを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。

URL

URLかどうかを判定するには以下の正規表現パターンが利用できます。

^((http|https):\/\/)?[a-zA-Z0-9.-]+(\.[a-zA-Z0-9-]+)*(\/[^\s]*)?$

上記正規表現パターンは以下の文字列にヒットします。

• https://example.com
• https://www.example.com
• http://example.com

正規表現パターンについては以下のページを参照して下さい。

関連：正規表現 | URLかどうか | ONE NOTES

「pattern」属性でURL判定を含める場合は以下のように記述する事が可能です。

<p>URL</p>
<p><input type="url" name="url" value="" autocomplete="url" placeholder="https://example.com" pattern="^((http|https):\/\/)?[a-zA-Z0-9.-]+(\.[a-zA-Z0-9-]+)*(\/[^\s]*)?$"></p>

URL