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

HTML フォーム コントロール

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

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

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

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

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

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

• 複數(shù)行入力テキスト コントロール

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

ここで、行はテキスト領(lǐng)域の行數(shù)を示し、列は列數(shù)を示します。

• パスワード入力制御

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

2) 入力タイプ送信

入力タイプが送信の場(chǎng)合、フォームアクションで定義されたアクションを?qū)g行し、フォームデータをサーバーに送信します。

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

3) 入力型ラジオ

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

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

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

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

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

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

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

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

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

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

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フォームコントロールの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。