HTMLフォームを使い始めるための段階的なガイド

HTMLフォーム

概要

Webサイトにアクセスした人からデータを収集する場合は、HTMLフォームが必要です。たとえば、Uber、Netflix、Facebookなどのアプリケーションに登録/ログインする場合、HTMLフォームを介して名前、メール、パスワードなどの情報を入力します。

次に、フォームを作成するために必要なすべての要素を学習します。

注:CSSを使用してスタイリングを既に追加しているため、要素は異なって見えますが、まったく同じように機能します。
要素を私のもののように見せたい場合は、以下のリンクでCSSファイルを見つけることができます。
カスタムCSS:https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
CSSの正規化:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

フォーム要素

これは、学習する最初の要素です。この要素は、フォーム内に入る他のすべての要素をラップします。これはフォーム要素です。

フォームはサーバーに接続されていないため、データはどこにも送信されません。フォームをサーバーに接続してデータを処理するために、Node、Python、Ruby、PHPなどのサーバー側言語を使用できます。データの処理の一部には、フォーム要素に付加される2つの重要な属性が含まれます。これらの属性を見てみましょう。

属性:

  1. action:action属性は、フォームから送信された情報を処理するプログラムのWebアドレス(URL)です。
  2. method:ブラウザがフォームの送信に使用するHTTPメソッドです。可能な値はPOSTとGETです。
  • POST —フォームの本文からのデータがサーバーに送信されます。
  • GET —データはURL内で送信され、パラメーターは疑問符で区切られます。
注:別のフォーム内にフォームをネストすることはできません。つまり、別の
要素内に要素を含めることはできません。

入力要素

入力要素は、最も一般的に使用されるフォーム要素です。ユーザーが電子メール、パスワードなどの情報を入力できるテキストフィールドを作成するために使用されます。

ユーザーが名前を入力できるテキストフィールドを作成しましょう。

注:入力要素は自己終了タグであるため、開始タグに一致する終了タグを入力する必要はありません。

上記の入力タグに3つの属性を追加しました。それぞれを詳しく見てみましょう。

タイプ

type属性は、必要な入力の種類を示します。 type属性にtextの値を指定した場合、ここで意味するのは、入力フィールドに入力する値がtext型であることです。この特定の属性には多くの可能な値があります。可能な値には、電子メール、電話の電話番号、パスワードなどがあります。

例:アカウント(Amazon / Netflix)のいずれかにログインするとき、2つのことを入力する必要があります:メールとパスワード。したがって、この特定のケースでは、入力要素が使用されます。 type属性には、それぞれemailとpasswordの値が与えられます。

id

ID属性は必須ではありませんが、追加することをお勧めします。場合によっては、これはCSS / JavaScriptを使用して要素をターゲットにするのに役立ちます。 ID属性が追加され、ラベルを特定のフォームコントロールに関連付けることができます。

name属性が必要です。フォームがサーバー側コードに送信されると、サーバーはフォームデータを理解し、値を適切に処理できます。

プレースホルダー

これは、ユーザーが値を入力する前に入力フィールドに表示される短いヒントです。ユーザーが入力フィールドに入力を開始すると、プレースホルダーが消えます。

他のいくつかの基本的な入力要素がどのように見えるか見てみましょう。

注:type属性に異なる値を使用すると、異なる結果が生成されます。たとえば、入力を電子メール、テキスト、またはパスワードなどのタイプにすることができます。これらはすべて、以下に示すようにわずかに異なる動作を示します。

複数の入力要素(テキスト、メール、パスワード)

複数の入力要素(テキスト、メール、パスワード)

placeholder(Left)属性なしおよびplaceholder(Right)属性付きの入力要素

テキストエリア要素

1行のテキストでは不十分な場合があり、単純な入力要素が機能しない場合があります。たとえば、一部のWebサイトには、クエリやメッセージを入力するための連絡フォームがあります。これらの場合、textarea要素を使用するのが最善です。