美しいHTMLフォームを作成します。 HTML でのフォーム。 アニメーション検索入力

サイト上の HTML フォームを定義する HTML タグ

インターネット上でウェブサイトや個別ページを制作します。訪問者とのコミュニケーションのため。

HTMLフォームサイトへの訪問者を登録したり、インタラクティブなアンケートや投票を行ったり、メッセージの送信や購入などを行うために使用されます。 HTMLこのフォームは 1 つの目的のために作成されます。それは、情報を収集し、その後ソフトウェア スクリプトまたは電子メールで処理するために送信することです。

HTML フォームの例 | サイトに入る

タグ、属性、値

  • - 形状を決定します。
  • name="" - フォームの名前を定義します。
  • method="" - フォームからデータを送信する方法を定義します。 値: "get" (デフォルト) および "post" 。 「ポスト」方式は、大量のデータを転送できるため、よく使用されます。
  • action="" - データが処理のために送信される URL を定義します。 私たちの場合 - enter_data.php ..
  • - ボタン、スイッチ、データ入力用のテキストフィールドなどのフォーム要素を定義します。
  • type="text" - データ入力用のテキスト フィールドを定義します。
  • type="password" - パスワードを入力するフィールドを定義します。テキストはアスタリスクまたは丸の形式で表示されます。
  • type="checkbox" - ラジオ ボタンを定義します。
  • type="hidden" - 追加情報をサーバーに転送するために使用される、非表示のフォーム要素を定義します。
  • size="25" - テキストフィールドの文字数。
  • maxlength="30" - 入力できる最大文字数。
  • value="" - ラジオ ボタンまたはスイッチに関連する場合に、処理のために送信される値を定義します。 テキスト フィールドまたはボタンの一部としてのこの属性の値は、たとえば、上の例では Vasya または Login として表示されます。

HTML フォームの例 | サイトへのコメント

HTMLフォームの例




名前



郵便










タグ、属性、値

  • action="http://site/comments.php" - フォームからのデータの送信先となる URL を定義します。
  • id="" - フォーム要素の名前と識別子を定義します。
  • name="" - フォーム要素の名前を定義します。
  • - フォームの一部としてテキストフィールドを定義します。
  • Cols="" - フォームのテキストフィールドの列数を決定します。
  • rows="" - フォームのテキストフィールドの行数を定義します。

間の場合 テキストを配置すると、簡単に削除できる例としてフィールド内に表示されます。

HTML フォームの例 | ドロップダウンリスト

HTMLフォーム




タグ、属性、値

  • - 選択する位置を含むリストを定義します。
  • size="" - 表示されるリストの位置の数を決定します。 値が 1 の場合、ドロップダウン リストを扱います。
  • - リストの位置 (項目) を決定します。
  • value="" - 処理のためにフォームによって指定された URL に送信される値が含まれます。
  • selected="selected" - 例としてリスト項目を強調表示します。

HTML フォームの例 | スクロールバー付きリスト

size="" 属性の値を増やすと、スクロール バー付きのリストが表示されます。

1 番目の位置 2 番目の位置 3 番目の位置 4 番目の位置

HTMLフォーム




