検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >5.HTMLフォームtag_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:45:101204ブラウズ

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

  • 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 、リスト ボックスとドロップダウン メニュー
    • この要素は、リスト ボックスとドロップダウン メニューを作成するために使用されます。
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：Tucao Web サイトの構築シリーズ (1)_html/css_WEB-ITnose次の記事：Tucao Web サイトの構築シリーズ (1)_html/css_WEB-ITnose

    関連記事

    続きを見る