Web フロントエンドにおけるフォームの役割は何ですか?-フロントエンドQ&A-php.cn

密码框

单选框

复选框

按钮

下拉框标签

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Jan 29, 2023 am 11:53 AM

ウェブフロントエンド web

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

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

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

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

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

#フォームの役割:

ユーザーにとって、フォームはデータ入力と送信のためのインターフェイスです。
フォームは、Web サイトがユーザー情報を取得する方法です。

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

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

Form タグ

タグ構文形式

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

ログイン後にコピー

一般的に使用される 4 つのメソッド送信メソッド:

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

ログイン後にコピー

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

input tag

input の意味を入力

ラベルは単一のラベルです#type 属性は、異なるコントロールタイプを指定するために異なる属性値を設定します##type 属性に加えて、他の属性もあります

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="text" name="" id="" value="你好">
    </form>

ログイン後にコピー

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

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

#属性

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

密码框

<input type="password" name="" id="" value="">

ログイン後にコピー

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

单选框

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

        男 <input type="radio" name="gender" id="" value=""> 
        女 <input type="radio" name="gender" id="" value="">

ログイン後にコピー

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

复选框

多选框可以选取多个

        爱好： <br> 
        抽烟<input type="checkbox" name="hobby" id="" value=""> 
        喝酒<input type="checkbox" name="hobby" id="" value=""> 
        烫头<input type="checkbox" name="hobby" id="" value="">

ログイン後にコピー

按钮

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

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

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

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="button" name="" id="" value="我是一个普通按钮">
        <input type="submit" name="" id="" value="我是一个提交按钮">
        <input type="reset" name="" id="" value="我是一个重置按钮">
    </form>

ログイン後にコピー

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

下拉框标签

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

        <select name="省市区" id="">
            <option value="">山东</option>
            <option value="">北京</option>
            <option value="">江苏</option>
            <option value="">深圳</option>
            <option value="">上海</option>
        </select>

ログイン後にコピー

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7439

CakePHP チュートリアル

1369

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

Nginx Webサーバーキャディの使用方法 May 30, 2023 pm 12:19 PM

Caddy の概要 Caddy は強力で拡張性の高い Web サーバーであり、現在 Github 上に 38,000 以上のスターが付いています。 Caddy は Go 言語で書かれており、静的リソースのホスティングとリバースプロキシに使用できます。 Caddy には以下の主な特徴があります: Nginx の複雑な構成と比較して、元の Caddyfile 構成は非常にシンプルです; 提供する AdminAPI を通じて構成を動的に変更できます; デフォルトで自動 HTTPS 構成をサポートし、自動的に適用して構成できますHTTPS 証明書; 数万のサイトのデータに拡張可能; 追加の依存関係なしでどこでも実行可能; Go 言語で記述されているため、メモリの安全性がより保証されます。まずはCentOに直接インストールします

ウェブ上の顔面ブロック攻撃に対するリアルタイム保護 (機械学習に基づく) Jun 10, 2023 pm 01:03 PM

