HTML | 名前、氏名入力フォームのサンプルコード
名前やニックネームまたは氏名での入力を可能にするテキストフォームのHTMLサンプルコード集になります。「autocomplete」属性による候補を有効にした基本的なHTMLコードを紹介しています。
名前入力フォームサンプル
シンプルな名前の入力フォームのHTMLサンプルコードです。
HTML5から利用可能になっている 「autocomplete」属性 を利用するとブラウザに記憶されている入力情報が候補として表示されるようになります。
氏名やニックネームの場合は「name」、性は「family-name」、名は「given-nam」を指定する事で利用可能です。
<!-- ノーマルタイプ -->
<form action="" method="POST">
<p>お名前<p>
<p><input type="text" name="name" size="25" value="" autocomplete="name"></p>
<p><input type="submit" value="送信"></p>
</form>
<!-- 氏名別タイプ -->
<form action="" method="POST">
<p>性</p>
<p><input type="text" name="family-name" autocomplete="family-name"></p>
<p>名</p>
<p><input type="text" name="given-name" autocomplete="given-name"></p>
</form>以下は上記フォームのHTMLを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。