知っておくべき10のHTMLフォームタグ

この記事はもともと投稿されました.
HTMLタグは、Webブラウザのウェブサイト内のコンテンツをフォーマットし、表示する方法を定義するのに役立つ特別なキーワードとして考慮することができます.HTMLフォームは、一般的にフィードバックを受け取るためにウェブサイトの訪問者からの入力を収集するために使用されているため、サポートのリクエスト、ジョブアプリケーション、またはより多くの、フォーム関連のHTMLタグは、他のHTMLタグよりも対話型です.
このガイドでは、我々はすべてのフォームのHTMLタグのような最も有名なものからタグやタグを開始し、非常に有用で興味深いかもしれませんし、HTML形式を形成するためのタグを使用するように最善の方法で続行します.

フォームタグ
The <form> タグは、インタラクティブなセクション、あなたのウェブサイト内のユーザー入力を収集するフォームを作成するために使用されます.これは、データ提出のすべてのフォーム要素を含む領域を定義します.
タグで使用される最も一般的で重要な属性は“action”と“method”です.“action”属性は、フォーム提出後のデータを受信し処理するサービスのURLを指定します.一方、“method”属性は、getメソッドまたはpostの値を取得できるデータを送信するHTTPメソッドを定義します.
ここでどのように<form> タグを使用します

<form action="https://getform.io/f/{unique-form-endpoint-goes-here}" 
method="POST">
All the form content goes here..
</form>

入力タグ
The <input> それはテキスト、電子メールアドレス、電話番号、日付、ファイルのアップロード、ラジオボタンなどの入力フィールドのさまざまな種類を定義するのに役立ちますので、タグは最も人気のあるものです.
入力フィールドを指定するには、“type”属性は<input> タグ.もう一つの有用な属性は認識される入力の名前を定義して、それがサーバーに送られるとき、値を得る「名前」です.また、入力フィールドからどのような値が期待されるかについてユーザにヒントを与えるために、“placeholder”属性を使用することもできます.「必須」属性は、フォームを送信する前に入力するフィールドを指定するのにも重要です.
の使用例を加えましょう<input> 入力フィールドの異なる種類のタグを<form> タグ

<label for="name">Full Name*:</label>
<input type="text" name="name" placeholder="Your Name*" 
required="required">

<label for="email">Email Address*:</label>
<input type="email" name="email" placeholder="Your Email*" 
required="required">

<label for="phone">Phone Number</label>
<input type="tel" name="phone" placeholder="1-(555)-555-5555">

<label for="male">Male</label>
<input type="radio" name="gender" />

<label for="female">Female</label>
<input type="radio" name="gender" />

<label for="other">Other</label>
<input type="radio" name="gender">

ラベルタグ
The <label> タグは、Webフォームの入力要素のキャプションまたはラベルを作成するために使用されます.これは、入力フィールドの簡単な説明を提供します.
あなたは<label> タグをフォーム内に配置したり、ラベルにバインドされている入力要素を指定するための“for”属性を追加することでタグを付けます.
私たちは<label> 既存の入力フィールドにタグを使用して、我々は使用して作成される無線ボタン;

選択&オプションタグ
フォームにさまざまなオプションを持つドロップダウンメニューが必要な場合は、<select> と<option> タグ.タグは、選択またはドロップダウンリスト自体を定義するために使用されます.リスト内のすべてのオプションはタグで表されます.
属性については、<select> タグも.ドロップダウンリスト内の各オプションの値を定義するには、<option> タグ.
以下に例を示します.

textareaタグ
The <textarea> タグは、文字の数に制限を持つことができます複数行のテキスト領域を作成するために使用されます.これは、訪問者のコメントやメッセージを収集するフォームフィールドを持つための非常に有用なタグです.
テキスト領域のサイズを指定する場合は、“rows”と“col”属性を追加できます.“name”属性もここでブラウザによって送信される名前を定義するために使用されます.もう一つは、テキスト領域に入力できる文字数を制限する「maxlength」属性です.
以下に例を示します.

オプトグループタグ
HTMLタグに関連するあまり知られていない形式の一つとして<optgroup> あなたが訪問者がより簡単な方法で長いドロップダウンリストからオプションを選ぶことを望むならば、タグは非常に役に立つことがありえます.グループ内の関連する要素をグループ化できます<select> を使用したリスト<optgroup> タグ.オプションの各グループに共通の名前を定義するには、“label”属性を追加できます.
を使いましょう<optgroup> 以前に作成したドロップダウンリストのタグ

進捗タグ
HTML 5で導入されたタグの一つとして<progress> は、アップロードやダウンロードのようなタスクの進行状況を表示するプログレスバーを作成するために使用されます.Webフォームのタグの最も一般的なユースケースは、ファイルアップロードの進行を表すことです.
進捗値を決定するには、<progress> チェンタグ.
ファイルアップロードの進行状況バーを作成しましょう

フィールドセット＆レジェンド
あなたは考えることができます<fieldset> 関連するフォーム要素のコンテナとしてタグを付けます.それはあなたのフォームをより理解しやすくするために便利です.The <legend> タグは、<fieldset> タグ.
これらのタグを使用して、前述のフォーム要素の一部をグループ化します

出力タグ
新しく紹介された、知られていないタグとして他のものと比較して<output> タグは、通常、スクリプトによって実行される計算結果またはユーザ動作の結果を表示するために使用されます.
“name”属性を使用して、<output> タグ.HTMLドキュメント内の任意の要素の一意のIDを定義するには、特定のタスクを実行するためにCSSまたはJavaScriptで使用される一意の識別子を割り当てる“id”属性を使用する必要があります.また、<output> tagは“for”属性です.これは、結果と“id”属性の一覧を使用して使用される要素の間の関係を指定します.
のいずれかを示しましょう<output> タグのユースケースは、助けを借りて構築;

ボタンタグ
その名が示すように<button> タグは、HTMLフォーム内のクリック可能なボタンを作成するために使用されます.また、使用することによってボタンを作成することができますが、“値”属性なしでボタンの内側にテキストを追加することはできません.ブラウザで送信されるボタンの型を定義するために“type”属性を追加する必要があります.
使用方法はこちら
それだ!
最後に、私たちが以前にカバーしたHTMLタグに関連するフォームで完全なジョブアプリケーションフォームを作成しましょう.
この例のフォームには<form> ファイルのアップロードを許可するenctype =“multipart/form data”属性のタグ.<fieldset> , <legend> , <label> , <select> , <option> 畝<optgroup> , <textarea> , <progress> and <input> タグと最後にデータを送信する<button> タグ.
データを送信するには、GetFormで生成された一意のフォームエンドポイントを配置し、アクション属性に配置します.


結論
私たちは、このガイドでは、主要なフォームのHTMLタグに関連する発見に便利を見つける願っています.あなたがこのポストが好きであるならば、共有して、GetFormブログからより多くの最新版のために、Chi - CalとChiang .
あなたのHTMLフォームでGetFormを設定するのを手伝って欲しいならば、我々はあなたに[email protected]
以下のリソースから別のユースケースについての詳細情報とコードサンプルを見つけることができます.

Codepen examples

Codesandbox examples