ホームページ ウェブフロントエンド htmlチュートリアル HTMLのフォームに関する知識の解説(コード例)

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

Aug 30, 2018 am 11:36 AM
html web

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

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

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

mailto

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

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

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

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

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

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

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

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

フォーム

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

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

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

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

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

<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>
ログイン後にコピー

テキストフィールド

ユーザーがフォームに

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

で終わります。

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

标签之间可以输入默认值。注意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"属性,则该选项就被默认选中。

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

提交按钮和重置按钮

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

提交按钮

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

value:按钮上显示的文字

重置按钮

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

value:按钮上显示的文字

<input type="submit" value="提交">
<input type="reset" value="重置">
ログイン後にコピー

相关推荐:

HTML ------ 关于表单 Form - Tina_xy

带你掌握HTML中table和form表单

以上がHTMLのフォームに関する知識の解説(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles