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

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

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 です:

<title>表单相关标签</title>

单行文本框：
不能编辑的文本框：
密码框：
隐藏域：
单选：男女
多选：男女
文件上传域：
图像域：
4个按钮：

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

この要素は、リスト ボックスとドロップダウン メニューを作成するために使用されます。 と組み合わせて使用​​します。各 はリスト項目またはメニュー項目を表します。頻繁に使用される 2 つの属性 (disabled) は、リスト ボックスとドロップダウン メニューを無効にするために使用されます。
multiple: 複数の項目を選択するかどうかを設定するために使用されます。
がリスト ボックスを生成するかドロップダウン メニューを生成するかは、上記の 2 つの要素によって決定されることに注意してください。サイズまたは倍数が指定されている場合はリスト ボックスが生成され、それ以外の場合はドロップダウン メニューが表示されます。
: オプション。 value はリクエストパラメータ値を表し、disabled はこのオプションが無効かどうか、selected はこのオプションが選択されているかどうかを示します
: オプショングループ。 label (必須)。このオプション グループのラベルを指定するために使用されます。
以下は、上記のタグを含む HTML です:

<title>下拉相关标签</title>	

下拉：

林肯 夜愿 列表框1： 林肯 夜愿 列表框2： 林肯 夜愿 美国 芬兰

4、textarea を使用してテキスト領域を定義します : HTML で複数行のテキスト領域を定義するために使用されます。2 つの属性が必要です。colsおよび行。テキストフィールドの幅と高さを指定するために使用されます。複数行のテキスト フィールドは特別で、通常のイベント属性に加えて、テキスト フィールド内のコンテンツが選択されたときにイベントを示すために使用される onselect 属性も指定できます。

与单行文本框相同的是，元素也应该指定name属性，该属性将作为textarea的请求参数名，与单行文本框不同的是，<textarea>不能指定value属性，<textarea>之间的内容将作为所对应的请求参数的参数值。
关于这个标签还是经常会用到的，在以前我写表单的时候，将单行的文本框拉长拉宽，但是我们在输入的时候也只能是一行，不能换行的，忽忽。
以下是包含这个标签的一份html：

<title>多行文本框相关标签</title>	

单行文本框：
多行文本框：

5，使用label定义标签

用于在表单元素中定义标签，这些标签只是对其他可以生成请求参数的控件来做说明的，本身是不会产生请求参数的，所以不要为元素指定value的属性值。
从表面上看，元素只是输出普通文本，其实他最大的作用就是，当我们点击生成的文本时，他说关联的表单控件将自动获得焦点。
让标签和表单控件关联有2种方式：
1，隐式使用for属性：设置标签的for属性指向所关联表单控件的id属性值。
2，显式关联：将普通文本，表单控件丢在标签内部就可以了。关于这2种方式推荐使用第一种，也就是使用for来隐式关联，因为后面一种可能在ie下不兼容。
以下是包含上面标签的一份html：

<title>label相关标签</title>	

单行文本框：
多行文本框：

6，使用button定义按钮

元素用于定义一个按钮，在这个标签的内部可以包含普通的文本，文本格式化标签，图像等内容，这也就是和按钮的不同之处。
这个标签使用不多，最多就是在一个按钮做成图像格式的才会用到。以下是一份html：

<title>button相关标签</title>