帳票フォームに関する要素を徹底整理！-htmlチュートリアル-php.cn

さらに、アクション (スタンドアロンテーブルでボタンが確認されたときにフォームがジャンプするアドレスを指定します)、メソッド (フォーム送信時に送信されるリクエストの種類を指定します)、 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読み取り専用属性を追加します。この属性は、テキストの方向を返すために使用されます。テキストボックスに。

ユーザーが逆方向にテキストを選択すると、戻り値は 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 を返した場合、式のすべてのフォーム要素が入力検証に合格したことを意味します。