帳票フォームに関する要素を徹底整理！

HTML オリジナルのフォームとフォーム コントロール

フォーム要素

要素は視覚的な部分を生成しません。 ID、クラス、スタイルなどのコアコンテンツを固定したり、onclick などのイベント属性を指定したりできます。

さらに、アクション (スタンドアロン テーブルでボタンが確認されたときにフォームがジャンプするアドレスを指定します)、メソッド (フォーム送信時に送信されるリクエストの種類を指定します)、 value は get または post )、enctype (式コンテンツのエンコードに使用される文字セットを指定)、name (フォームの一意の名前を指定)、target (ターゲット URL を開くために適用できるメソッドを指定) です。 [推奨: HTML ビデオ チュートリアル ]

input 要素

要素はフォーム コントロールの中で最も多用途です要素、以下はいくつかの入力要素によって生成されます:

パスワード入力ボックス:

<input id="password" name="password" style="password" />

隠しフィールド:

<input id="hidden" name="hidden" style="hidden" />

ラジオ ボタン ボックス

<input id="radio" name="radio" style="radio" />

チェック ボックス

<input id="checkbox" name="checkbox" style="checkbox" />

画像ドメイン

<input id="image" name="image" style="image" />

ファイルアップロードドメイン

<input id="file" name="file" style="file" />

送信ボタン

<input id="submit" name="submit" style="submit" />

リセットボタン

<input id="reset" name="reset" style="reset	" />

アクションボタンなし

<input id="button" name="buton" style="button" />

一部のフォーカス属性

checked: ラジオ ボタンとチェック ボックスが最初に選択されているかどうかを設定します。
disabled: 最初のロードを設定するときにこの要素を使用します。
maxlength: この属性は、テキスト ボックスに入力できる最大数を指定する数値です。
readonly: 指定されたテキスト ボックスの値は、ユーザーによる変更は許可されていません (js スクリプトを使用して変更できます)。この属性は、boolean 値をサポートする属性であり、要素の値が読み取り専用であることを示します。
size: この属性の値は、カルシウム要素の幅を指定する数値です。
src: 画像欄に表示する画像のURLを指定します
width: 画像欄に表示する画像の幅を指定します
heigeht: 画像フィールドに表示される画像の高さを指定します。

label 要素

label 要素では、id、class、style などのコア属性を指定でき、また、onclick などのイベント属性も指定できます。さらに、ラベルがどのフォーム コントロールに関連付けられているかを指定する for 属性も指定できます。使用法は for="" で、関連するコントロールの ID が引用符内にあります。

Button 要素

要素はボタンを定義するために使用されます。ID、クラス、スタイルなどの主要な親しみやすさを指定でき、次のことができます。 onclick などのイベント属性も定義します。さらに、以下の要素も指定できます。

disabled: このボタンを無効にするかどうかを指定します。
name: ボタンの一意の名前を指定します。属性名は ID と一致する必要があります。
type: このボタンが属するボタンのタイプを指定します。属性値は、ボタン、リセット、送信のいずれか 1 つだけです。
value: ボタンの初期値を指定します。 jsスクリプト経由で変更可能。

select 要素と option 要素

要素は、リスト ボックスまたはドロップダウン メニューを作成するために使用されます。Calcium 要素は、 要素は、リスト項目またはメニュー項目を表します。
要素は、id、クラス、スタイルなどのコア属性を指定できます。この要素は、リスト ボックスまたはドロップダウン リスト項目で選択されたオプションが変更されたときの onchange イベント属性を指定できます。 、onchange がトリガーされるイベント。

さらに、 要素では次の属性も指定できます。

disabled: リスト ボックスとドロップダウン メニューを無効にするように設定します。この属性の値は無効にするか、属性値を省略することのみ可能です。
multiple: リスト ボックスとドロップダウン メニューで複数の選択を許可するかどうかを設定します。複数の選択を許可するように設定すると、 要素によってリスト ボックスが自動的に生成されます。
size: リスト ボックスとドロップダウン メニューで同時に実装できるリスト項目の数を指定します。複数の選択を許可するように設定すると、 要素によってリスト ボックスが自動的に生成されます。

要素には、次の 2 つのサブ要素のみを含めることができます。

: リスト項目またはメニュー項目を定義するために使用されます。この要素には、このオプションのテキストとしてテキスト コンテンツのみを含めることができます。
: リスト項目またはメニュー行グループを定義するために使用されます。この要素には、 子要素のみを含めることができます。

この要素では、id、class、style などのコア要素を指定できます。また、onclick などのイベント属性も指定できます。

さらに、次の要素を定義することもできます。

disabled: このオプションを無効にするように指定します。この属性の値は無効にすることのみ可能です。
selected: フロー ボックスの初期状態が選択されているかどうかを指定します。この属性の値は選択のみ可能です。
value: このオプションに対応するリクエストパラメータ値を指定します。

この要素では、id、class、style などのコア属性を指定できます。また、onclick などのイベント応答属性も指定できます。その他、以下のような属性があります。

label: このオプション グループのラベルを指定します。この属性は必須です。
disabled: このオプション グループのすべてのオプションを無効に設定します。属性値は無効にするか省略することのみ可能です。

HTML5 拡張 textarea

