ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLフォームタグの使用法

HTMLフォームタグの使用法

小云云
小云云オリジナル
2018-01-26 11:19:406894ブラウズ

通常、d5fd7aea971a85678ba271703566ebfd タグはユーザー入力情報を収集するために使用されます。最も一般的に使用される form タグは、input タグ (d5fd7aea971a85678ba271703566ebfd) です。入力タイプは type 属性 (type) によって定義されます。一般的な入力タイプには、テキスト フィールド、ラジオ ボタン、チェック ボックス、ドロップダウン メニューなどが含まれます。

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは実際にはフォーム要素を含む領域であり、この領域内のさまざまな要素の入力情報は、最終的にフォームを通じてプログラム スクリプトに送信されます。たとえば、一般的なものには、ユーザーのログイン、登録、記事の公開などが含まれ、これらはすべてフォームを介して処理するために動的プログラムに送信されます。このセクションでは主にフォームとフォーム要素について説明します。フォーム情報を動的プログラムに送信する方法については、今後のプログラミング言語のレッスンで説明します。
フォームの領域では、ff9c23ada1bcecdd1a0fb5d5a0f18437 タグを使用して、ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e 内の要素の値がこのフォームを通じて対応するアドレスに送信されます。 。
テキスト フィールド
テキスト フィールドは、ユーザーにテキストを入力する機能を提供します。ユーザーは、テキスト フィールドを長方形のボックスとして解釈し、ボックス内にカーソルを移動します。ユーザーはフォームに文字、数字などを入力できます。
テキストフィールドは、d5fd7aea971a85678ba271703566ebfdタグのtype属性のテキスト値を設定することで定義されます


XML/HTMLコードコンテンツをクリップボードにコピーします

  1. b21857f62ba1cca77e030376a94bcd44

  2. テキストフィールド 1:

    90ec6ad231ec84d9e71b1f93073b1ebf

  3. 99e274bf0d6f1dcc133e7e808ce96cc8 ブラウザは次のように表示されます:

  4. ラジオ ボタン ラジオ ボタンは、ユーザーが登録時に情報を入力するときにオプションに表示されることがほとんどです。このタイプのマルチユーザーでは、ユーザーは次のことのみを許可されます。結果を 1 つ選択します。 ラジオボタンは、d5fd7aea971a85678ba271703566ebfd タグの type 属性の値を radio に設定することで定義されます。

    <form>
    <input type=”radio” name=”sex” value=”male” /> 男生   
    <input type=”radio” name=”sex” value=”female” /> 女生   
    </form>

ブラウザには次のように表示されます:


201678135308382.png (296×89)

チェックボックス
チェックボックスを使用すると、ユーザーは 1 つ以上の対応するオプションをチェックできます。一般的なのは、ログイン時にログイン アカウントを記憶するなどの機能をユーザーに提供することです。ユーザーアンケートページではユーザーから複数の意見を収集することもできます。
チェックボックスは、d5fd7aea971a85678ba271703566ebfd タグの checkbox に type 属性の値を設定することで定義されます

    <form>
    <input type=”checkbox” name=”val1″ />
    前端开拓者不错   
    <input type=”checkbox” name=”val2″ />
    前端开拓者一般   
    </form>
ブラウザには次のように表示されます:


201678135342504.png (164×77)

ドロップダウン メニュー
メニューは情報の選択と同じです。単一の選択も同様ですが、ドロップダウン メニューにはより多くの情報を含めることができます。また、ドロップダウン メニューでは、メニュー値を選択した後に追加のスクリプトを実行できます。
ドロップダウン メニューは 221f08282418e2996498697df914ce4e で始まり、select タグ内の各オプション タグはドロップダウン メニューの値です。

    <form>
    <select name=”cars”>
    <option value=”volvo”>Volvo</option>
    <option value=”saab”>Saab</option>
    <option value=”fiat”>Fiat</option>
    <option value=”audi”>Audi</option>
    </select>
    </form>
ブラウザ表示:


201678135409883.png (203×92)

送信ボタン
送信ボタンは、すべてのフォームの重要な部分です。ユーザーは対応する情報を入力した後、送信ボタンをクリックしてアクションをトリガーし、フォームの値を次のページに送信する必要があります。 ff9c23ada1bcecdd1a0fb5d5a0f18437 タグの action 属性で対応する送信アドレスが設定されている場合、送信ボタンはフォームで取得したすべてのデータをこのアドレスのページに送信します。
送信ボタンは、inputタグに送信するタイプの値を設定することで定義されます。以下は、送信アドレスを検索ページとして設定する、フロントエンド開発者の検索ボックスの例です。

    <form name=”input” action=”http://www.frontopen.com/” method=”get”>
    关键字:   
    <input type=”text” name=”s” id=”s” />
    <input type=”submit” value=”搜索” />
    </form>
ブラウザには次のように表示されます:


201678135442039.png (149×83)

結論: このセクションでは、一般的に使用されるフォーム フロントエンド レイアウト要素の基本的なデモと説明のみを提供します。リアルフォームアプリケーションは主にサーバープログラミング言語で使用され、より多くのパラメータとルールを設定する必要があります。このレッスンでは、フォームの要素を配置する方法を理解するだけで済みます。ほとんどの場合、基本的にバックグラウンド プログラマーと協力して Web サイトの開発を完了できます。

関連する推奨事項:

HTMLフォームのフォーム要素の詳細な説明

ラジオボタンが選択されているかどうかのJQueryフォームの検証体験の概要

WeChatアプレットは入力データを取得するためにフォームフォームを実装するだけです サンプル共有

以上がHTMLフォームタグの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。