1. フォームタグを使用してユーザーと対話します
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>表单标签</title> 6 </head> 7 <body> 8 <form> 9 <label for="username">用户名:</label> 10 <input type="text" name="username" id="username" value="" /> 11 <label for="pass">密码:</label> 12 <input type="password" name="pass" id="pass" value="" /> 13 <input type="submit" value="确定" name="submit" /> 14 <input type="reset" value="重置" name="reset" /> 15 </form> 16 </body> 17 </html>
Web サイトはどのようにユーザーと対話しますか?答えは、HTMLフォーム(フォーム)を使用することです。フォームはビューアによって入力されたデータをサーバーに送信できるため、サーバー側プログラムはフォームから渡されたデータを処理できます。
文法:
<form method="传送方式" action="服务器文件">
説明:
1.
で終わります。2.action: PHP ページ (save.php) など、ビューアによって入力されたデータが送信される場所。
3.method: データ送信メソッド (get/post)。 post は暗号化された送信、get はアドレスバーの送信、つまり暗号化されていない送信です。
<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. すべてのフォーム コントロール (テキスト ボックス、テキスト フィールド、 ボタン、ラジオ ボックス、 チェック ボックス など) は、
に配置する必要があります。タグを使用します (そうしないと、ユーザーが入力した情報がサーバーに送信されない可能性があります)。2. メソッド: post/get の違い この部分はバックエンド プログラマーが考慮すべき事項です。
試してみましょう: エディタの8行目の
15 16ユーザーがフォームに文字や数字などを入力する場合、テキスト入力ボックスが使用されます。テキストボックスをパスワード入力ボックスに変換することもできます。
文法:
<form> <input type="text/password" name="名称" value="文本" /> </form>
1. タイプ:
type="text" の場合、入力ボックスはテキスト入力ボックスです。
type="password" の場合、入力ボックスはパスワード入力ボックスです。
2. 名前: バックグラウンド プログラム ASP と PHP で使用するテキスト ボックスに名前を付けます。
3. 値: テキスト入力ボックスのデフォルト値を設定します。 (通常はプロンプトとして使用されます)
例:
<form> 姓名： <input type="text" name="myName"> <br/> 密码： <input type="password" name="pass"> </form>
ブラウザに表示される結果:
試してみる: フォームに名前とパスワードの入力ボックスを挿入します
1. エディターで 10 行の入力を行います。コード:
<input type="text" name="myName" />
2. エディターの 13 行目にコードを入力します。
<input type="password" name="pass" />
属性の間に少なくとも 1 つのスペースを入れます。
hidden は、送信ボタンとして画像を定義します。
number は、スピナーを定義します。コントロールの数値フィールド
password は、パスワード フィールドを定義します。フィールド内の文字はマスクされます
radio はラジオ ボタンを定義します
range はスライダー コントロールを備えた数値フィールドを定義します
reset はリセット ボタンを定義します。リセット ボタンは、すべてのフォーム フィールドを初期値にリセットします。
search 検索に使用するテキスト フィールドを定義します。
submit 送信ボタンを定義します。送信ボタンはサーバーにデータを送信します
テキスト デフォルト。ユーザーがテキストを入力できる単一行の入力フィールドを定義します。デフォルトは 20 文字です
url は URL に使用されるテキストフィールドを定義します
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>文本域</title>
6 </head>
7 <body>
8 <form action="save.php" method="post" >
9 <label>个人简介：</label>
10 <textarea>在这里输入内容...</textarea>
11 <input type="submit" value="确定" name="submit" />
12 <input type="reset" value="重置" name="reset" />
13 </form>
14 </body>
15 </html>
ユーザーがフォームに大きなセクションのテキストを入力する必要がある場合場合は、テキスト入力フィールドを使用する必要があります。 構文: <textarea rows="行数" cols="列数">文本</textarea>1. で終わります。 2. 列数: 複数行の入力フィールドの列数。 3. 行: 複数行の入力フィールドの行数。 4. の間にデフォルト値を入力できます。 例: ブラウザでの結果の表示:
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
来试一试：修改文本域的列数和行数
在编辑器中第10行
标签的语义一定要根据单词来记忆，这样才会扎实透彻，
preformattde：预定义格式(文本)的意思，这里的<textarea>是多行文本区域的意思，<p class="sycode">根据意思就知道不同了，而且<textarea>中的默认字样，用户可以自行更改的，<pre class="brush:php;toolbar:false">中的内容，用户只能看不能动！ <br>
col与rows设定的值只会影响输入框的大小，不会影响你输入多少字
四、使用单选框、复选框，让用户选择
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>单选框、复选框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>性别:</label> 10 <label>男</label> 11 <input type="radio" value="1" name="gender-man" /> 12 <label>女</label> 13 <input type="radio" value="2" name="gender-woman" /> 14 </form> 15 </body> 16 </html>
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，
两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
如下面代码：
在浏览器中显示的结果：
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
来试一试：修改单选框代码错误（男、女可以同时选择），使其具有单选作用。
1、在编辑器中第11行、13行代码有错误，请改正。
记住：
1、同一组单选框name命名要一致。
2、你是否输入像下面的代码：
<label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" />
五、使用下拉列表框，节省空间
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>下拉列表框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>爱好:</label> 10 <select> 11 <option value="看书">看书</option> 12 <option value="旅游">旅游</option> 13 <option value="运动">运动</option> 14 <option value="购物">购物</option> 15 </select> 16 </form> 17 </body> 18 </html>
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
讲解：
1、value：
2、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：
来试一试：把“爱好”下拉列表的“旅游”选项设置为默认选项
在编辑器中的第12行补充代码 selected="selected"。
你是否输入像下面的代码：
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
以上がHTML 基本チュートリアル: ビューアとの対話、フォームタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AMhtmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。
HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AMコードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。
ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PMBootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...
DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PMマウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...
HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PMHTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。
お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...
お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PMお使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...
Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は？Apr 30, 2025 pm 03:09 PMThree.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SublimeText3 中国語版
中国語版、とても使いやすい
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ホットトピック
7892
15165114141152130225124829