コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML フォームに関する包括的な知識

HTML フォームに関する包括的な知識

迷茫
リリース： 2017-03-25 15:23:30
オリジナル
2549 人が閲覧しました

8.1 フォームタグ

......

☟ フォーム属性:

◆ action: フォームを指定するために使用されるサーバー プログラム。フォームが送信されたときにフォーム データの送信先を指定します。 action の値は次のとおりです。まず、URL (絶対 URL/相対 URL) で、通常はサーバー側のプログラムを指します。プログラムはフォームによって送信されたデータ (つまり、フォーム要素の値) を受け取り、それに応じて処理します。 。例:

ユーザーがこのフォームを送信すると、サーバーは「reg.ashx」という名前の汎用ハンドラーを実行します。次に、mailto プロトコルの URL アドレスを使用します。これにより、フォームのコンテンツが電子メールとして送信されます。訪問者のコンピュータに電子メール送信プログラムがインストールされ、適切に設定されている必要があるため、この状況は比較的まれです。 3 番目は、null 値です。アクションが null であるか、書き込まれていない場合、それは現在のページに送信されることを意味します。

◆ method: この属性は、ブラウザがフォーム内のデータをサーバー ハンドラーに送信する方法を定義します。最も一般的に使用されるのは get と post で、デフォルトでは get メソッドが使用されます。

取得と投稿の違いは何ですか?

① データクエリ: たとえば、フォーラムを閲覧するとき、URL には通常、カテゴリ、ページ番号、ページごとのレコード数などの情報が含まれます。 getメソッドを使えば、問い合わせたい情報（条件）が一目でわかります。 post ではこの情報が隠蔽されるため、クエリ条件を確認するのに不便です。

② 機密データの提出（セキュリティ）：ユーザーの登録、ユーザー情報の変更などの記録の変更または追加を行う場合。 URL に追加された get メソッドにより機密情報が漏洩する可能性があります。 post メソッドでは機密情報が隠蔽される可能性があります。

デモ:

get メソッドを使用して送信をクリックすると、URL は次のようになります: php Chinese website/ashx/login.ashx?login_username=admin&login_pswd=123456

post メソッドを使用して送信をクリックすると、URL は次のようになります: php Chinese website/ashx /login.ashx ☜アクションで指定したURLのみであり、URLにパラメータが付加されていないことがわかります。

③ ビッグデータテキスト配信：クエリにはgetが便利ですが、URLに添付されるため、各ブラウザにもURLの長さ制限があります。 IE: 2048 文字。 ChromeとFFでは8182文字あるようです。 Postにはそのような制限はないようです。

◆ onsubmit: フォームを処理するためのスクリプト関数を指定するために使用されます。

◆ enctype: MIME タイプを設定します。デフォルト値は application/x-www-form-urlencoded です。ファイルをサーバーにアップロードする必要がある場合は、この属性を multipart/form-data に設定する必要があります

8.2 入力タグ

各データを識別するために、ほとんどのフォーム要素は input を使用して定義できます。フォームを指定する必要があります この要素は name 属性を追加するため、 name は必須属性です、 name="ドメイン名"

(1) テキストボックスのテキスト

入力情報はプレーンテキストで表示されます

用户名: <input type="text" name="user" />
ログイン後にコピー

以下は単一行テキストボックスの主な属性です:

name (名前、スクリプトでデータを取得するための識別子として使用できます)、maxlength (テキストに入力できる最大文字数を設定します)ボックス)、サイズ (テキスト ボックスの長さ、およそバイト単位)

値: テキスト ボックスを指定します。デフォルト値は、ブラウザーがフォームを初めて表示するとき、またはユーザーがフォームをクリックした後にテキスト ボックスに表示される値です。リセットボタン。

readonly: 読み取り専用属性。readonly 属性が設定されている場合、テキスト ボックスにフォーカスを取得できますが、ユーザーはテキスト ボックス内の値を変更できません。

disabled: 無効。テキスト ボックスが無効になっている場合、ユーザーはテキスト ボックスの値を変更できません。また、フォームを送信するときに、ブラウザーはそのテキスト ボックスの値をサーバーに送信しません。

(2)パスワードボックスパスワード

「*」または「●」記号を使用して入力した文字をエコーし​​、機密性を維持します

密码: <input type="password" name="pwd" />
ログイン後にコピー

(3) 隠しドメイン隠し

隠しフィールドビューアには表示されません。主に、フィールドに設定された値を別のページに転送するために使用されます

<input type="hidden" name="hid" value="域值">
ログイン後にコピー

(4) ファイルフィールドfile

ファイルフィールドは、ローカルのファイルをアップロードできますサーバー側では、ファイルアップロードのデフォルト値はありません。この機能を使用する場合は、form タグにメソッド属性を指定する必要があります。メソッドを post として指定するには、enctype 属性を multipart/form-data として指定します。そうしないと、ファイル コンテンツをアップロードできません

<input type="file" name="photo">
ログイン後にコピー

(5) ラジオ ボタン radio

丸いボックスで表されるオプションのセットから 1 つの選択を行います

使用法: ラジオ選択機能を実装するには、名前の値等しくなければなりません。同じ名前のラジオ ボタンのグループを使用し、異なるラジオに異なる値を設定すると、個別に判断することなく、指定された名前の値を取得することで、誰が選択されているかを知ることができます。ラジオボタンの要素値は、value 属性によって明示的に設定されます。フォームが送信されると、値を明示的に設定せずに、選択された項目の値と名前がパッケージ化されて送信されます。 

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->
ログイン後にコピー

(6)チェックボタンチェックボックス

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
ログイン後にコピー

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
ログイン後にコピー

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
ログイン後にコピー

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
ログイン後にコピー

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
ログイン後にコピー

(8)选择列表标记