HTML Form Controls

HTML is the markup language for web page creation. It defines the web page structure and behaviour. HTML consists of tags and elements that help in structuring the web pages. These elements can be grouped together inside a form to collect data from a User in a User-friendly manner. However, note that HTML is a stateless protocol that means it cannot store anything, and you will lose the data on a page refresh.

HTML Form Control

There are various types of form control that are defined in the HTML; these controls are responsible for accepting the User input in a specified manner. Let’s have a look at the various types of available Form Controls in HTML.

1) Input Text Control

Input text controls are used to collect User data as free text. On the web page, it will form a rectangle box where Users can input the data.

There are different types of input text controls that can be used in HTML forms. Let’s have a look at the different types of input text controls.

• Single line Input Text Control

This allows the user to enter only a single line of data. A typical example of such input text controls is for entering the name, search box, city, etc.

• Multi-line Input Text Control

This input control type allows the user to enter data of multiple lines. Typical usage of such input controls is for comments, addresses, description and so on.

 

Here rows indicate the number of lines in the text area, and col indicates the number of columns.

• Password Input Control

As the name suggests, this is typically used for the password field. This works in the same way as the input text field, but the text gets masked for safety purposes.

2) Input Type Submit

When the input type is of submitting it performs the action defined in the form action and sends the form data to the server.

Here the username and password values will be submitted to the server on the button click event of Submit button. The action in the form is the server method that accepts the input.

3) Input Type Radio

Radio buttons are used when you expect Users to fill data as a Boolean value, or you expect only one input as true out of multiple options. Some common use case of radio buttons is gender determination, employee type (Regular / Temporary), etc.

4) Input Type Checkbox

A checkbox lets the User select whatever information is true in his case. It is a very convenient way of accepting the data when the possible input is already known.

For example, if you want to collect the type of insurance an individual holds, you can easily so with the checkboxes as the options would be limited.

5) Input Type drop-down list

The drop-down list enables the user to select one option out of multiple possible options. This is a very User-friendly way to get the detail from the User as it provides an exhaustive list of possible options that help the user to identify the option best suits him.

For example, drop-down to list down the city in which an employee can belong to

6) Input Type Optgroup

Optgroup works in a similar way as of the drop-down list; the only difference is that the optgroup lets you to group certain options under one umbrella logically. It helps the user to quickly identify the relevant option with the help of the optgroup label.

For example, drop-down lists to list down the cities of the different states in India grouped by states.

7) フィールドセット

フィールドセットは、開発者が特定のコントロールを 1 つの凡例の下に論理的にグループ化できるようにする、HTML フォーム内のもう 1 つの便利なタグです。これは、開発者がこのセクションで何を期待するかについてユーザーに明確な指示を与えるのに役立ちます。

たとえば、ログイン ページのフィールドセットです。

8) HTML 出力タグ

この出力タグは HTML5 で導入されました。計算の出力を即座に表示できます。これは、ユーザーが即座に計算を実行して結果を確認する必要がある場合に非常に便利です。このようなケースの典型的な例は、ユーザーがカート内のすべての商品の合計を確認したい場合です。

上記の例では、商品の価格範囲を 0 ～ 100 として定義し、実行時に変更できます。値 12 が入っている他のテキスト ボックスは、その商品に課せられる税です。実行時に変更することもできます。出力結果 58 は両方の値の合計です。

注: このタグは、Edge 12 または以前のバージョンの Internet Explorer ではサポートされていません。

9) 入力タイプ カラー

多くの場合、フォームではテキストの代わりに色だけを表示する必要があります。 HTML 5 の入力タイプ color を使用すると、それが可能になります。フォーム内に表示したい色を表示します。これが使用される一般的なシナリオは、プロジェクトまたはフェーズのステータスを表示することです。

注: Internet Explorer および Edge の特定のバージョンでは色がサポートされていません。

10) 入力タイプ 日付

入力タイプの日付は、ユーザーが入力として日付タイプのフィールドを期待する場合によく使用されます。生年月日、雇用日、退職日など何でも構いません。これは HTML 5 で導入されており、日付の形式はブラウザーが変わると少し異なります。

結論

• HTML 5 の導入により、サポートされる HTML コントロールの数が大幅に増加しました。これらの HTML フォーム コントロールには、CSS 3 と JavaScript / jQuery / Angular JS を利用してさまざまな効果や色を与えることができます。
• この記事では、一般的に使用される HTML フォーム コントロールをすべて取り上げました。この記事では取り上げていない、非表示、リセット、週、URL、時間、電子メール、ファイル、DateTime-local、画像、電話番号などの多くのコントロールがあります。多くのブラウザ バージョンは HTML 5 フォーム コントロールをサポートしていないため、プロジェクトにこれを実装する前に、これらのコントロールのブラウザ互換性を確認することが非常に重要です。

The above is the detailed content of HTML Form Controls. For more information, please follow other related articles on the PHP Chinese website!