要素は、複数行のテキスト領域を生成するために使用されます。 id、class、style などのコア要素を指定でき、onclick などのイベント属性も指定できます。 textarea の特殊な性質により、ユーザー入力を受け取ることができ、ユーザーはテキスト エリア内のテキストを選択できます。したがって、テキスト エリアが選択されたときと選択されたときに適用される 2 つの属性、onselect および onchange を指定することもできます。テキストが変更されます。この要素には他に以下の要素も指定できます。

cols: テキストフィールドの幅を指定します。これは必須です。
rows: テキストの高さを指定します。これは必須です。
disabled: このテキストフィールドが無効であることを指定します。属性値は無効にすることのみ可能です。
readonly: 指定されたテキスト フィールドは読み取り専用です。この属性の値は読み取り専用のみです。
maxlength: 複数行のテキスト フィールドに入力できる最大文字数を設定します。
wrap: 複数行のテキストフィールドに改行を追加するかどうかを指定します。この属性は、ソフトとハードの 2 つの属性値をサポートします。属性値がhardに設定されている場合、cols属性を指定する必要があります。入力文字がcolsで指定された幅を超えてテキストが折り返される場合、複数行のテキストフィールドは改行位置に自動的に改行を追加します。フォームが送信されたとき。

fieldset 要素と凡例要素

要素は、フォーム内のフォーム要素をグループ化するために使用できます。 , この要素では、id、class、style などのコア要素を指定できるほか、次の 3 つの属性も指定できます。

name: 要素の名前を指定します。
form: この属性の属性値は、有効な 要素を持つ ID である必要があります。これは、 要素が属することを指定するために使用されます。フォーム。
disabled: この属性は、フォーム要素を無効にするために使用されます。このプロパティは、ブール値をサポートするプロパティです。

HTML の新しいフォーム属性

フォームのフォーム属性

html5 では、すべてのフォーム コントロールにフォーム属性が追加されたため、ページ上でフォーム コントロールを定義する際の柔軟性が向上しました。フォーム コントロールを自由に防止および配置できるため、ページ レイアウトの柔軟性が向上します。

formaction属性

html5 同じフォーム内に登録ボタンとログインボタンが混在する問題に対処するため、sumit、reset、imageにformactionを指定することができ、動的に変更できる属性となります。フォームを別の URL に送信します。

formxxxx 属性

formxxxx 属性は、formaction 属性に似ています。sumit、reset、image については、formenctype、formmethod、formtarget およびその他の属性を指定できます。

formenctype : この属性を使用すると、ボタンを enctype 属性に動的に変更できます。
formmethod: この属性を使用すると、ボタンを動的にメソッド属性にすることができます。
formtarget: この属性により、ボタンが動的にターゲット属性になることができます。

autofocus 属性

これは非常によく使われる属性で、Web ページを開いたときに対応する位置に自動的にフォーカスを合わせる機能があります。使用方法は、次のような対応するコードに追加することです。 <input type="password" name="name" autofocus />このコードの autofocus の機能は、自動的にフォーカスを合わせることです。 Web ページを開いたときのページ、パスワード ボックス。

プレースホルダー属性

この属性も非常に一般的に使用されます。その機能は、ユーザーがデータを入力するテキスト ボックスに、次のような対応するプロンプトを表示することです: <input type= "text " name="username" palceholder="ユーザー名を入力してください" />;このコードにおける palceholder の役割は、ユーザーがテキストにデータを入力していない場合に「ユーザー名を入力してください」と表示することです。ボックスを追加して、ページをよりユーザーフレンドリーにしました。

list 属性

この属性も非常に実用的で、html5 仕様以前には、html フォーム属性には ComboBox に似たコンポーネントはありませんでした。 html5 の list 属性は、この欠点を補うものです。list 属性の値は、 コンポーネントの ID である必要があります。つまり、リストは

要素は、非表示の 要素と同等であり、非表示のドロップダウン メニューを生成するために使用されます。 には、 要素と同じ子要素を含めることができます。この要素は、list 属性を持つ指定された 要素と組み合わせて使用​​されます。 list 属性のテキスト ボックスをダブルクリックすると、 によって生成されたドロップダウン メニューが表示されます。

autocomplete 属性

このオプションは、テキスト ボックスをクリックしたときに以前の入力履歴を自動的に表示するかどうかを制御するために使用されます。ブラウザはデフォルトでこの機能を有効にします。この属性は、次の 2 つの属性値をサポートします。

on: オートコンプリートをオンにすると、テキスト ボックスの下にドロップダウン メニューが表示されます。
off: オートコンプリートをオフにすると、テキスト ボックスの下にドロップダウン メニューが表示されなくなります。

label

html5 の control 属性は、 要素の control 属性を提供します。この属性は、JavaScript 内で関連付けられている 要素にアクセスするために使用されます。スクリプトフォーム要素。

フォーム内のラベル属性

フォーム要素と 要素、および 要素を取得して、labels 属性を適用します。

テキスト ボックスのselectionDirection属性

html5は、単一行のテキスト ボックスと複数行のテキスト フィールドに新しいselectionDirection読み取り専用属性を追加します。この属性は、テキストの方向を返すために使用されます。テキストボックスに。

#ユーザーが順方向にテキストを選択すると、戻り値は forward になります。
• ユーザーが逆方向にテキストを選択すると、戻り値は reverse になります
• ユーザーがテキストを選択しない場合、戻り値は forward 値はユーザーが最後に選択した値です