JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLフォームとは？基本の使い方と主要な属性をわかりやすく解説

HTMLフォームは、サイトを訪れたユーザー（ビジター）からデータを収集するために必要な仕組みです。たとえば、大学のウェブサイトで学生が登録手続きを行う際に、氏名、年齢、住所、成績などの情報を入力してもらう場面がその代表例といえます。

フォームはユーザーからの入力を受け取り、CGI、ASPスクリプト、PHPスクリプトなどのバックエンドアプリケーションへデータを送信します。バックエンド側では、アプリケーション内に定義されたビジネスロジックに基づいて、受け取ったデータに対して必要な処理が行われます。

HTMLでフォームを作成するには、<form>タグを使用します。

HTMLフォームとは？基本の使い方と主要な属性をわかりやすく解説

HTMLフォームの主な属性

上記のように、<form>タグにはさまざまな属性を指定できます。ここでは、フォーム作成時に押さえておきたい主要な属性を紹介します。

番号属性と説明
1action：送信されたデータを処理するためのバックエンドスクリプト（URL）を指定します。
2method：データを送信する際に使用するHTTPメソッドを指定します。最もよく使われるのは「GET」と「POST」です。
3target：スクリプトの実行結果を表示するウィンドウやフレームを指定します。「_blank」「_self」「_parent」などの値を設定できます。
4enctype：ブラウザがサーバーへデータを送信する前に、どのようにデータをエンコードするかを指定します。主な値は以下の通りです。
application/x-www-form-urlencoded：シンプルなケースでほとんどのフォームが使用する標準的な方式です。
multipart/form-data：画像やWordファイルなど、バイナリデータをファイルとしてアップロードしたい場合に使用します。

HTMLフォームのコントロール（部品）

フォームでは、テキスト入力欄、チェックボックス、ラジオボタン、ファイル選択ボックス、送信ボタンなど、目的に応じたさまざまな種類のコントロールを使ってデータを収集できます。

それでは、<input>タグを使ってユーザーの入力を受け取る、シンプルなサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
    <head>
        <title>HTMLフォーム</title>
    </head>
    <body>
        <form>
            学生名：<input type = "text" name = "sname" /><br>
            科目名：<input type = "text" name = "ssubject" />
        </form>
    </body>
</html>

上記のコードを実行すると、学生の名前と科目名という2つのテキスト入力欄を持つフォームが表示され、ユーザーの入力を受け取ることができます。

この例では<input>タグにtype属性とname属性を使用しました。<input>タグで使えるその他の主な属性も確認しておきましょう。

<input>タグの主な属性

番号属性と説明
1type：入力コントロールの種類を示します。テキスト入力の場合は「text」を指定します。
2name：コントロールに名前を付けます。この名前はサーバーに送信され、値を識別・取得するために使われます。
3value：コントロールに初期値（デフォルト値）を設定できます。
4size：テキスト入力欄の幅を文字数単位で指定できます。
5maxlength：テキストボックスに入力できる最大文字数を制限できます。

  1. Googleアシスタントのルーチン機能とは?使い方とカスタム設定方法を徹底解説

    Googleアシスタントの「ルーチン」は、特定の言葉を話しかけるだけで、あらかじめ設定した一連の操作を自動的に実行してくれる便利な機能です。すぐに使える6種類の既製ルーチンが用意されているので、ほとんど手間をかけずに活用を始められます。さらに、自分好みにカスタマイズすれば、Googleアシスタントが対応しているあらゆる操作を組み合わせたオリジナルルーチンを作ることも可能です。この記事では、6つの既製ルーチンの概要と設定内容を紹介したうえで、日常を自動化するオリジナルルーチンの作り方まで、わかりやすく解説していきます。Googleアシスタントのルーチン画面へのアクセス方法スマートフォンでGoog

  2. Windows Sysinternalsとは?概要から使い方まで徹底解説

    自分のWindowsパソコンを完全にコントロールできたら素晴らしいと思ったことはありませんか?ほぼすべてのWindowsプロセスやアプリケーションの内部を覗き見できるだけでなく、アプリがアクセスしているファイルやレジストリエントリをリアルタイムで確認できるのは、実に魅力的な機能です。 Sysinternalsは、最も信頼性が高く強力なWindowsシステム管理ツールキットのひとつです。そのほとんどのユーティリティはシンプルなEXEファイルなので、USBフラッシュドライブに入れておけば、持ち運び可能なシステム管理ツールとしていつでも活用できます。 Windows Sysinternalsとは?