このオプションでは、multiple="multiple" フラグを使用します。これにより、複数の位置を選択できるようになります。 これが存在しない場合は、項目を 1 つだけ選択できます。

  • type="submit" - ボタンを定義します。
  • type="reset" - リセット ボタンを定義します。
  • value="" - ボタンのラベルを定義します。
  • さらに以下を参照してください。

    全てにおいて良い日。 アレクセイ・グリニンから連絡があります。 前回の記事で取り上げた サイトのエンコーディングの問題。 この記事でお話ししたいのは、 HTML でフォームを作成する。 これが HTML で最も重要なトピックだと思います。 英語の先生の言葉を思い出します。 彼女は、動詞「get」のすべての語形の意味を知っていれば、彼らの助けがなければ英語でコミュニケーションをとることができない、と言いました。 HTMLのフォームも同様です。 フォームを知っているなら、HTML についてもよく知っているはずです。 現在では、HTML フォームを持たないサイトはほとんどないでしょう。 フォームは、登録、承認、サブスクリプション、ゲストブック、フォーラムの作成時、独自のエンジンの作成時など、あらゆる場所で使用されます。 記事はおそらく長くなるので、準備してください。 例を使用してフォームの学習をすぐに始めましょう。

    HTMLフォームの作成

    名前
    パスワード

    検索エンジンを選択してください グーグル ヤンデックス ランブラー
    形状を探索する準備はできましたか? はい もちろんそうです =)
    いずれかのオプションを選択してください
    ファイル

    シンプルボタン
    フォームを送信
    フォームフィールドをクリアする


    一目見ると震えます。 実際、ここではすべてが簡単です。少しずつ理解していきましょう。

    フォームの作成キーワードから始まる

    。 これはペアのタグであるため、フォームの作成はタグで終了する必要があります
    。 タグのところに
    いくつかの属性があります。 name 属性はフォームの名前を指定します (これは、JavaScript などでフォームを処理するために必要です)。 もちろん、名前を指定しないこともできますが、そうすることをお勧めします。 action 属性は、フォームを処理するスクリプト (通常は PHP スクリプト) の名前を指定し、 action="request.php" のようになります。 私たちの場合、フォームは処理されていません。 Method 属性は、オープン ( get ) または非表示 ( post ) のどちらの方法でデータを転送するかを示します。 これら 2 つの異なる属性を使用してブラウザ行に表示される内容の例を示します。

    1) post メソッドを使用する場合: mysite.ru/request.php。
    2) get メソッドを使用する場合: mysite.ru/request.php?myname="アレックス"&姓="グリニン".
    違いは明らかだと思います。

    フォーム要素:

    1) テストフィールド。 テキストフィールドはタグを使用して作成されます 、実際にはフォームのすべての要素と同様です。 type="text" 属性はテキスト フィールドの作成を担当します。 すべてのフォーム要素と同様、name 属性は名前です。 value 属性はデフォルト値です。

    2) パスワードフィールド。 同じタグを使用して設定する type="password" 属性を使用します。

    3) テキストエリア。 タグを使って設定する 。 この要素にはいくつかの属性があります。 name 属性を設定することもできます。 rows 属性は行数を担当し、cols 属性は列数を担当します。 最新のブラウザでは、テキスト領域を拡張して、テキストを入力しやすくすることができます。 rows 属性とcols 属性は、いわば、フォームを圧縮できる最小値です (最初、ページが読み込まれるとき、テキスト領域のサイズは rows 属性とcols 属性で指定された値になります)。

    4) ラジオボタン。 ラジオ ボタンの目的は、複数の値から 1 つを選択することです。 ラジオボタンもタグを使用して作成されます type="radio" 属性を使用します。 value 属性は、ラジオ ボタンに対応する値を指定します。 この点に注目していただきたいのですが、この例では、3 つのボタンすべてが同じ name 属性値を持っています。 それらの name 属性値が異なる場合は、それらすべてをクリックできます。 したがって、正しく処理することができなくなります。 selected 属性 (値はありません) は、デフォルトでどのラジオ ボタンが選択されるかを示します。

    5) チェックボックス。 ラジオボタンとは異なり、チェックボックスはすべてクリックできます。 例を入力して自分の目で確認してください。 タグを使用して作成されました type="checkbox" 属性を使用します。 残りの属性の意味はラジオ ボタンの意味と同じです。 すべてのボックスのチェックを外すと、空の値が返されることだけは言っておきます。 私たちの場合、それは mycheck="" になります。

    6) ドロップダウンリスト。 ドロップダウンリストはタグを使用して作成されます 。 このデザインでは、タグも使用する必要があります

    7) ファイルを送信するフィールド。 たとえば、プロフィールのアバターを設定するときなど、ファイルを複数回ダウンロードして送信したことがあるのではないでしょうか。 このような要素は、 タグを使用して実装されます。 type="file" 属性を使用します。 最も難しいのはファイルを正しく処理することですが、これについては別の記事で説明します。

    8) 隠しフィールド。 場合によっては、フォームの残りの部分とともに一部のデータを転送する必要がある場合があります。 これがタグの目的です。 type="hidden" 属性を使用します。 このフィールドはフォーム自体には表示されませんが、ページのソース コードを見ると (ページを右クリックして「ソース コード」を選択するか、「ctrl+u」キーの組み合わせを押すと) 確認できます。 。

    9) ボタン。 ボタンはタグを使用して作成されます type="button" 属性を使用します。 value 属性は、ボタンに何を書き込むかを決定します。 ボタンは通常、何らかのイベントを処理するために機能します。 ボタン イベントについては、次のいずれかの記事で読むことができます。

    10) フォームを送信します。 基本的にこれは同じボタンですが、type="submit" 属性が付いています。 ボタンをクリックすると、タグの action 属性で指定されたパスに沿ってフォームが処理されます。

    HTML フォームは、ユーザーが関心のある情報を入力できるドキュメントの一部であり、その後、その情報がサーバー側で受け入れられて処理されます。 つまり、フォームはユーザーが入力した情報を収集するために使用されます。

    現在のラベルがどのフォーム要素に属しているかを判断するには、タグの for 属性を使用する必要があります

    使用例を見てみましょう。

    </span>タグの使用例 <label><span> >


    この例では、次のことを行います。

    • 内部 初めフォーム:
      • 投稿しました ラジオボタン ( ) を使用して、限られた数のオプションから 1 つを選択します。 同じフォーム内のラジオボタンについても注意してください。 同じ名前を指定する必要があります、異なる値を示しました。 のために 初め selected は、ページの読み込み時に要素が事前に選択されるように指定します (この場合は、値が yes のラジオ ボタン)。 さらに、要素の一意の識別子を定義するラジオ ボタンのグローバル属性を指定しました。
      • 2つの要素を配置しました
    • 内部 2番フォーム:
      • 投稿しました ラジオボタン ( ) を使用して、限られた数のオプションから 1 つを選択します。 のために 2番ラジオ ボタンの場合、checked 属性を指定しました。これは、ページの読み込み時に要素が事前に選択される必要があることを示します (この場合、値 no を持つラジオ ボタン)。 さらに、フォーム内のラジオ ボタンには一意の値と同じ名前を指定しました。
      • 2つの要素を配置しました

    ブラウザでは、テキスト ラベルを使用するための両方のオプション (メソッド) は同じように見えます。

    入力フィールドのツールチップ

    使用例を見てみましょう。

    プレースホルダー属性の使用例 <span>
    ログイン: タイプ = "テキスト" 名前 = "ログイン" プレースホルダー = 「ログイン情報を入力してください」>

    パスワード: タイプ = "パスワード" 名前 = "パスワード" プレースホルダー = "パスワードを入力してください">


    この例では、要素に次のように指定しました 「テキスト」 (単一行のテキスト・フィールド) と「パスワード」 (パスワード・フィールド) を入力すると、入力の予期される値を説明するユーザー用のテキスト・プロンプト (プレースホルダー属性) が表示されます。

    この例の結果:

    トピックに関する質問とタスク

    次のトピックに進む前に、練習課題を完了してください。

    • 得た知識を使用して、次の注文フォームを作成します。

    注意: 選択が必要なフィールドでは、要素自体だけでなくテキストをクリックすることで選択できる必要があります。

    演習を完了したら、別のウィンドウでサンプルを開いてページ コードを検査し、すべてが正しく行われたことを確認します。

    インターネットを巡回しているときに、登録フォーム、ログイン フォーム、フィードバック フォームなど、さまざまなフォームに遭遇したことがあるはずです。 HTMLフォーム.

    実際には、フォームはさまざまな入力要素 (テキスト フィールド、テキスト エリア、ラジオ ボタン、ラジオ ボタン、ボタンなど) で構成されます。

    この記事では、あらゆる .html を作成する方法を学びます。

    まずは簡単なものを作成します HTMLページ、そこにコンテナー (タグ

    )、その内容を中央に揃えます。 問題なく対処できることを願っています。

    それではフォームを見てみましょう。 フォームはタグで始まります

    したがって、終了タグで終わります
    。 このタグには、入力することが非常に望ましい属性がいくつかあります。 まず、タグ属性を備えた単純なフォームを作成しましょう
    それぞれの目的をより明確に理解できるようにするためです。


    ここで、次の属性を持つフォームの説明を始めます。

    1) 属性「 名前"。この属性の値は名前を意味します HTMLフォーム。 なぜこれが必要なのかという疑問が生じます。 答えは非常に簡単です。1 つのフォームではなく複数のフォームを使用する場合、あるフォームを別のフォームと区別するために、異なる名前を設定する必要があります。 また、名前自体は、たとえば次のようにしてフォームにアクセスするために必要です。 JavaScript。 ちょっとした秘密を教えます。使用することはお勧めしませんが、正直に言うためにお話しします。 実際、フォームは名前がなくても簡単に区別できるため、一般的にはフォーム名はまったく必要ありません。 しかし、私 強く各フォームの役割を理解しやすくなるため、フォームに名前を付けることをお勧めします。

    2) 属性「 アクション"。この属性の値は、フォームを処理するスクリプト ファイルへのパスを決定します。つまり、データをフォームに入力するだけでは十分ではなく、データはそれに応じて処理される必要があり、これがまさにパスです。これに ハンドラーファイル属性値「」で見つかります。 アクション".

    3) 属性「 方法"。これは 2 つの非常に一般的な意味のいずれかを持ちます。" 役職" そして " 得る"。この属性は送信方法を決定します。詳細については説明しませんが、最初の方法はデータの非表示送信であり、2 番目の方法はオープンなものであるとだけ言っておきます。さらに明確にするために、2 つの方法を見てみましょう。移行アドレス:

    A) http://mysite.ru/scipt/request.php

    b) http://mysite.ru/script/request.php?a=7&b=マイケル

    最初のケースでは、ユーザーは自分が送信している内容を確認できません (メソッド「 役職")、2番目では、変数の名前とその値が実際に表示されます(メソッド" 得る")。記事の最後では、2 つの異なる方法を使用してフォームを送信して、それらが異なることを確認できます。しかし、今のところは次のように述べておきます。 多くの方法」 役職」、つまり隠し送信です。

    これはフォーム自体の説明でしたが、ここでフォームに要素を追加できるようになります。

    最初に追加するのはテキストフィールドです。 タグを使用してテキストフィールドを追加する 、というよりは、このタグの属性を使用します。 タイプ「意味がある」 文章また、テキストフィールドを作成する前に、それがどのような種類のフィールドであるかを記述することをお勧めします。たとえば、「 あなたの名前"。タグ内

    次の行を書きます:

    あなたの名前:

    もう一度、属性を分解してみましょう。

    1) 属性「 タイプ" は、入力要素のタイプを担当します。この場合、これが通常のテキスト フィールドであることを示しました。次の要素で、この属性の値を変更します。

    2) 属性「 名前" は要素の名前を担当します。ここでは、このフィールドの名前が ファーストネーム.

    3) 属性「 価値" は、このフィールドのデフォルト値を担当します。

    よく言われるように、100 回聞くよりも 1 回見たほうが良いので、ダイヤルしたほうがいいです ( さらに、入力するだけで、コピーしないでください。) エディターでこのテキストを入力し、ブラウザーで結果を確認します。

    次に、別の同様のフィールドを作成しましょう。ただし、通常の文字を入力するためではなく、パスワードを入力するためのものです。 つまり、すべてが同じである必要がありますが、テキストだけが後ろに隠れる必要があります。 アスタリスク。 したがって、次の行 (タグ
    )、次のコードを書いてみましょう。

    あなたのパスワード:

    ご覧のとおり、属性の値は " タイプ"は " パスワード"。残りの属性は通常のテキスト フィールドと同じです。

    次の要素はドロップダウン リストです。 ここではドロップダウン リストの作成を宣言するだけでなく、このリストに要素を追加する必要があるため、作成は少し複雑になります。 次の行に移って(これ以上は触れません)、次のように書きましょう。 HTMLコード.

    選択肢一つを選択してください:

    鬼ごっこ 。 属性 " 名前」については何度か説明しているのでわかりやすいです。 リスト項目はタグを使用して作成されます 。 属性値「 価値" 変数がどのような値を持つかを意味します 選択(たとえば、 JavaScript)、つまり、どちらかです 選択肢 = 1、 または 選択肢 = 2、 または 選択肢 = 3。 タグ記述終了直後 ユーザーがドロップダウン リストに表示する内容が表示されます。 繰り返しますが、ブラウザで見る方が良いです。すべてがすぐに分かります。

    次に、タグを使用してテキストエリアを追加しましょう

    ここでは、高さのテキスト領域を作成しています。 10 文字列 (属性値 " ") と幅 15 文字(属性値「 コル").

    このペアのタグ内で、デフォルトのテキスト領域のテキストが指定されます。 実際のところ、ここではこれ以上言うことはありません。 次へ移りましょう。

    次の要素はラジオ ボタンです。 ラジオボタンはこのような「」の集合です。 サークル」から 1 つだけ選択できます。ラジオ ボタンは次の方法で作成されます。 HTMLタグ 、または、より正確には、値を使用します。 無線"属性" タイプこんな感じで書いてみましょう HTMLコード:

    1 つ選択してください:
    オプション1
    オプション 2
    オプション 3

    ここでは属性「」に焦点を当てます。 名前なぜなら、名前の設定に加えて、別の非常に重要な機能があるからです。 ないこれら 3 つのラジオ ボタンの名前を同じにすると、それぞれが独立するため、複数のオプションを一度に選択できます。 これを確認するには、名前を変更し、一度に複数のオプションを選択してみてください。そうすれば、私の言葉をすぐに納得できるでしょう。 したがって、ラジオ ボタンの 1 つのグループは同じ属性値を持つ必要があります。 名前"。属性" 価値" は変数の値を意味します " チョイスラジオ" (再び、たとえば、 JavaScript)。 タグ記述の直後 対応するラジオ ボタンの隣にユーザーに表示されるテキストがあります。

    フォームのもう 1 つの要素はスイッチ ( チェックボックス)。 タグを使用して再度作成されます 。 次の行を書いてみましょう。

    あなたは私たちのルールに同意します:

    ここではすべてが透明であると思うので、説明は省略します。 ブラウザでどのように見えるかを確認することをお勧めします。 そして、チェックボックスがチェックされている場合、変数の値は「 条項" 意思 " はい"が成立しない場合、この変数の値は ""、つまり空の文字列になります。

    もう 1 つの要素はファイル選択フィールドです。 確かに、サーバーにファイルをアップロードしたことはありますが、そのためにファイル名挿入フィールドを使用することがよくありました。 このフィールドは、すでに退屈なタグを使用して作成されています 。 次のように書きましょう:

    ダウンロードするファイルを選択してください:

    フォームは HTML の最も重要なインタラクティブ要素であり、ページ開発者が訪問者とインタラクティブに対話できるようになります。 彼らの助けを借りて、ユーザーは特定のノードへの訪問に関するコメントを返したり、リクエストを転送したり、登録したりすることができます。 開発者はフォームを作成して質問し、ユーザーはフォームに入力して回答します。 フォームの内容は CGI スクリプトに渡されるか、受信者に電子メールで送信されます。 フォームの作成プロセス自体は 2 つの段階で構成されます。 1 つ目はフォーム自体の作成であり、2 つ目はサーバー上で CGI スクリプトを作成することです。 フォームは、さまざまなタグと属性を組み合わせて使用​​して作成されます

    :

    要素

    はすべてのフォームの前提条件です。 次の属性を持つことができます。

    この属性は、データが CGI スクリプトに渡される方法を指定します。 ここでは、デフォルトで GET プロトコルが選択されていますが、ほとんどの場合、開発者は大量のデータを転送できる POST プロトコルを使用します。

    action この属性は、CGI スクリプトのパスまたは電子メール アドレスを指定します。

    enctype この属性は、フォームのコンテンツをエンコードする方法を指定します。 言い換えれば、サーバーに送信する前に情報をエンコードする方法をブラウザーに指示します。 デフォルトは x-www-form-encoded です。

    スクリプト フォームの構文は次のとおりです。

    メールフォームの構文:

    要素 すべてのフォーム要素のベースとなります。 ボタン、グラフィック、チェックボックス、ラジオボタン、パスワード、テキストフィールドをフォームに埋め込むために使用されます。 フォーム間の外部的な違いにもかかわらず、それらはすべて、名前:値のペアの形式で CGI スクリプトにデータを送信します。 要素には、指定されたタイプの 8 つの属性を含めることができます。

    TEXT 他のフォーム要素には入力できない情報を入力するために使用される 1 行のテキスト フィールド。 ここには、名前、住所、役職、電話番号、趣味、あらゆる種類のデータが入力されます。 要素には次の属性を含めることができます。

    構文:

    PASSWORD 入力された文字の代わりにアスタリスクが表示される 1 行のフィールド。 要素には次の属性を含めることができます。

    最大長。 入力値の最大許容長を文字数で設定します。

    サイズ。 許可されるフィールドの最大長を文字数で設定します。

    価値。 変更可能なデフォルト値を設定します。

    構文:

    HIDDEN別のタイプの非表示情報入力。 ユーザーが変更できない情報をスクリプトに渡すことができます。 一部の CGI プログラムは、名前や番号などの情報をあるページから別のページに伝えるために隠しフィールドを使用します。 このアプローチにより、データを再入力する必要がなくなり、ユーザーの作業が大幅に容易になります。 たとえば、HTML ソース コードを含むファイルを送信するには、次の構造を使用します。

    チェックボックス フラグは、ユーザーが単音節で回答できるようにするために使用されます: はい/いいえ、真/偽、さらに多い/少ないなど。 通常は十字架か鳥のように見えます。 要素には次の属性を含めることができます。

    チェックした。 チェックボックスのデフォルトの初期状態を設定します。

    価値。 変更可能なデフォルト値を設定します。

    構文:

    RADIO スイッチは多くの点でチェックボックスに似ていますが、より幅広い選択機能が異なるだけです。 ラジオ ボタンのグループ内で選択できるのは 1 つだけです。 スイッチごとに、個別の INPUT 要素が指定されます。

    SUBMIT このボタンをクリックすると、フォームの内容が要素の action 属性で指定されたスクリプトに送信されます。

    。 ボタンを使用して、合計の計算、ページのロード、データの送信、値のリセットを行うことができます。 構文:

    RESET ボタンはデフォルト値に戻すために使用します。 デフォルト値が指定されていない場合は、単にゼロにリセットされます。 ボタンの幅は他の要素によって異なる場合があります。 value 属性もあります。

    構文:

    IMAGE SUBMIT ボタンとよく似ていますが、画像をボタンとして使用する点のみが異なります。 利点の 1 つは、ユーザーのクリックの座標を転送できることで、これにより画像のマップを整理できるようになります。 要素には次の属性を含めることができます。

    ソース。 画像ファイルのURLを指定します。

    整列します。 TOP、MIDDLE、BOTTOM の値を使用して、テキストに対する画像の配置を設定します。

    名前。 マップの名前を設定します。これも座標とともにスクリプトに送信されます。

    構文:

    BUTTON 別のボタンを作成します。ユーザーのブラウザは value 属性を元のファイル名として使用できます。

    構文:

    FILE ファイル選択コントロールを作成します。 構文:

    ACCESSKEY 押されたときにフィールドを処理するボタンを指定します。 構文:

    SIZE 要素の幅をピクセル単位で指定します。 構文:

    DISABLED フィールドの内容またはボタンの位置を変更する機能を無効にします。 構文:

    要素

    要素 構文:

    属性があります:

    選択されました。 最初に選択した単語を指定します。

    価値。 選択した単語の意味をスクリプトに設定します。

    要素 要素の論理的なグループ化に使用されます

    要素 これは、フォームのようなものを作成し、テキストを含む行を入力してリクエストを生成できる最も単純な要素です。

    例: 現在のページで、要素を使用してベース URL が設定されているとします。 次に、ユーザーが検索キーワード フィールドに word1、word2、word3 を入力すると、ブラウザは http://www.name.domain/?word1+word2+word3 の形式でリクエストを生成し、サーバーの検索エンジンに送信します。サーバー検索プログラムが文字を使用した標準のクエリ構文をサポートしているかどうか? + を押すと検索が実行されます。

    要素

    name は要素の名前を指定します。

    value は要素の値を設定します。

    type は、ボタンとして使用される場合、次の値を取ります: button、submit、reset。

    無効にすると、指定された要素が使用できなくなります

    tabindex は、Tab キーを使用したナビゲーション順序内の位置を決定します。無効になっているフォーム フィールドは順序に関与しません。

    accesskey はアクセスキーを指定します。

    要素

    要素

    フォーム要素を論理的にグループ化できます。 構文:
    名前

    要素 フォーム要素の論理グループに名前を付けることができます。 構文: 名前