5.HTMLフォームtag_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

5.HTMLフォームtag_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

フォームとフォームコントロールの主な機能は、ユーザーエクスペリエンスを収集することです。ユーザーがフォームを送信すると、ユーザーが入力したコンテンツがリクエストパラメーターとしてリモートサーバーに送信されます。

1、フォームタグ

: この要素はビジュアルインターフェイスを生成しませんが、他のコントロールをこのタグに配置する必要があります。よく使用される属性:
action: この属性は必須であり、スタンドアロンフォームの確認ボタンが使用されるときにフォームが送信されるアドレスを指定するために使用されます。絶対アドレスまたは相対アドレスを指定できます。
メソッド: フォームを送信するときに送信するリクエストのタイプ (get または post) を指定するために使用されます。get と post の違いについては http ブログで説明されているため、ここでは詳しく説明しません。
enctype: フォームコンテンツをエンコードするときに使用される文字セットを指定するために使用されます。デフォルトでは、フォームデータは「application/x-www-form-urlencoded」としてエンコードされます。つまり、すべての文字はサーバーに送信される前にエンコードされます (スペースは「+」プラス記号に変換され、特殊文字は ASCII に変換されます)。 HEX 値)
この属性には 3 種類の属性値があります:
application/x-www-form-urlencoded: 送信前にすべての文字をエンコードします (デフォルト)
multipart/form-data: 使用する場合、文字をエンコードしませんファイルアップロードコントロールこの値は、フォームの作成時に使用する必要があります。
テキスト/プレーンスペースは「+」プラス記号に変換されますが、特殊文字はエンコードされません。
名前: フォームの一意の名前。ID の一貫性を保つことをお勧めします。
ターゲット: URL、_self、_blank、_top、_parent を開く方法。
このフォームタグに関して、強調する必要があるのは、フォームコントロールが対応するリクエストパラメーターにどのように変換されるかということです。具体的なルールは次のとおりです。
1. name 属性を持つ各フォームコントロールは、リクエストパラメーターに対応します。 name 属性のないコントロールは生成されません。複数のフォームコントロールが name 属性値を繰り返す場合、リクエストパラメーターは 1 つだけ生成されますが、このパラメーターには複数の値があります。
2. フォームコントロールの name 属性はリクエストパラメータ名を指定し、value はリクエストパラメータの値を指定します。
3. フォームコントロールで disabled="disabled" 属性を設定すると、このフォームコントロールはリクエストパラメーターを生成しなくなります。

2、input タグ

要素は、フォームコントロールの中で最も汎用性が高く、このタグを通じて次の input 要素が生成されます。このタグは空のタグです。
1. 単一行のテキストボックス: type="text"
2. パスワード入力ボックス: type="password"
3. 隠しフィールド: type="hidden"
4. ラジオボタン: type="radio"
5チェックボックス: type="checkbox"
6. 画像フィールド: type="image"
7. ファイルアップロードフィールド: type="file"
8. 送信、リセット、アクションなしボタン: type="submit"、type ="reset",type="button"
この要素では、id、style、class などのコア属性を指定でき、onclick、onfocus、onblur などのイベント属性も指定できます。以下のタイプもあります:
1. チェック済み、ラジオと複数選択が選択されているかどうかの設定に使用されます
2、無効化、この要素を無効にするために使用されます
3、maxlength、入力できる最大文字数の指定に使用されますテキストボックス
4、readonly、読み取り専用モード、変更できません
5、size、要素の幅を指定します
6、src、画像フィールドに表示される画像フィールドのURL
7、align、配置画像フィールド
以下は、上記の要素を含む HTML です:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>表单相关标签</title></head><body><form action="" method="get">单行文本框：<input type="text" name="userName" id="userName" /><br />不能编辑的文本框：<input type="text" name="userName1" id="userName1" readonly="readonly" /><br />密码框：<input type="password" name="passWord" id="passWord" /><br />隐藏域：<input type="hidden" name="linkin_id" id="linkin_id" /><br />单选：<input type="radio" name="age" id="age1" value="男" />男<input type="radio" name="age" id="age2" value="女" />女<br />多选：<input type="checkbox" name="age1" id="age3" value="男" />男<input type="checkbox" name="age1" id="age4" value="女" />女<br />文件上传域：<input type="file" /><br />图像域：<input type="image" src="" /><br />4个按钮：<input type="submit" value="提交" name="button1" /><input type="submit" value="提交" name="button2" disabled="disabled" /><input type="reset" value="重置" name="button3" /><input type="button" value="无动作" name="button4" /></form></body></html>

ログイン後にコピー

3 、リストボックスとドロップダウンメニュー

この要素は、リストボックスとドロップダウンメニューを作成するために使用されます。