HTMLフォームコントロール

HTML は Web ページ作成用のマークアップ言語です。 Web ページの構造と動作を定義します。 HTML は、Web ページの構造化に役立つタグと要素で構成されます。これらの要素をフォーム内でグループ化して、ユーザーフレンドリーな方法でユーザーからデータを収集できます。ただし、HTML はステートレス プロトコルであるため、何も保存できず、ページを更新するとデータが失われることに注意してください。

HTML フォーム コントロール

HTML にはさまざまなタイプのフォーム コントロールが定義されています。これらのコントロールは、指定された方法でユーザー入力を受け入れる役割を果たします。 HTML で使用できるさまざまなタイプのフォーム コントロールを見てみましょう。

1) 入力テキストコントロール

入力テキスト コントロールは、ユーザー データをフリー テキストとして収集するために使用されます。 Web ページでは、ユーザーがデータを入力できる長方形のボックスが形成されます。

HTML フォームで使用できる入力テキスト コントロールにはさまざまな種類があります。さまざまなタイプの入力テキスト コントロールを見てみましょう。

• 単一行入力テキスト コントロール

これにより、ユーザーは 1 行のデータのみを入力できます。このような入力テキスト コントロールの典型的な例は、名前、検索ボックス、都市などを入力するためのものです。

• 複数行入力テキスト コントロール

この入力コントロール タイプでは、ユーザーは複数行のデータを入力できます。このような入力コントロールの一般的な使用法は、コメント、アドレス、説明などです。

ここで、行はテキスト領域の行数を示し、列は列数を示します。

• パスワード入力制御

名前が示すように、これは通常、パスワード フィールドに使用されます。これは入力テキストフィールドと同じように機能しますが、安全のためテキストはマスクされます。

2) 入力タイプ送信

入力タイプが送信の場合、フォームアクションで定義されたアクションを実行し、フォームデータをサーバーに送信します。

ここでは、「送信」ボタンのボタンクリックイベントでユーザー名とパスワードの値がサーバーに送信されます。フォーム内のアクションは、入力を受け入れるサーバー メソッドです。

3) 入力型ラジオ

ラジオ ボタンは、ユーザーがデータをブール値として入力することを期待する場合、または複数のオプションのうち 1 つの入力のみが true であることが期待される場合に使用されます。ラジオ ボタンの一般的な使用例としては、性別の決定、従業員のタイプ (正規/臨時) などがあります。

4) 入力タイプチェックボックス

チェックボックスを使用すると、ユーザーは自分のケースに当てはまる情報を選択できます。これは、可能な入力がすでにわかっている場合にデータを受け入れる非常に便利な方法です。

たとえば、個人が加入している保険の種類を収集したい場合は、オプションが限られている場合でも、チェックボックスを使用して簡単に収集できます。

5) 入力タイプドロップダウンリスト

ドロップダウン リストを使用すると、ユーザーは複数の可能なオプションから 1 つのオプションを選択できます。これは、ユーザーが自分に最適なオプションを特定するのに役立つ、可能なオプションの網羅的なリストを提供するため、ユーザーから詳細を取得するための非常にユーザーフレンドリーな方法です。

たとえば、従業員が所属できる都市をドロップダウンでリストダウンします

6) 入力タイプ オプトグループ

Optgroup はドロップダウン リストと同様に機能します。唯一の違いは、optgroup を使用すると、特定のオプションを 1 つの傘の下に論理的にグループ化できることです。これは、ユーザーが optgroup ラベルを使用して関連するオプションをすばやく識別するのに役立ちます。

たとえば、インドのさまざまな州の都市を州ごとにグループ化して一覧表示するドロップダウン リスト。

7) Fieldset

Fieldset ialah satu lagi teg berguna dalam bentuk Html yang membenarkan pembangun secara logik mengumpulkan kawalan tertentu di bawah satu legenda; ini membantu pembangun memberikan arahan yang jelas kepada Pengguna tentang perkara yang diharapkan dalam bahagian ini.

Contohnya, set medan untuk halaman log masuk.

8) Teg keluaran HTML

Teg output ini diperkenalkan dalam HTML5. Ia membolehkan anda memaparkan output pengiraan serta-merta. Ini agak berguna apabila pengguna perlu melakukan pengiraan serta-merta dan melihat hasilnya. Contoh biasa kes sedemikian ialah apabila pengguna ingin menyemak jumlah semua item yang terdapat dalam troli.

Dalam contoh di atas, kami telah mentakrifkan julat harga item sebagai 0 hingga 100 dan boleh ditukar pada masa jalan, kotak teks yang lain, yang mempunyai nilai 12 di dalamnya adalah cukai yang dikenakan ke atas item itu; ia juga boleh diubah semasa runtime. Hasil keluaran 58 ialah jumlah kedua-dua nilai.

Nota: Teg ini tidak disokong pada Edge 12 atau Internet Explorer versi terdahulu.

9) Jenis input Warna

Ia selalunya diperlukan dalam bentuk untuk hanya menunjukkan warna dan bukannya sebarang teks. Warna jenis input dalam HTML 5 akan membolehkan anda melakukannya. Ia menunjukkan warna yang anda ingin paparkan dalam borang. Senario biasa di mana ia digunakan ialah untuk menunjukkan status projek atau fasa.

Nota: warna tidak disokong dalam versi Internet Explorer dan Edge tertentu.

10) Jenis input Tarikh

Tarikh jenis input biasanya digunakan di mana Pengguna mengharapkan medan jenis tarikh sebagai input; ia boleh jadi seperti Tarikh Lahir, Tarikh pengambilan pekerja, tarikh penamatan, dsb. Ia diperkenalkan dalam HTML 5 dan format tarikh berbeza sedikit dengan perubahan penyemak imbas.

Kesimpulan

• Dengan pengenalan HTML 5, terdapat peningkatan yang besar dalam bilangan kawalan HTML yang disokong. Kawalan bentuk HTML ini boleh diberikan pelbagai kesan dan warna dengan bantuan CSS 3 dan JavaScript / jQuery / Angular JS.
• Dalam artikel ini, kami telah merangkumi semua kawalan borang HTML yang biasa digunakan. Terdapat banyak kawalan seperti tersembunyi, set semula, minggu, URL, masa, e-mel, fail, DateTime-local, imej, tel yang belum dibincangkan dalam artikel ini. Adalah sangat penting untuk menyemak keserasian penyemak imbas kawalan ini sebelum melaksanakannya dalam projek kerana banyak versi penyemak imbas tidak menyokong kawalan borang HTML 5.

以上がHTMLフォームコントロールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。