Home-theater-designers
Webサイトのユーザーからデータを収集するには、いくつかの方法があります。 Webサイトのフォームには、ユーザーをニュースレターに登録するなどの単純な機能や、求人応募フォームとして機能するなどのより複雑な目的があります。
ただし、これらすべての単純なフォームから複雑なフォームに共通していることの1つは、HTML、より具体的にはHTMLです。 鬼ごっこ。
フォームタグの使用
NS タグは、フォームの構成要素と見なすことができる他の要素を囲むためのコンテナとして使用されるHTML要素です。これらの基本的な要素のいくつかには、 タグ、 タグ、および 鬼ごっこ。
NS タグには、その機能に寄与する重要な属性があります。この属性はアクションと呼ばれ、フォームに入力されたデータが渡されるファイルを識別するために使用されます。
タグの例の使用
上記の例は、プロジェクトでformタグを使用する方法を示しています。主なポイントの1つは、フォームタグを開く場合は、忘れずに閉じる必要があるということです。これにより、フォーム構造が作成され、フォームに入力されたデータが正しく処理されるようになります。
タグの使用
NS タグは、フォームの各入力フィールドのデータを説明するために使用されます。このタグには にとって フォームの機能を強化するために使用される属性。
関連している： コードをテストするのに最適な無料のオンラインHTMLエディター
対応する入力フィールドに割り当てられているIDが にとって の値 タグを付けると、ラベルをクリックすると、その入力フィールドが自動的に強調表示されます。
タグの例の使用
First Name:
上記の例では、 にとって 属性には値が割り当てられます fname 。したがって、を使用して入力フィールドを作成すると、 fname id、このフィールドは、クリックするたびに強調表示されます 初め 名前 ラベル。
タグの使用
その最も基本的な形では、 タグはテキストボックスとして表示できます。 NS タグはユーザーからのデータをキャプチャし、そのより重要な機能の1つは タイプ 属性。 NS タイプ 属性は、このテキストボックスが収集できるデータのタイプを示します。
関連している： CSSでスタックフォームを作成する方法
に割り当てることができるいくつかの異なる値があります タイプ 属性が、より人気のあるもののいくつかは次のとおりです。
- 文章
- 番号
- Eメール
- 画像
- 日にち
- チェックボックス
- 無線
- パスワード
タグの使用例
First Name:
NS 上記のコードのタグには、それぞれ固有の機能を持つ3つの異なる属性があります。 NS タイプ 属性にはテキスト値が割り当てられます。これは、テキストボックスが文字のみを受け入れることを意味します。
NS id 属性はテキストボックスの一意の識別子であり、CSSファイルからこの要素へのアクセスを提供するため重要です。 NS 名前 属性も一意の識別子です。ただし、name属性は、開発のサーバー側からの要素と対話するために使用されます。
NS id と 名前 属性には通常、一方がクライアント側から要素へのアクセスを提供し、もう一方がサーバー側から要素へのアクセスを提供するのと同じ値が割り当てられます。
チェックボックス要素の使用
チェックボックス要素は、で使用できる他の要素と比較して非常にユニークです。 鬼ごっこ。これにより、ユーザーは関連する選択肢のリストから1つ以上のオプションを選択できます。チェックボックスは、選択するとチェックが含まれる小さな四角いボックスで表されるため、簡単に識別できます。
チェックボックス要素の例の使用
Programming Languages:
Java
JavaScript
Python
上記の例では、各チェックボックス要素にvalue属性があり、これは各チェックボックスオプションをコレクションから区別するのに役立つため重要です。したがって、ユーザーが上記のオプションから「Java」を選択すると、データはそれを反映します。
タグと無線要素の使用
NS タグと無線要素は、ユーザーが一度に1つの値しか選択できないという意味で似ています。したがって、それらは同じ機能を持っていると言うことができます。ただし、外観は大きく異なります。
ラジオ要素は外観がチェックボックス要素に近いですが、ラジオ要素では正方形ではなく円があります。
NS タグは、基本的にドロップダウンボックスであるものを生成します。これにより、ユーザーは単一の値を選択できます。
タグと無線要素の例の使用
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
日付要素の使用
date要素は、クリックされたときにカレンダーを生成する小さなテキストボックスを生成します。使用する 日にち フォームの入力タイプとして、ユーザーが誤った日付を入力する可能性を防ぎます。これにより、誤ったデータが収集される可能性があります。
日付要素の例の使用
電子メールとパスワード要素の使用
開発者が電子メールまたはパスワードのいずれかの値をのtype属性に割り当てる場合 タグを付けると、それぞれが同じテキストボックスを生成します。ただし、これらのボックスを使い始めると、違いが明らかになります。
email要素は、テキストボックスに入力されたデータを監視し、各送信が電子メールアドレスの標準要件を満たしていることを確認します。これは、ローカル部分があり、その後に@記号が続き、ドメインで終わることを意味します。
EmailElementの例の使用
上記の例では、という新しい属性が導入されています。 プレースホルダー 、およびこの属性は、テキストボックスに薄い灰色で表示されるテキスト値を取ります。このテキストは、上記の例に示されているように、テキストボックスに配置されるデータを示すために使用されます。
password要素は、テキストボックスに入力される文字をアスタリスクに変換します。したがって、コンピュータの画面が他の人に表示されている場合、入力したパスワードは他の人には表示されません。
パスワード要素の例の使用
ボタンタグの使用
フォームには通常、2つの異なるタイプのボタンがあります。 1つ目は送信ボタンで、フォームに入力されたデータをアクション属性に割り当てられた値に送信します（これは < フォーム> 鬼ごっこ）。
送信ボタンの例
Submit
フォームで通常使用される2番目のタイプのボタンは、ユーザーが新しいデータを入力できるようにフォーム内のデータをクリアするリセットボタンです。 NS タグには タイプ ボタンの機能を示すために使用される属性。上記の例では、 タイプ 属性は値を割り当てます 参加する したがって、 タイプ の値 リセット フォームをリセットするために使用されます。
リセットボタンの例
Reset
フォームの作成
HTMLで単純なフォームを作成するには、上記のすべての要素を 鬼ごっこ。
フォームの例の作成
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
上記のコードは、次の形式を生成します。
Androidで画像を反転する方法
これで、HTMLで簡単なフォームを作成できます
この記事では、機能的なHTMLフォームを作成するためのすべてのツールについて説明します。フォームの作成に使用されるさまざまなHTMLタグを識別し、これらのタグで使用できるさまざまな属性を調べます。
ただし、Webサイトに表示されるほとんどのフォームには、1つの追加コンポーネントがあります。 CSSは、フォームに命を吹き込み、見た目を美しくするために使用されます。
共有 共有 つぶやき Eメール エッセンシャルCSS3プロパティチートシートCSS3プロパティのチートシートを使用して、重要なCSS構文をマスターします。
次を読む 関連トピック- プログラミング
- HTML
- ウェブ開発
- コーディングチュートリアル
Kadeisha Keanは、フルスタックソフトウェア開発者およびテクニカル/テクノロジーライターです。彼女は、最も複雑な技術的概念のいくつかを単純化する明確な能力を持っています。技術初心者なら誰でも簡単に理解できる素材を作る。彼女は、執筆、興味深いソフトウェアの開発、そして（ドキュメンタリーを通じて）世界中を旅することに情熱を注いでいます。
KadeishaKeanのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください