HTMLフォームの基本的な知識

HTMLフォームの基本的な知識

私をクリックしてグループ     に参加し、一緒に学び、コミュニケーションを図ってください。(グループにはたくさんの学習資料があります。グループで行ったWebページのいくつかをアップロードしました。必要なものをダウンロードするだけです)

QQグループ:722384575

実際のフォーム、銀行に行ってクレジットカードフォームに記入すると、Webページのフォームが表示されます

ここに画像の説明を挿入

ここに画像の説明を挿入

フォームが必要な理由フォームを使用する目的は、ユーザー情報を収集することです。
私たちのウェブページでは、ユーザーと対話し、ユーザー情報を収集する必要もあります。このとき、フォームが必要です。
フォームタグ
HTMLでは、完全なフォームは通常、フォームフィールド、フォームコントロール(フォーム要素とも呼ばれます)、プロンプト情報の3つの部分で構成されます。

ここに画像の説明を挿入
フォームフィールド
フォームフィールドは、フォーム要素を含む領域です。
HTMLタグでは、<form>タグを使用してフォームフィールドを定義し、ユーザー情報の収集と送信を実現します。<form>スコープ内のフォーム要素情報をサーバーに送信します。

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

ここに画像の説明を挿入
フォームコントロール(フォーム要素)
は、フォームフィールドにさまざまなフォーム要素を定義できます。これらのフォーム要素は、ユーザーがフォームに入力または選択できるようにするコンテンツコントロールです。
次に、
1、入力フォーム要素の入力
2、ドロップダウンフォーム要素の選択
3、
英語のテキストエリアテキストフィールド要素、入力は入力手段、および<input>ユーザー情報の収集に使用されるフォーム要素タグについて説明します。
<input>ラベル、タイプ属性を含む、type属性の値に依存して(テキストフィールド、チェックボックス、マスク後のテキストコントロール、ラジオボタン、ボタン、等であってもよい)フォーム入力フィールドの多種多様を持っています。

<input type="属性值" />

<input />ラベル
、単一のラベルタイプ属性に異なる属性値設定して、異なるコントロールタイプを指定します
<input>フォーム要素の
タイプ属性の属性値とその説明は次のとおりです。
ここに画像の説明を挿入
タイプ属性に加えて、<input>ラベルには他の多くの属性があります。一般的な属性は次のとおりです:
ここに画像の説明を挿入
1。名前と値は各フォーム要素の属性値であり、主にバックエンド担当者によって使用されます
.2。名前はフォーム要素の名前であり、ラジオボタンとチェックボックスが必要です同じ名前の値を持つようにすること。
3. checked属性は、主にすぐにページが開かれると、デフォルトでフォーム要素を選択するために使用され、単一のボタンやチェックボックスのために主にある。
4. MAXLENGTHは、ユーザーができることを文字の最大数です通常はあまり使用されない
<input>フォーム要素を入力し
ますフォーム要素1.一部のフォーム要素ページを開いたときにデフォルトでいくつかのテキストを表示したい場合はどうすればよいですか?
回答:これらの値属性= "value"を設定できますフォーム要素

 用户名: <input type="text" value="请输入用户名" /> 

2.ページには多くのフォーム要素があります。異なるフォーム要素を区別する方法は?
回答:name属性:現在の入力フォームの名前。name属性を介してバックグラウンドで見つけることができます。このページには多くのフォームがあり、名前の主な機能はさまざまなフォームを区別することです。

用户名: <input type="text" value="请输入用户名" name="username" /> 

name属性の背後にある値は、カスタム
ラジオ(またはチェックボックス)です。グループの場合は、同じ名前を付ける必要があります。

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

3.ページが開かれた直後に特定のラジオボタンまたはチェックボックスが選択され
た場合はどうなりますか?回答:チェックされた属性:デフォルトの選択された状態を示します。ラジオボタンとチェックボタンに使用されます。

:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

4.入力フォーム要素にさまざまなフォームを表示させる方法(ラジオボタンやテキストボックスなど)

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”> 

<label>ラベル
<label>ラベルは、入力要素のラベル(ラベル)を定義します。
<label>ラベルはフォーム要素をバインドするために使用されます。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心: <label> 标签的 for 属性应当与相关元素的 id 属性相同。

<select>フォーム要素の
使用シナリオ:ページで、ユーザーが選択できるオプションが複数あり、ページスペースを節約したい場合は、<select>ラベルコントロールを使用してドロップダウンリストを定義できます
ここに画像の説明を挿入
<select>フォーム要素の
構文:

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>
1. <select> 中至少包含一对<option> 。
2. 在<option> 中定义 selected =“ selected " 时,当前项即为默认选中项。

<textarea>フォーム要素の
構文:

<textarea rows="3" cols="20">
 文本内容
</textarea>

1、by<textarea>は複数行のテキスト入力ボックスラベルを簡単に作成できます。
2. cols = "各行の文字数"、rows = "表示される行数"、実際の開発では使用せず、CSSを使用してサイズを変更します。
使用シナリオ:ユーザーが大量のコンテンツを入力すると、テキストボックスフォームを使用できなくなりますtextarea>現時点では、<タグを使用できますフォーム要素では、<textarea>ラベルは複数行のテキスト入力を定義するために使用されるコントロールです。複数行のテキスト入力コントロールを使用して、より多くのテキストを入力します。このコントロールは、掲示板やコメントで一般的です。フォーム要素の
いくつかの要約ポイント
1.フォーム要素入力入力フォーム要素の3つの主要なグループがドロップダウンフォーム要素を選択することを学びましたtextareaテキストフィールドフォーム要素
2.これらの3つのフォーム要素のグループはすべてフォームフィールドに含まれている必要がありますname属性があります。

<form>
<input type=“text" name=“username”>
<select name=“jiguan”>
 <option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>

フォーム要素のいくつかの要約ポイント
非常によく似た名前のタグが3つあります。
(1)フォームフィールドフォームの使用シナリオ:領域内のフォーム要素をバックエンドサーバーに送信します。
(2)ファイルフィールドファイルは入力タイプの属性値です。使用シナリオ:ファイルのアップロード
(3)Textarea textareaの使用シナリオ:メッセージボードのWebサイトの紹介など、複数行のテキストを入力できます...
4.この段階ではフォーム要素を送信する必要がないため、責任を負うのはフォーム要素の外観。
ドキュメントを
頻繁に参照することが非常に重要です。良い学習習慣。
推奨URL:
MDN
W3cshool

おすすめ

転載: blog.csdn.net/m0_46374969/article/details/113106325