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

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 値はユーザーが最後に選択した値です

HTML5 新しいフォーム要素

関数豊富な入力要素

HTML5 は 要素です 次の新しいタイプが追加されました。

color: カラー セレクターを生成します。value の値は #xxxxxx 形式のカラー値です。
date: 日付ピッカーを生成します。
time: 時間セレクターを生成します。
datetime-local: ローカルの日付と時刻のセレクターを生成します。
week: ユーザーが週を選択するためのテキスト ボックスを生成します。
month: 人生は月のセレクターです。
max: 指定した日時の最大値。
step: 日時のステップサイズを指定します。
email: 電子メール入力ボックスを生成すると、入力された電子メールが形式に準拠しているかどうかブラウザが自動的にチェックします。

multiple: この属性はブール型をサポートします。この属性値が指定されている場合、複数の電子メール アドレスを英語のカンマで区切って入力できることを意味します。

tel: 電話番号を入力するためのテキスト ボックスを生成します。
ur: URL を入力するためのテキスト ボックスを生成し、入力された URL が形式に準拠しているかどうかをブラウザーが自動的にチェックします。
number: 数字のみを入力できるテキスト ボックスを生成します。

min: 指定された値の最小値。
max: 指定された値の最大値。
step: 数値のステップサイズを指定します。

range: 次の属性を持つドラッグ バーを生成します:

min: ドラッグ バーの最小値。
max: ドラッグ バーの最大値。
step: ドラッグ バーのステップ サイズを指定します。

search: 検索キーワードを入力するための専用のテキスト ボックスを生成します。

output 要素

HTML5 は、出力の表示に使用される新しい フォーム コントロールを追加します。この要素では、id、class、style などのコア属性の指定に加えて、次の属性も指定できます。

for: この属性は、要素をブレーキするときに、その要素または複数の要素の値を表示します。

meter 要素

HTML5 では、既知の最大値と最小値を持つ計数メーターを表す新しい 要素も追加します。この要素は、ID、クラス、スタイルなどのコア機能の定義に加えて、次の属性も定義できます。

value: 計数機器の現在値を指定します。デフォルトは 0.
min: 計数機器の最小値を指定します。デフォルトは 0.
max: 計数機器の最大値を指定します。デフォルトは 1.
low: 計数機器の指定範囲の最小値を指定します。これは min の値以上である必要があります。
high: 計数機器の指定範囲の最大値を指定します。これは max の値以下である必要があります。
optimum: 計数器の有効範囲の最適値を指定します。

progress

要素は、進行状況バーを表すために使用されます。この要素では、id、class、style などのコア属性の指定に加えて、次の属性も指定できます。

max: プログレスバーが完了したときの値を指定します。
value: 現在の完了済みの進行状況の値を指定します。

HTML5 の新しいクライアント側検証

検証属性を使用して検証を実行する

HTML5 では、次の検証属性がフォーム コントロールに追加されます。

required: この属性は、フォーム コントロールに入力する必要があることを指定します。
pattern: この属性は、フォーム コントロールの値が指定された正規表現に準拠する必要があることを指定します。
min、max、step: これら 3 つの属性は、数値型および日付型の 要素に対してのみ有効です。この要素は min ～ max の間にある必要があり、次の条件に準拠する必要があります。ステップのステップの長さ。

検証のために checkValidity メソッドを呼び出します

• checkValidity() メソッドを呼び出してフォームが true を返した場合、フォーム内のすべてのフォーム要素の入力が有効であることを意味します。 valid

• フォーム オブジェクトが checkValidity() メソッドを呼び出して true を返した場合、式のすべてのフォーム要素が入力検証に合格したことを意味します。

検証をオフにする

• ブール値をサポートする属性である novalidate 属性を 要素に追加します。

• submit 要素と button 要素に formnovalidate 属性を設定します。ユーザーが送信ボタンを使用してフォームを送信すると、フォームは検証機能をオフにします。

以上が帳票フォームに関する要素を徹底整理！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。