HTMLフォームタグの使い方のチュートリアル

フォームは、Web ページ上でユーザー入力とサーバー側のデータを操作するための最も基本的な方法です。ここでは、最も基本的なフォーム コンテンツの表示に焦点を当て、HTML フォームのフォーム タグの使用方法についてのチュートリアルを見ていきます

。 HTMLのフォームを利用して、ユーザーのさまざまな入力情報を収集できます。フォームは実際にはフォーム要素を含む領域であり、この領域内のさまざまな要素の入力情報は、最終的にフォームを通じてプログラム スクリプトに送信されます。たとえば、一般的なものには、ユーザーのログイン、登録、記事の公開などが含まれ、これらはすべてフォームを介して処理するために動的プログラムに送信されます。このセクションでは主にフォームとフォーム要素について説明します。フォーム情報を動的プログラムに送信する方法については、今後のプログラミング言語のレッスンで説明します。
フォームの領域では、

タグを使用して、

内の要素の値がこのフォームを通じて対応するアドレスに送信されます。 。

入力情報
一般に、 タグはユーザー入力情報を収集するために使用されます。入力タイプはタイプによって決まります。
ほとんどの場合に使用される form タグは、input タグ () です。入力タイプは type 属性 (type) によって定義されます。一般的な入力タイプには、テキスト フィールド、ラジオ ボタン、チェック ボックス、ドロップダウン メニューなどが含まれます。

テキスト フィールド
テキスト フィールドは、ユーザーにテキストを入力する機能を提供します。ユーザーは、テキスト フィールドを四角形のボックスとして解釈し、ボックス内にカーソルを移動します。ユーザーはフォームに文字、数字などを入力できます。
テキスト フィールドは、 タグの type 属性のテキスト値を設定することで定義されます。

<form>  
文本域1:<input type=”text” name=”firstname” />  
文本域2:<input type=”text” name=”lastname” />  
</form>

ブラウザには次のように表示されます。

ラジオ ボタンは、ほとんどの場合、ユーザーが登録 データ入力時のオプションのうち、このタイプのマルチユーザーでは、ユーザーは 1 つの結果のみを選択できます。
ラジオ ボタンは、 タグの type 属性の値を radio に設定することで定義されます。ブラウザには次のように表示されます。またはそれ以上の対応するオプション。一般的なのは、ログイン時にログイン アカウントを記憶するなどの機能をユーザーに提供することです。ユーザーアンケートページではユーザーから複数の意見を収集することもできます。
チェックボックスの定義方法は、 タグのチェックボックスに type 属性の値を設定することです

<form>  
<input type=”radio” name=”sex” value=”male” /> 男生   
<input type=”radio” name=”sex” value=”female” /> 女生   
</form>

ブラウザには次のように表示されます:

ドロップダウンメニュー
情報選択のラジオ ボタンと同じです。同様ですが、ドロップダウン メニューにはより多くの情報を含めることができます。また、ドロップダウン メニューでは、メニュー値を選択した後に追加のスクリプトを実行できます。
ドロップダウン メニューは で始まり、select タグ内の各オプション タグはドロップダウン メニューの値です。

<form>  
<input type=”checkbox” name=”val1″ />  
前端开拓者不错   
<input type=”checkbox” name=”val2″ />  
前端开拓者一般   
</form>

ブラウザ表示:

送信ボタン
送信ボタンは、すべてのフォームの重要な部分です。ユーザーは対応する情報を入力した後、送信ボタンをクリックしてアクションをトリガーし、フォーム値を次のページに送信する必要があります。

タグの action 属性で対応する送信アドレスが設定されている場合、送信ボタンはフォームで取得したすべてのデータをこのアドレスのページに送信します。
送信ボタンは、inputタグに送信するタイプの値を設定することで定義されます。以下は、送信アドレスを検索ページとして設定する、フロントエンド開発者の検索ボックスの例です。

<form>  
<select name=”cars”>  
<option value=”volvo”>Volvo</option>  
<option value=”saab”>Saab</option>  
<option value=”fiat”>Fiat</option>  
<option value=”audi”>Audi</option>  
</select>  
</form>

ブラウザは次のように表示されます:

結論: このセクションは、一般的に使用されるフォーム フロントエンド レイアウト要素の基本的なデモと説明にすぎません。リアルフォームアプリケーションは主にサーバープログラミング言語で使用され、より多くのパラメータとルールを設定する必要があります。このレッスンでは、フォームの要素を配置する方法を理解するだけで済みます。ほとんどの場合、基本的にバックグラウンド プログラマーと協力して Web サイトの開発を完了できます。

HTML フォーム タグの使用方法に関する学習チュートリアルに関する関連記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。