ホームページ > 記事 > ウェブフロントエンド > HTMLのフォームに関する知識の解説（コード例）

HTMLのフォームに関する知識の解説（コード例）

不言オリジナル: 2018-08-30 11:36:082375ブラウズ

この記事は HTML のフォームに関する知識 (コード例) を提供します。必要な方は参考にしていただければ幸いです。

リンクを新しいブラウザウィンドウで開きます

3499910bf9dac5ae3c52d5ede7383485 タグデフォルトでは、リンクされた Web ページは現在のブラウザウィンドウで開かれます。場合によっては、新しいブラウザウィンドウで開くが必要になります。。

<a href="目标网址" target="_blank">新的浏览器窗口打开</a>

mailto

3499910bf9dac5ae3c52d5ede7383485 タグには、mailto を使用すると、Web サイト管理者に簡単にメールを送信できる機能もあります。

mailto 電子メールアドレスを指定すると、ブラウザは自動的にデフォルトのクライアント電子メールプログラム (OutLock など) を呼び出し、受信者ボックスに受信者のアドレスを自動的に入力します。

cc= Cc アドレス。受信者アドレスの後に cc=address を使用すると、Cc アドレスを入力できます。

bcc= Bcc アドレス、受信者のアドレスの後に bcc= アドレスを使用します。Bcc アドレスを入力できます

; 複数の受信者、CC、BCC 受信者、ポイントを使用します複数の受信者のアドレスを数字で区切ります。複数の受信者に送信できます

subject= メールの件名、subject= を使用してメールの件名を追加します

body メールの内容、body= を使用してメールの内容を追加します

mailto の後に複数のパラメーターがある場合、最初のパラメータは「?」で始まり、後続の各パラメータは「&」で区切られる必要があります。

<a href="mailto:123456@qq.com">发送</a>
<a href="mailto:123456@qq.com?cc=123456@qq.com">发送</a>
<a href="mainto:123456@qq.com?bcc=654321@qq.com">发送</a>
<a href="mailto:123456@qq.com;654321@qq.com">发送</a>
<a href="mailto:123456@qq.com?subject=发送电子邮件">发送</a>
<a href="mailto:123456@qq.com?body=欢迎来到HTML代码世界">发送</a>

フォーム

HTMLフォーム(フォーム)を使用してユーザーと対話します。フォームはブラウザーによって入力されたデータをサーバーに送信できるため、サーバー側プログラムはフォームによって渡されたデータを処理できます。

ff9c23ada1bcecdd1a0fb5d5a0f18437: ff9c23ada1bcecdd1a0fb5d5a0f18437 タグがペアで表示され、ff9c23ada1bcecdd1a0fb5d5a0f18437 が始まり、f5a47148e367a6035fd7a2faa965022e が終わります

アクション: ブラウザーによって入力されたデータが

メソッドに送信されます。 : データ送信方法 (get/post)

注: すべてのフォームコントロール (テキストボックス、テキストフィールド、ボタン、ラジオボックス、チェックボックスなど) はラベル間の ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e に配置する必要があります。 (そうしないと、ユーザーが入力した情報がサーバーに送信されない可能性があります)

<form method="传送方式" action="服务器文件">
<form method="post" action="save.php">
    <label for = "username">用户名：</label>
    <input type = "text" name="username" />
    <input for = "pass">密码:</label>
    <input type = "password" name="pass">

フォーム内のラベルラベル

ラベルラベルは、マウスユーザーの使いやすさを向上させるためのものです。このコントロールは、ラベル label 内のテキストをクリックするとトリガーされます。つまり、ユーザーがクリックしてラベルを選択すると、ブラウザは自動的にラベルに関連付けられたフォームコントロールにフォーカスを移します (ラベルに関連付けられたフォームコントロールが自動的に選択されます)。

注: ラベルの for 属性の値は、コントロールの id 属性の値と同じである必要があります。

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

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

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

type: type="text" の場合、入力ボックスはテキスト入力ボックスです。type="password" の場合、入力ボックスはパスワード入力ボックスです。

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

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

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

テキストフィールド

ユーザーがフォームに

大きなテキストを入力する必要がある場合、テキスト入力フィールドが必要になります。

4750256ae76b6b9d804861d8f69e79d3 タグは、4750256ae76b6b9d804861d8f69e79d3 で始まり 40587128eee8df8f03d0b607fe983014 で終わります。

cols: 複数行の入力フィールドの列数。 : 複数行フィールドに行数を入力します。

在4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014标签之间可以输入默认值。注意cols和rows这两个属性可用CSS样式的width和height来代替：col用width、row用height来代替。

<form method = "post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容。。。</textarea>
</form>

单选框、复选框

在HTML中有两种选择框，单选框和复选框，两者的区别是单选框中的选项用户只能选择一项；复选框中用户可以任意选择多项甚至全选。

type：当type="radio"时为单选框，type="checkbox"时为复选框

value：提交数据到服务器的值

name：为控件命名

checked：当设置checked="checked"时，该选项被默认选中

注意：同一组单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的用作。

下拉列表框

<option value=&#39;提交值&#39;>选项</option>

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

value='提交值'——>向服务器提交的值；选项——>显示的值

selected="selected"属性，则该选项就被默认选中。

下拉列表可以进行多选操作，在53ef528b06ec79ef05684370cfbe8ed2标签中设置multiple="multiple"属性，就可以实现多选功能，在window操作系统下，进行多选时按下Ctrl时同时进行单击(在Mac下使用Command+单击)，可以选择多个选项。

提交按钮和重置按钮

表单中有两种按钮可以使用，分别是提交按钮，重置按钮。

提交按钮：

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

value：按钮上显示的文字

重置按钮：

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

value：按钮上显示的文字

<input type="submit" value="提交">
<input type="reset" value="重置">

HTMLのフォームに関する知識の解説（コード例）

関連記事