HTML フォーム タグの使用方法を学ぶチュートリアル

HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際にはフォーム要素を含む領域です。この領域内のさまざまな要素の入力情報は、最終的にフォームを通じてプログラム スクリプトに送信されます。たとえば、一般的なものとしては、ユーザーのログイン、登録、記事の公開などが挙げられますが、これらはすべてフォームを通じて処理するために動的プログラムに送信されます。このセクションでは、主にフォームとフォーム要素について説明します。フォーム情報を動的プログラムに送信する方法については、今後のプログラミング言語コースで説明します。
フォーム領域は <form> タグによって定義されます。<form></form> 内の要素の値は、このフォームを通じて対応するアドレスに送信されます。

入力情報
一般的に、<input> タグはフォーム内でユーザー入力情報を収集するために使用され、入力タイプは type によって決定されます。
ほとんどの場合に使用されるフォーム タグは、入力タグ (<input>) です。入力タイプは、タイプ属性 (type) によって定義されます。一般的な入力タイプには、テキスト フィールド、ラジオ ボタン、チェック ボックス、ドロップダウン メニューなどがあります。

テキストフィールド
テキスト フィールドは、ユーザーにテキストを入力する機能を提供します。ブラウザーはテキスト フィールドを長方形のボックスとして解釈します。ユーザーは、ボックスにカーソルを移動し、クリックしてカーソルをボックス内に移動できます。ユーザーはフォームに文字や数字などを入力できます。
テキスト フィールドは、<input> タグの type 属性にテキスト値を設定することによって定義されます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <フォーム>   
  2. テキストフィールド1: <入力 タイプ= "テキスト"名前= "名" />   
  3. テキストフィールド2: <入力 タイプ= "テキスト"名前= "姓" />   
  4. </フォーム>   

ブラウザには次のように表示されます。
201678135308382.png (296×89)

ラジオボタン
ラジオ ボタンは、ほとんどの場合、ユーザーが登録時に情報を入力するときのオプションに表示されます。このタイプのボタンは、ユーザーが 1 つの結果のみを選択できる場合に使用されます。
ラジオ ボタンは、<input> タグの type 属性の値を radio に設定することによって定義されます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <フォーム>   
  2. <入力  type = "radio" name = "sex" value = "male" />男性
  3. <入力  type = "radio" name = "sex" value = "female" />女性
  4. </フォーム>   

ブラウザには次のように表示されます:
201678135342504.png (164×77)

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <フォーム>   
  2. <入力 タイプ= "チェックボックス"名前= "val1" />   
  3. フロントエンド開発者は優秀
  4. <入力 タイプ= "チェックボックス"名前= "val2" />   
  5. フロントエンド開発者全般
  6. </フォーム>   

ブラウザには次のように表示されます。
201678135409883.png (203×92)

ドロップダウンメニュー
ドロップダウン メニューは、情報の選択という点ではラジオ ボタンに似ていますが、より多くの情報を保持できます。また、ドロップダウン メニューでは、メニュー値を選択した後に追加のスクリプトを実行できます。
ドロップダウン メニューは <select> タグで始まり、select タグ内の各オプション タグはドロップダウン メニューの値になります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <フォーム>   
  2. <選択 名前= "車" >   
  3. <オプション = "volvo" >ボルボ</オプション>   
  4. <オプション = "saab" >サーブ</オプション>   
  5. <オプション = "fiat" >フィアット</オプション>   
  6. <オプション = "audi" > Audi </オプション>   
  7. </選択>   
  8. </フォーム>   

ブラウザには次のように表示されます:
201678135442039.png (149×83)

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <フォーム 名前= "入力"アクション= "http://www.frontopen.com/"メソッド= "取得" >   
  2. キーワード:
  3. <入力 タイプ= "テキスト"名前= "s" ID = "s" />   
  4. <入力 タイプ= "送信"= "検索" />   
  5. </フォーム>   

ブラウザには次のように表示されます。
201678135509377.png (401×69)

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

<<:  MySQLパーティションテーブルは月別に分類されています

>>:  JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

推薦する

clipboard.js の使用法の概要

目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)

今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。...

HTML 5.1 学習: 14 の新機能とアプリケーション例

序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...

ボタンと入力タイプの違いと注意点

<button> タグ<br />定義と使用法<button> ...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

vue 動的コンポーネント

目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....

JSはjQueryのappend関数を実装します

目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...

GNU Parallelの具体的な使用法

それは何ですか? GNU Parallel は、1 台以上のコンピュータでコンピューティング タスク...

Tomcat が https アクセスをサポートするための手順の説明

tomcat を https アクセスに対応させる方法ステップ: (1)キーストアファイルを生成する...

Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)

vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...

モバイルインターネット時代: レスポンシブウェブデザインが一般的なトレンドに

今はモバイルインターネットが急速に発展している時代です。スマートフォンやタブレットはますます普及し、...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

Xshell を使用して VMware 上の Linux 仮想マシンに接続する (グラフィック手順)

はじめに: 最近 Hadoop プラットフォームの構築を勉強し始めたので、ローカルマシンに VMwa...