HTMLフォーム要素の詳しい解説(パート1)

HTMLフォーム要素の詳しい解説(パート1)

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。

HTML フォームはユーザー入力を収集するために使用されます。

フォーム要素は HTML フォームを定義します。

<フォーム>
    フォーム要素
</フォーム>

アクション属性

action 属性は、フォームが送信されたときに実行されるアクションを定義します。

フォームをサーバーに送信する一般的な方法は、送信ボタンを使用することです。

通常、フォームは Web サーバー上の Web ページに送信されます。

action 属性が省略されている場合、アクションは現在のページに設定されます。

メソッドプロパティ

method 属性は、フォームを送信するときに使用する HTTP メソッド (GET または POST) を指定します。

GET はいつ使用すればよいですか?

GET (デフォルトのメソッド) を使用できます。

フォームの送信が受動的(検索エンジンのクエリなど)であり、機密情報が含まれていない場合。
GET を使用すると、フォームのデータがページのアドレスバーに表示されます: action.jsp?name=xxxx&sex=female
*ps: GET は少量のデータを送信するのに最適です。ブラウザによって容量制限が設定されます。

POST はいつ使用すればよいですか?

POSTを使用する必要があります:

フォームがデータを更新している場合、またはパスワードなどの機密情報が含まれている場合。
POST は、送信されるデータがページのアドレス バーに表示されないため、より安全です。

HTMLフォームにはフォーム要素が含まれる

フォーム要素とは、チェックボックス、ラジオボタン、送信ボタン、テキストフィールドなど、さまざまな種類の入力要素を指します。

<input>要素

<input> 要素は最も重要なフォーム要素です。

<input> 要素には、type 属性に応じてさまざまな形式があります。

-テキスト入力: type="text"

<フォーム>
<label>ユーザー名</label>
<input type="text" name="">
</フォーム>

-送信ボタン: type="submit" (フォーム ハンドラーにフォーム データを送信するボタンを定義します)

<フォームアクション="action.jsp">
<input type="submit" value="送信">
</フォーム>
/*アクションと連携*/
/*送信ボタンの value 属性が省略されている場合、ボタンにはデフォルトのテキスト、つまり「送信」という 2 つの単語が設定されます*/

- 単一選択: type="radio"

<フォーム>
<label>性別</label>
<input type="radio" name="sex" value="male" チェック済み>男性
<br>
<input type="radio" name="sex" value="female">女性
</フォーム> 
/*nameの値が一貫している場合、単一選択効果を実現できます*/
/*checked は選択された状態を意味します。checked="checked" と書くこともできます。*/

-チェックボックス: type="checkbox"

<フォーム>
<label>趣味</label>
<input type="checkbox" name="vehicle" value="スポーツ"><label>スポーツ</label>
<br>
<input type="checkbox" name="vehicle" value="Beauty"> <label>Beauty</label>
</フォーム>

/*checked は選択された状態を意味します。checked="checked" と書くこともできます。*/

- ボタンを定義: type="button"

<フォーム>
<input type="button" onclick="alert('123WORDPRESS.COM へようこそ!')" value="クリックしてください!">
</フォーム> 

/*通常のボタン*/

- ドロップダウンリスト: <select> 要素

<フォーム>
<名前を選択="車">
    <option value="volvo">ボルボ</option>
    <option value="saab">サーブ</option>
    <option value="fiat">フィアット</option>
    <option value="audi">アウディ</option>
</選択>
</フォーム> 

<option> 要素は選択するオプションを定義します。
リストには通常、最初のオプションが選択されたオプションとして表示されます。
選択した属性を追加することで、定義済みオプションを定義できます。

-Textarea: <textarea> 要素 (複数行の入力フィールドを定義します)

<フォーム>
<テキストエリア名="メッセージ" 行数="10" 列数="30">
ここに内容を入力してください!
</テキストエリア>

-ボタン: <button> 要素

<フォーム>
<button type="button" onclick="alert('123WORDPRESS.COM へようこそ!')">クリック!</button>

フォーム要素のプロパティの詳細については、次のリンクをクリックしてください: https://www.jb51.net/web/571879.html

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してご連絡ください。123WORDPRESS.COM をご愛顧いただき、ありがとうございます。

<<:  Dockerサーバーのストレージリソースプール不足問題の解決

>>:  MySQL クエリ キャッシュとバッファ プール

推薦する

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...

vue の v-for ディレクティブはリストのレンダリングを完了します

目次1. リストの走査2. Vueにおけるキーの役割3. リストフィルタリングこの記事では、Vue ...

Docker で Oracle 11g イメージ構成をプルダウンする際の問題を分析する

1. イメージをプルするdocker pull レジストリ.cn-hangzhou.aliyuncs...

Javascriptを使用して滑らかな曲線を生成する方法

目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...

ノードの対応するバージョンに関する簡単な説明 node-sass sass-loader

目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...

Win10 での MySQL 8.0.20 のインストールと設定のチュートリアル

Win10 システムでの MySQL 8.0.20 のインストールと設定の超詳細なチュートリアルMy...

Navicat 8でMySQL用のデータベースを作成する方法

ウェブサイトを開発する場合、データを保存するためにデータベースを使用する必要があることがよくあります...

Dockerコンテナ相互接続の予備的な実践についての簡単な説明

1. Dockerコンテナ間の相互接続Docker は現在、軽量の仮想化ソリューションとなっています...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

Keras を使って SQL インジェクション攻撃を判断する (例の説明)

この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...

変数が空かどうかを判定するシェルの方法の概要

シェルで変数が空かどうかを判断する方法シェルプログラミングでは、パラメータのエラーチェック項目に、変...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...

JSはオンラインでのアナウンスのスクロール効果を実現します

この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共...

Windows での MySQL スケジュールバックアップ スクリプトの実装

Windows サーバーでデータベース データを定期的にバックアップする場合は、Windows タス...