第 4 章 ビューアとの対話、フォームタグ

4-1 フォームタグを使用してユーザーと対話します

Web サイトはどのようにユーザーと対話しますか?答えは、HTML フォームを使用することです。フォームはビューアによって入力されたデータをサーバーに送信できるため、サーバー側のプログラムはフォームから渡されたデータを処理できます。

文法:

<form   method="传送方式"   action="服务器文件">

説明: 1.

: タグは、 で始まり

で終わります。 2.アクション : PHPページ(save.php)など、閲覧者が入力したデータが送信される場所。 3.メソッド ： データ送信のメソッド(get/post)。

そうです

注:すべてのフォーム コントロール (テキスト ボックス、テキスト フィールド、ボタン、ラジオ ボックス、チェック ボックスなど) は

タグの間に配置する必要があります。ユーザーはサーバーに送信できません!)。

1.png

4-2 テキスト入力ボックス、パスワード入力ボックス

ユーザーがフォームに文字や数字などを入力したい場合は、テキスト入力ボックスを使用します。テキストボックスはパスワード入力ボックスに変換することもできます。 文法 :

<form  method="post" action="save.php">    <label for="username">用户名:</label>     <input type="text" name="username" />     <label for="pass">密码:</label>     <input type="password" name="pass" /></form>

1、タイプ:

type="text" の場合、入力ボックスは textinput box です。 type="password" の場合、入力ボックスは です。パスワード入力ボックス。

2、名前: バックグラウンド プログラム ASP および PHP で使用するテキスト ボックスに名前を付けます。

3、値: テキスト入力ボックスのデフォルト値を設定します。 (通常はプロンプトとして使用されます) 例:

rrree

ブラウザに表示される結果:

2.jpg

4-3 テキストフィールド、複数行のテキスト入力をサポート

ユーザーが入力する必要がある場合フォーム内のフォーム 大きなテキストのブロックを入力する場合は、テキスト入力フィールドを使用する必要があります。 文法:

1. タグは、<textarea> で始まり、 で終わります。 2.

cols: 複数行の入力フィールドの列数。 3. 行数: 複数行の入力フィールドの行数。 4. タグの間にデフォルト値を入力できます。

例:

<form>   <input type="text/password" name="名称" value="文本" /></form>

結果をブラウザに表示します:

3.jpg

これら 2 つのプロパティは、CSS スタイルの幅と高さに置き換えることができることに注意してください。col は width に置き換えられ、row は置き換えられます。身長によって。 4-4 ラジオボタンやチェックボックスを使ってユーザーに選択させよう

フォームを使ってアンケートを設計する場合、ユーザーの操作を軽減するために、HTML には 2 種類のセレクトボックスを使用するとよいでしょう。

単一 選択ボックス と チェック ボックス の違いは、ユーザーは ラジオ ボタン でオプションを 1 つだけ選択できるのに対し、 チェック ボックス では複数またはすべてのオプションを選択できることです。以下の例を参照してください:

構文:

rrree

1,

type: type="radio" の場合、コントロールは ラジオ ボタン type="checkbox" の場合、コントロールは 複数選択ですボックス 2. value: サーバーにデータを送信する値 (バックグラウンド プログラム PHP によって使用されます) 3. name: バックグラウンド プログラム ASP および PHP で使用するコントロールの名前を指定します。 4. checked: selected= を設定する場合「チェック済み」の場合、次のコードに示すように、オプションがデフォルトで選択されます:

4.jpg

ブラウザに表示される結果:

5.jpg

注:

:同じグループ 、名前の値は一貫している必要があります。たとえば、上記の例では同じ名前「radioLove」があり、同じグループ内のラジオ ボタンがラジオ選択として機能します。

4-5 ドロップダウン リスト ボックスを使用してスペースを節約する

ドロップダウン リストは Web ページでもよく使用され、Web スペースを効果的に節約できます。単一または複数の選択を選択できます。次のコード:

6.jpg

説明: 1、値:

7.jpg

2、

selected="selected"

: select を設定します編」属性の場合、このオプションはデフォルトで選択されています。ブラウザに表示される結果:

8.jpg

4-6 複数の選択にはドロップダウン リスト ボックスを使用します

ドロップダウン リストでは複数の選択操作を実行することもできます。< で multiple="multiple を設定します。 ;select> タグ「プロパティ」を使用すると、複数選択機能を実現できます。Windows オペレーティング システムでは、複数の選択を行うときに、

Ctrl

キーを押しながら同時にクリック (Mac では Command + クリックを使用) して複数のオプションを選択します。 。次のコード:

9.jpg

在浏览器中显示的结果：

10.jpg

4-7 使用提交按钮，提交数据

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。语法：

<input  type="submit" value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

举例：

11.jpg

在浏览器中显示的结果：

12.jpg

4-8 使用重置按钮，重置表单信息

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。语法：

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

举例：

13.jpg

在浏览器中显示的结果：

14.jpg

输入账号

15.jpg

单击重置按钮4-9 form表单中的label标签

小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。例子：

<form>    <label for="male">男</label>   <input type="radio" name="gender" id="male" />    <br />    <label for="female">女</label>    <input type="radio" name="gender" id="female" />   <label for="email">输入你的邮箱地址</label>   <input type="email" id="email" placeholder="Enter email"></form>