HTMLフォームとは?
HTML フォーム要素:プログラミング初心者でも分かる解説
目次
- フォームとは?
- フォーム要素の種類
2.1
<form>
要素 2.2 入力要素 2.2.1 テキスト入力:<input type="text">
2.2.2 パスワード入力:<input type="password">
2.2.3 チェックボックス:<input type="checkbox">
2.2.4 ラジオボタン:<input type="radio">
2.2.5 プルダウンメニュー:<select>
2.2.6 送信ボタン:<input type="submit">
2.2.7 リセットボタン:<input type="reset">
- フォームの送信方法 3.1 GET メソッド 3.2 POST メソッド
- コード例
- まとめ
フォームとは?
HTMLフォームは、ユーザーから情報を入力・送信するための領域です。アンケート、注文、ログインなど、様々な場面で使用されます。
フォーム要素の種類
フォームは、複数の要素で構成されます。主な要素は以下の通りです。
1 <form> 要素
フォーム全体の開始と終了を指定します。
<form action="送信先URL" method="送信方法">
... フォーム要素 ...
</form>
属性
action
: 送信先のURLmethod
: 送信方法 (GET/POST)
2 入力要素
ユーザーが入力する情報の種類に応じて、様々な入力要素があります。
1 テキスト入力:<input type="text">
1行のテキスト入力を可能にします。
<input type="text" name="名前" placeholder="名前を入力">
属性
name
: 送信時に使用する名前placeholder
: 入力欄に表示される説明文
2 パスワード入力:<input type="password">
パスワードなど、秘密の情報を隠して入力できるようにします。
<input type="password" name="パスワード" placeholder="パスワードを入力">
3 チェックボックス:<input type="checkbox">
複数選択可能な項目を表します。
<input type="checkbox" name="趣味" value="読書"> 読書
<input type="checkbox" name="趣味" value="映画鑑賞"> 映画鑑賞
属性
value
: 送信される値
4 ラジオボタン:<input type="radio">
複数選択項目から1つだけを選択できるようにします。
<input type="radio" name="性別" value="男性"> 男性
<input type="radio" name="性別" value="女性"> 女性
5 プルダウンメニュー:<select>
選択肢から1つを選択できるようにします。
<select name="国">
<option value="日本">日本</option>
<option value="アメリカ">アメリカ</option>
<option value="中国">中国</option>
</select>
オプション要素
<option>
: 選択肢
6 送信ボタン:<input type="submit">
フォームを送信します。
<input type="submit" value="送信">
属性
value
: ボタンに表示される文字
7 リセットボタン:<input type="reset">
フォームに入力された内容をクリアします。
<input type="reset" value="リセット">
フォームの送信方法
フォーム送信には、GETとPOSTの2つの方法があります。
1 GET メソッド
URLにパラメータとして情報をエンコードして送信します。
<form action="送信先URL.php?param1=value1¶m2=value2" method="get">
... フォーム要素 ...
</form>
HTML フォームサンプルコード集
<form action="送信先URL.php" method="post">
<p>氏名:</p>
<input type="text" name="氏名" placeholder="氏名を入力">
<p>メールアドレス:</p>
<input type="text" name="メールアドレス" placeholder="メールアドレスを入力">
<p>お問い合わせ内容:</p>
<textarea name="お問い合わせ内容" placeholder="お問い合わせ内容を入力"></textarea>
<input type="submit" value="送信">
</form>
ログインフォーム
<form action="ログイン処理.php" method="post">
<p>ユーザー名:</p>
<input type="text" name="ユーザー名" placeholder="ユーザー名を入力">
<p>パスワード:</p>
<input type="password" name="パスワード" placeholder="パスワードを入力">
<input type="submit" value="ログイン">
</form>
アンケートフォーム
<form action="アンケート結果.php" method="post">
<p>あなたの性別は?</p>
<input type="radio" name="性別" value="男性"> 男性
<input type="radio" name="性別" value="女性"> 女性
<p>趣味は何ですか?</p>
<input type="checkbox" name="趣味[]" value="読書"> 読書
<input type="checkbox" name="趣味[]" value="映画鑑賞"> 映画鑑賞
<input type="checkbox" name="趣味[]" value="音楽鑑賞"> 音楽鑑賞
<input type="submit" value="送信">
</form>
商品購入フォーム
<form action="購入処理.php" method="post">
<p>商品名:</p>
<select name="商品名">
<option value="商品1">商品1</option>
<option value="商品2">商品2</option>
<option value="商品3">商品3</option>
</select>
<p>数量:</p>
<input type="number" name="数量" value="1">
<input type="submit" value="購入">
</form>
ファイルアップロードフォーム
<form action="アップロード処理.php" method="post" enctype="multipart/form-data">
<p>ファイルを選択:</p>
<input type="file" name="アップロードファイル">
<input type="submit" value="アップロード">
</form>
これらのサンプルコードは、フォームの基本的な使い方を理解するのに役立ちます。必要に応じて、デザインや機能をカスタマイズすることができます。
フォーム送信のその他の方法
JavaScriptを使用して、AJAX通信でフォームを送信することができます。これは、ページ全体をリロードせずに、サーバーと通信できるため、ユーザーエクスペリエンスを向上させることができます。
PHPなどのサーバーサイド言語を使用して、フォームデータを処理することができます。
フレームを使用して、フォームを別のページに送信することができます。
画像の src
属性にフォームデータを含めることで、画像を介してフォームを送信することができます。
それぞれの方法のメリットとデメリット
方法 | メリット | デメリット |
---|---|---|
GET | シンプル | URLに情報がエンコードされる |
POST | 情報を隠蔽できる | 複雑 |
JavaScript | ユーザーエクスペリエンスが良い | JavaScriptの知識が必要 |
PHP | 柔軟性が高い | サーバーサイドの知識が必要 |
フレーム | 別のページに送信できる | 複雑 |
画像 | シンプル | 情報量が制限される |
フォーム送信方法を選択する際には、以下の点を考慮する必要があります。
- 送信したい情報量
- セキュリティ要件
- ユーザーエクスペリエンス
- 開発者のスキル
これらの点を考慮した上で、最も適切な方法を選択してください。
HTML media属性でメディアに応じたスタイルシートを適用する方法
media属性 は、link要素 と style要素 の両方で使用できます。link要素 で使用する場合、media属性 は外部スタイルシートの適用対象となるメディアを指定します。例えば、以下のコードは、画面表示用のスタイルシートと印刷用のスタイルシートを指定します。
JavaScript で formaction 属性を変更する方法
formaction 属性は、HTML フォームの送信時にデータを処理するファイルの URL を指定します。これは <input> 要素と <button> 要素で使用できます。主な機能フォーム送信時に、formaction 属性で指定された URL にデータを送信します。
HTML表レイアウトを自在に操る!「rows」属性の使い方とサンプルコード集
「rows」属性は、HTML表における行の数を定義するために使用されます。この属性は、<table> 要素内に記述されます。属性の構文:上記の例では、rows属性は省略されていますが、この場合、表はブラウザによって自動的に行数が決定されます。しかし、rows属性を明示的に指定することで、より明確なHTML構造となり、アクセシビリティや保守性を向上させることができます。
これで完璧!HTMLのwrap属性で実現する、見やすく使いやすいテキストエリア
wrap 属性は、textarea 要素で使用され、テキストエリア内のテキストが折り返される際の挙動を制御します。属性値hard: テキストが折り返された際に、改行コード (\n) を挿入します。soft: テキストが折り返された際に、改行コードは挿入せず、スペースで折り返します。
HTML スコープ属性の徹底解説! 見出しとラベルの対象範囲をマスターしよう
th要素におけるスコープ属性は、表の見出しセルがどのセルと関連しているかを指定します。row: 見出しセルが同じ行のセルを対象とするcolgroup: 見出しセルが同じcolgroup要素内のセルを対象とするthead: 見出しセルが同じthead要素内のセルを対象とする
HTML表レイアウトを自在に操る!「rows」属性の使い方とサンプルコード集
「rows」属性は、HTML表における行の数を定義するために使用されます。この属性は、<table> 要素内に記述されます。属性の構文:上記の例では、rows属性は省略されていますが、この場合、表はブラウザによって自動的に行数が決定されます。しかし、rows属性を明示的に指定することで、より明確なHTML構造となり、アクセシビリティや保守性を向上させることができます。
これで完璧!HTMLのwrap属性で実現する、見やすく使いやすいテキストエリア
wrap 属性は、textarea 要素で使用され、テキストエリア内のテキストが折り返される際の挙動を制御します。属性値hard: テキストが折り返された際に、改行コード (\n) を挿入します。soft: テキストが折り返された際に、改行コードは挿入せず、スペースで折り返します。
size属性を使いこなしてWebページをデザインしよう!
<input>要素のsize属性は、テキスト入力欄の幅をピクセル単位で指定します。これは、ユーザーが入力できる文字数に影響を与えます。例:上記のコードは、名前を入力するためのテキスト入力欄を生成します。入力欄は20ピクセルの幅で表示され、ユーザーは20文字程度の名前を入力することができます。
HTML Elements の "title" 要素の完全ガイド | SEO対策もバッチリ
HTML Elements の "title" 要素は、Web ページのタイトルを設定するための要素です。これは、ブラウザのタブや検索結果リストに表示されるタイトルとして使用されます。また、スクリーンリーダーなどの支援技術によって読み上げられるため、アクセシビリティの観点からも重要な要素です。
autoplay属性のすべて:動画・音声の自動再生をマスターしてサイトを進化させよう!
使い方はとっても簡単コード例上記のコードでは、autoplay属性を指定することで、sample. mp4とsample. mp3が自動再生されます。controls属性は、再生ボタンや音量調節バーなどのコントロールを表示します。注意点autoplay属性は、ユーザーにとって不快な場合もあります。特に、音声ファイルの場合は注意が必要です。