HTML+CSS勉強記(5) - 閲覧者とのやりとり、フォームタグ

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

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

文法:

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

説明:

1.

:

タグは、

で始まり

で終わります。

2.action: ビューアによって入力されたデータが送信される場所 (PHP ページ (save.php) など)。

3.method: データ送信メソッド (get/post)。

注意:

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

タグの間に配置する必要があります。情報をサーバーに送信することはできません）。

2. Method:post/get の違いは、バックエンド プログラマが考慮すべき事項です。後で PHP ネットワーク データ処理を学習するときに共有できます。

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" の場合、入力ボックスはテキスト入力ボックスです。type="password" の場合、入力ボックスはパスワード入力ボックスです。 2. name: バックグラウンド プログラム ASP および PHP で使用するテキスト ボックスに名前を付けます。 3. value: テキスト入力ボックスのデフォルト値を設定します。 (通常はプロンプトとして使用されます)

例:

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

3. テキスト フィールド、複数行のテキスト入力をサポートします

ユーザーがフォームに長いテキストを入力する必要がある場合、テキスト入力フィールドが必要です。

文法:

1. タグは、<textarea> で始まり、 で終わります。 2.cols: 複数行の入力フィールドの列数。 3. rows: 複数行の入力フィールドの行数。 4. タグの間にデフォルト値を入力できます。 例:

<form>  姓名：  <input type="text" name="myName">  <br/>  密码：  <input type="password" name="pass"></form>

4. ラジオボタンとチェックボックスを使ってユーザーに選択させる

フォームを使ってアンケートを設計する場合、ユーザーの操作を軽減するために、セレクトボックスを使用するとよいでしょう。 HTML 選択ボックスは、ラジオ ボタン ボックスとチェック ボックスです。この 2 つの違いは、ユーザーがラジオ ボタン ボックスでは 1 つのオプションのみを選択できるのに対し、チェック ボックスでは複数のオプション、またはすべてのオプションを選択できることです。以下の例を参照してください:

構文:

rrree

1、type:

type="radio" の場合、コントロールはラジオ ボタンです

type="checkbox" の場合、コントロールはチェック ボックス

2 , value: サーバーにデータを送信する値 (バックグラウンド プログラム PHP によって使用されます)

3. name: バックグラウンド プログラム ASP および PHP によって使用されるコントロールに名前を付けます。このオプションは、以下に示すようにデフォルトで選択されています:

5. スペースを節約するには、ドロップダウン リスト ボックスを使用します

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

説明:

1. 値:

2. selected="selected" 属性を設定すると、オプションが選択されます。デフォルト。

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

ドロップダウン リストでは、複数選択機能を実現するために タグに multiple="multiple" 属性を設定することもできます。 Widows オペレーティング システムでは、複数のオプションを選択するときに、Ctrl キーを押しながらクリック (Mac では Command キーを押しながらクリック) することで、複数のオプションを選択できます。次のコード:

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

7. 送信ボタンを使用してデータを送信します

フォームで使用できるボタンは 2 つあります。とリロードボタンを設定します。このセクションでは、送信ボタンについて説明します。ユーザーがフォーム情報をサーバーに送信する必要がある場合、送信ボタンを使用する必要があります。

構文:

<textarea  rows="行数" cols="列数">文本</textarea>

type: type 値が submit に設定されている場合のみ、ボタンには submit 関数があります。 value: ボタンに表示されるテキスト

例:

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

8. リセットボタンを使用してフォーム情報をリセットします

ユーザーが「ユーザー名」を入力し、書き込みエラーを見つけた場合など、ユーザーがフォーム情報を初期状態にリセットする必要がある場合、リセットボタンを使用できます。入力ボックスを初期状態に戻します。タイプを「リセット」に設定するだけです。

構文:

rrree

type: type 値がリセットに設定されている場合のみ、ボタンにはリセット機能があります

value: ボタンに表示されるテキスト

例:

結果はブラウザ:

9、form表单中的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>

---