HTML | 名前、氏名入力フォームのサンプルコード

HTML,HTML フォーム

名前やニックネームまたは氏名での入力を可能にするテキストフォームのHTMLサンプルコード集になります。

autocomplete による候補を有効にした基本的なHTMLコードを紹介しています。

See the Pen HTML | Prefectures selection form sample by yochans (@yochans) on CodePen.

名前入力フォームサンプル

シンプルな名前の入力フォームのHTMLサンプルコードです。

HTML5から利用可能になっている autocomplete属性 を利用するとブラウザに記憶されている入力情報が候補として表示されるようになります。
氏名やニックネームの場合は「name」、性は「family-name」、名は「given-nam」を指定する事で利用可能です。

<!-- ノーマルタイプ -->
<p>
	<span>お名前</span>
	<input type="text" name="name" autocomplete="name"/>
</p>

<!-- 氏名別タイプ -->
<p>
	<span>性</span>
	<input type="text" name="family-name" autocomplete="family-name"/>
	<span>名</span>
	<input type="text" name="given-name" autocomplete="given-name"/>
<p>