顔面遮蔽弾幕とは、映像内の人物を遮ることなく大量の弾幕が浮遊し、人物の背後から浮遊しているように見せることです。機械学習は数年前から普及していますが、これらの機能がブラウザでも実行できることは多くの人に知られていません。この記事では、ビデオ連発における実際的な最適化プロセスを紹介します。記事の最後に、適用可能なシナリオをいくつか示します。このソリューションを開くことを望んでいます。いくつかのアイデアがあります。 mediapipeDemo (https://google.github.io/mediapipe/) は、顔ブロック弾幕のオンデマンドアップアップロードの主流の実装原理を示していますサーバーのバックグラウンド計算により、ビデオ画面内のポートレート領域を抽出し、SVG ストレージに変換しますクライアントがビデオを再生している間、サーバーから SVG をダウンロードし、弾幕、ポートレートと組み合わせる

Java API開発におけるWebサーバー処理にJetty7を使用する Jun 18, 2023 am 10:42 AM

JavaAPI 開発における Web サーバー処理に Jetty7 を使用するインターネットの発展に伴い、Web サーバーはアプリケーション開発の中核部分となり、多くの企業でも注目を集めています。増大するビジネスニーズを満たすために、多くの開発者が Web サーバー開発に Jetty の使用を選択しており、その柔軟性と拡張性は広く認識されています。この記事では、JavaAPI 開発における Jetty7 の使用方法を紹介します。

FRPS サーバーと Web がポート 80 を共有するように nginx を設定する方法 Jun 03, 2023 am 08:19 AM

まず、frpって何？という疑問があると思います。簡単に言うと、frp はイントラネット侵入ツールであり、クライアントを設定すると、サーバー経由でイントラネットにアクセスできるようになります。現在、私のサーバーは Web サイトとして nginx を使用しており、ポート 80 が 1 つだけあります。では、FRP サーバーもポート 80 を使用したい場合はどうすればよいでしょうか?クエリ後、nginx のリバースプロキシを使用してこれを実現できます。追加: frps はサーバー、frpc はクライアントです。ステップ 1: サーバーの nginx.conf 構成ファイルを変更し、次のパラメータを nginx.conf の http{} に追加します。server{listen80

Golang を使用して Web アプリケーションのフォーム検証を実装する方法 Jun 24, 2023 am 09:08 AM

フォーム検証は Web アプリケーション開発において非常に重要なリンクであり、フォームデータを送信する前にデータの有効性をチェックして、アプリケーションのセキュリティ脆弱性やデータエラーを回避できます。 Web アプリケーションのフォーム検証は、Golang を使用すると簡単に実装できます。この記事では、Golang を使用して Web アプリケーションのフォーム検証を実装する方法を紹介します。 1. フォーム検証の基本要素フォーム検証の実装方法を紹介する前に、フォーム検証の基本要素が何であるかを知る必要があります。フォーム要素: フォーム要素は

Web標準の利点は何ですか Sep 20, 2023 pm 03:34 PM

Web 標準の利点には、より優れたクロスプラットフォーム互換性、アクセシビリティ、パフォーマンス、検索エンジンのランキング、開発とメンテナンスのコスト、ユーザーエクスペリエンス、コードのメンテナンス性と再利用性の提供が含まれます。詳細な説明: 1. クロスプラットフォーム互換性により、Web サイトがさまざまなオペレーティングシステム、ブラウザー、デバイス上で正しく表示および実行されることが保証されます; 2. アクセシビリティの向上により、すべてのユーザーが Web サイトにアクセスできるようになります; 3. Web サイトの読み込みが高速化されます。速度、ユーザーはより速くウェブサイトにアクセスして閲覧できるようになり、より良いユーザーエクスペリエンスを提供します; 4. 検索エンジンのランキングの向上など。

PHP は Web 開発におけるフロントエンドですか、それともバックエンドですか? Mar 24, 2024 pm 02:18 PM

PHP は Web 開発のバックエンドに属します。 PHP はサーバー側のスクリプト言語であり、主にサーバー側のロジックを処理し、動的な Web コンテンツを生成するために使用されます。フロントエンドテクノロジーと比較して、PHP はデータベースとの対話、ユーザーリクエストの処理、ページコンテンツの生成などのバックエンド操作に多く使用されます。次に、特定のコード例を使用して、バックエンド開発における PHP のアプリケーションを説明します。まず、データベースに接続してデータをクエリするための簡単な PHP コード例を見てみましょう。

Web 標準のデフォルトのポートは何ですか? Sep 20, 2023 pm 04:05 PM

Web 標準のデフォルトポートは次のとおりです: 1. HTTP、デフォルトのポート番号は 80、2. HTTPS、デフォルトのポート番号は 443、3. FTP、デフォルトのポート番号は 21、4. SSH、デフォルトのポート番号は 22; 5. Telnet、デフォルトのポート番号は 23; 6. SMTP、デフォルトのポート番号は 25; 7. POP3、デフォルトのポート番号は 110; 8. IMAP、デフォルトのポート番号は 143; 9. DNS 、デフォルトのポート番号は 53、10. RDP 、デフォルトのポート番号は 3389 などです。

See all articles

		# type







	#ファイル	テキストフィールド
name		スペースの名前
value		入力コントロールのデフォルトのテキスト値
size		ページ上の入力コントロールの表示幅
	##デフォルトで選択されている項目を選択スペース
	コントロールによって入力できる最大文字数

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

密码框

单选框

复选框

按钮

下拉框标签

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック