HTMLとjQueryでフォームを作成する方法をわかりやすく解説

Webサイトにおいて、フォームはユーザーから情報を入力してもらうための重要な要素です。この記事では、HTMLだけでの基本的なフォーム作成方法と、jQueryを組み合わせてフォームを動的に操作する方法を解説します。

HTMLでフォームを作成する基本

HTMLでフォームを作成するには、<form>タグを使用します。action属性にデータの送信先URLを、method属性に送信方法（getまたはpost）を指定します。基本的なフォームの記述例は以下の通りです。

<form action="" method="get">\n  詳細：<br><br>\n  学生名<br><input type="text" name="sname"><br>\n  試験日時<br><input type="datetime-local" name="datetime"><br>\n  <input type="submit" value="送信">\n</form>

この例では、テキスト入力欄（type="text"）で学生名を受け取り、日時選択欄（type="datetime-local"）で試験の日時を指定できるフォームを作成しています。最後のtype="submit"のボタンを押すことで、入力したデータが送信されます。

jQueryでフォームに要素を追加する方法

既存のフォームに対してjQueryで入力欄やボタンを追加するには、append()メソッドを使用します。例えば、ボタンを追加する場合は次のように記述します。

$form.append('<input type="button" value="button">');

同様に、テキスト入力欄を追加したい場合も、追加したいHTMLを文字列としてappend()に渡すだけで簡単に実装できます。

フォーム全体を動的に生成する実用例

より実践的な例として、フォームそのものをjQueryで動的に作成し、ページに追加する方法を紹介します。

$myform = $("<form></form>");\n$myform.append('<input type="button" value="button">');\n$('body').append($myform);

このコードの処理の流れは以下の通りです。

• $("<form></form>") … 新しいform要素を生成します
• append() … 生成したフォームの中に、ボタンなどの要素を追加します
• $('body').append($myform) … 完成したフォームをbody要素に追加して画面に表示します

まとめ

HTMLだけでフォームを作成することもできますが、jQueryを組み合わせることで、ユーザーの操作に応じて入力項目を動的に追加・削除するなど、柔軟なフォームを構築できます。append()メソッドを活用すれば、少ないコードで効率的にインタラクティブなフォームを実装できるので、ぜひ試してみてください。