ホームページ  >  記事  >  ウェブフロントエンド  >  Web フロントエンドにおけるフォームの役割は何ですか?

Web フロントエンドにおけるフォームの役割は何ですか?

青灯夜游
青灯夜游オリジナル
2023-01-29 11:53:242845ブラウズ

フォームには 2 つの機能があります: 1. ユーザーにとっては、データ入力と送信のためのインターフェイスです。2. Web サイトにとっては、ユーザー情報を取得する手段です。フォームには 3 つの基本コンポーネントがあります: 1. フォーム データの処理に使用される CGI プログラムの URL とデータをサーバーに送信するメソッドが含まれるフォーム タグ; 2. テキスト ボックスを含むフォーム フィールドパスワードボックス、隠しフィールド、複数行テキストボックスなど 3. 送信ボタン、リセットボタン、一般ボタンなどのフォームボタンは、サーバー上のCGIスクリプトへのデータ転送や入力のキャンセルなどに使用されます。

Web フロントエンドにおけるフォームの役割は何ですか?

このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

Web フロントエンドのフォーム

Web ページにおけるフォームの役割を過小評価することはできません。主にデータ収集を担当します。たとえば、訪問者の名前やメールアドレス、アンケート、ゲストブックなどを収集できます。

#フォームの役割:

  • ユーザーにとって、フォームはデータ入力と送信のためのインターフェイスです。

  • フォームは、Web サイトがユーザー情報を取得する方法です。

#フォームには 3 つの基本コンポーネントがあります:

    #フォーム タグ
  • : これフォームデータの処理に使用される CGI プログラムの URL と、データをサーバーに送信するためのメソッドが含まれています。

  • フォーム フィールド: テキスト ボックス、パスワード ボックス、隠しフィールド、複数行のテキスト ボックス、チェック ボックス、ラジオ ボタン ボックス、ドロップダウン選択ボックス、ファイル アップロード ボックスなど。
  • フォーム ボタン: 送信ボタン、リセット ボタン、一般ボタンを含み、サーバー上の CGI スクリプトにデータを転送したり、入力をキャンセルしたりするために使用されます。フォーム ボタンを使用して他の定義を制御することもできます。スクリプト処理。

Form タグ

form タグは、ユーザー入力用の HTML フォーム (フォーム) を作成するために使用されます。フィールド) を使用してユーザー情報の収集と配信を実現し、フォーム内のすべてのコンテンツがサーバーに送信されます。

フォーム フォーム フィールドには、、、< ; select> などのコントロール ラベル (テキスト フィールド、チェック ボックス、ラジオ ボックス、送信ボタンなど) など、さまざまな対話型コントロールを含めることができます。 ;、 およびその他のタグ。

タグ構文形式

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>
一般的に使用される 4 つのメソッド送信メソッド:

get         一般用来查询信息
post        一般用来新增信息
put         一般用来修改信息
delete      一般用来删除信息

フォーム フィールドとフォームbutton

input tag

input の意味を入力
  • <input>
  • ラベルは単一のラベルです#type 属性は、異なるコントロール タイプを指定するために異なる属性値を設定します##type 属性に加えて、他の属性もあります
  • type="text" は通常の入力ボックスで、value はその中の値です。名前と ID は、js を記述するときに使用されます。

    
        <input>     

Web フロントエンドにおけるフォームの役割は何ですか?input タグの一部の属性:

checked 属性は、ラジオ ボタンとチェック ボックスでのみ使用できます

#属性

属性値#説明 Text単一行テキスト入力ボックスPasswordパスワード入力ボックスラジオラジオ ボタンチェックボックスチェックボックス##ボタン通常のボタン送信送信ボタンリセットリセットボタン画像画像フォームの送信ボタン##チェックありMaxlength#

密码框

<input>

Web フロントエンドにおけるフォームの役割は何ですか?

单选框

name相同的单选框智能选择一个

        男 <input> 
        女 <input>

Web フロントエンドにおけるフォームの役割は何ですか?

复选框

多选框可以选取多个

        爱好: 
          抽烟<input>          喝酒<input>          烫头<input>

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

    
        <input>         <input>         <input>     

Web フロントエンドにおけるフォームの役割は何ですか?

下拉框标签

下拉框标签有点特殊,不是input的属性而是一个单独的标签

        <select>
            <option>山东</option>
            <option>北京</option>
            <option>江苏</option>
            <option>深圳</option>
            <option>上海</option>
        </select>

Web フロントエンドにおけるフォームの役割は何ですか?

相关推荐:《html视频教程

# type







#ファイル テキスト フィールド
name
スペースの名前
value
入力コントロールのデフォルトのテキスト値
size
ページ上の入力コントロールの表示幅

##デフォルトで選択されている項目を選択スペース

コントロールによって入力できる最大文字数

以上がWeb フロントエンドにおけるフォームの役割は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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