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

フォームには 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 フロントエンドにおけるフォームの役割は何ですか?

		# type







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