HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。

フォーム要素

フォーム要素の DOM インターフェイスはHTMLElementから継承されたHTMLFormElementです。したがって、他の HTML 要素と同じデフォルトのプロパティを持ちますが、独自のプロパティとメソッドもいくつかあります。

プロパティ値	例示する
受け入れる文字セット	サーバーが処理できる文字セット。複数の文字セットはスペースで区切られます。
アクション	要求された URL を受け入れます。この値は、フォーム要素内の input 要素または button 要素の formaction 属性によって上書きできます。
要素	フォーム内のすべてのコントロールのコレクション (HTMLCollection)
暗号化タイプ	リクエストのエンコードタイプ。この値は、フォーム要素内の input 要素または button 要素の formenctype 属性によって上書きできます。
長さ	フォーム内のコントロールの数
方法	送信する HTTP リクエストのタイプ。通常は「get」または「post」です。この値は、フォーム要素内の input 要素または button 要素の formmethod 属性によって上書きできます。
名前	フォーム名
リセット()	すべてのフォームフィールドをデフォルト値にリセットする
提出する（）	フォームを送信する
ターゲット	リクエストを送信し、応答を受信するために使用されるウィンドウの名前。この値は、フォーム要素内の input 要素または button 要素の formtarget 属性によって上書きできます。
オートコンプリート	フォーム要素を自動的に入力するかどうか

入力要素

input 要素は、広く使用されているフォーム要素です。type 属性の値に応じて、次のような一般的な用途があります。

テキスト入力 <input type="text" name="">
入力を送信 <input type="submit">
ラジオボタン入力 <input type="radio" name="同じ名前である必要があります" value="値は一致している必要があります">
チェックボックス入力 <input type="checkbox" name="同じ名前" value="異なる対応する値">
数値入力 <input type="number" min="" max=""> 入力ボックスには数字のみ入力でき、最大値と最小値を設定できます。
範囲入力 <input type="range" min="" max=""> は数値に似ていますが、入力ボックスの代わりにスライダーが表示されます。
色入力 <input type="color"> により、カラーピッカーがポップアップ表示されます。
日付入力 <input type="date"> により日付ピッカーがポップアップ表示されます。
電子メール入力 <input type="email"> がテキスト入力ボックスとして表示され、カスタムキーボードがポップアップ表示されます。
電話番号入力 <input type="tel"> は電子メール入力に似ています
URL 入力 <input type="url"> は電子メール入力に似ており、カスタムキーボードがポップアップ表示されます。
textarea 要素は複数行のテキスト領域を作成します。
<テキストエリア名="" id="" 列数="30" 行数="10"></テキストエリア>
cols と rows の属性値は、それぞれテキスト領域の幅と高さの文字を表します。
select 要素は、option 要素と組み合わせて使用され、ドロップダウンメニューを作成します。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>

無線

グループ化するには？異なる名前属性を設定するだけです

例：

<input type="radio" name="favourite" value="ゲームをプレイ">ゲームをプレイ
<input type="radio" name="favourite" value="write code">コードを書く

<input type="radio" name="sex" value="man">男性
<input type="radio" name="sex" value="woman">女性、
これらは2台のラジオです

プレースホルダー

入力フィールドの予想される値を説明するヒントを提供します。
ヒントは入力フィールドが空のときに表示され、フィールドにフォーカスが当たると消えます。

タイプ=非表示

隠し入力を定義します。非表示フィールドはユーザーには表示されません。隠しフィールドには通常、デフォルト値が格納されますが、その値は JavaScript によって変更することもできます。
たとえば、セキュリティ上の理由から、ユーザーには見えない名前と値の値がバックグラウンドに送信され、バックグラウンドで検証が行われ、偽造ページが防止されます。

送信ボタン

フォームに送信ボタンを追加すると、ユーザーはフォームを送信できるようになります。

次の 3 つのボタンは、クリックするとフォームの送信イベントをトリガーできます。

<input type="submit" />
<button type="送信"></button>
<入力タイプ="画像" />

仕様上のボタン要素のタイプのデフォルト値は submit ですが、IE678 のデフォルト値は button であるため、互換性のために、button 要素に type="submit" 属性を手動で追加する必要があります。

イベントを送信

初心者は、フォームの送信は送信ボタンのクリックイベントによってトリガーされると考えるかもしれません。実際には、ボタン要素のクリックイベントとフォームの送信イベントは、ブラウザによって異なる順序で実行されます。したがって、フォームの送信イベントを正確に制御するには、フォームの送信イベントで検証などの操作を実行することを選択します。

form.addEventListener('submit', 関数(e) {
  （有効な（））の場合{
    ...
  } 
  e.preventDefault()
})

フォーム要素に上記 3 つのボタンがいずれも存在しない場合、ユーザーはフォームを送信できません (Enter キーも無効)。このとき、フォーム要素固有のsubmit()メソッドを使用してフォームを送信できます。submit() メソッドを呼び出しても、フォーム要素の submit イベントはトリガーされないことに注意してください。submit submit()メソッドを呼び出す前に、フォームの検証やその他の操作を実行する必要があります。

（有効な（））の場合{
  フォームを送信します。
}

フォームの送信とユーザーエクスペリエンス

一般的な ajax+cross-domain POST (CORS) テクノロジーに基づいて、フォーム要素を使用してデータを直接サーバーに送信できない場合があります。これは実行可能ですが、ほとんどの場合、エクスペリエンスが低下します。

JavaScript フォーム検証

JavaScript を使用すると、HTML フォームの入力データをサーバーに送信する前に検証できます。

JavaScript によって検証される一般的なフォームデータは次のとおりです。

ユーザーはフォームの必須フィールドに入力しましたか?
ユーザーが入力したメールアドレスは合法ですか?
ユーザーは有効な日付を入力しましたか?
ユーザーは数値フィールドにテキストを入力しましたか?
必須（またはオプション）項目

次の関数は、ユーザーがフォーム内の必須項目を入力したかどうかを確認するために使用されます。必須フィールドまたは必須フィールドが空の場合、警告ボックスがポップアップ表示され、関数の戻り値は false になります。それ以外の場合、関数の戻り値は true (データに問題がないことを意味します) になります。

関数validate_required(フィールド、アラートテキスト)
{
（フィールド）
{
if (値==null||値=="")
  {アラート(アラートtxt); falseを返す}
そうでない場合は{trueを返す}
}
}

以下に HTML フォームとコードを示します。

<html>
<ヘッド>
<script type="text/javascript">

関数validate_required(フィールド、アラートテキスト)
{
（フィールド）
  {
  if (値==null||値=="")
    {アラート(アラートtxt); falseを返す}
  そうでない場合は{trueを返す}
  }
}

関数validate_form(thisform)
{
(thisform) で
  {
  if (validate_required(email,"メールアドレスを入力する必要があります!")==false)
    {email.focus(); false を返す}
  }
}
</スクリプト>
</head>

<本文>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
メールアドレス: <input type="text" name="email" size="30">
<input type="submit" value="送信"> 
</フォーム>
</本文>

</html>

メール認証

次の関数は、入力データが電子メールアドレスの基本構文に準拠しているかどうかを確認します。

つまり、入力データには @ 記号とピリオド (.) が含まれている必要があります。また、@ は電子メールアドレスの最初の文字には使用できず、@ の後には少なくとも 1 つのピリオドが必要です。

関数validate_email(フィールド、アラートテキスト)
{
（フィールド）
{
apos=値.indexOf("@")
dotpos=値.lastIndexOf(".")
(apos<1||dotpos-apos<2) の場合 
  {アラート(アラートtxt); falseを返す}
そうでない場合は{trueを返す}
}
}

完全なコードと HTML フォームは次のとおりです。

<html>
<ヘッド>
<script type="text/javascript">
関数validate_email(フィールド、アラートテキスト)
{
（フィールド）
{
apos=値.indexOf("@")
dotpos=値.lastIndexOf(".")
(apos<1||dotpos-apos<2) の場合 
  {アラート(アラートtxt); falseを返す}
そうでない場合は{trueを返す}
}
}

関数validate_form(thisform)
{
(thisform) で
{
if (validate_email(email,"有効なメールアドレスではありません!")==false)
  {email.focus(); false を返す}
}
}
</スクリプト>
</head>

<本文>
<form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
メールアドレス: <input type="text" name="email" size="30">
<input type="submit" value="送信"> 
</フォーム>
</本文>

</html>

ショートカットキーの送信

フォーム要素ラッパーがない場合、現在のページのフォーカスがフォーム要素にある場合でも、Enter キーを押してもフォームの送信はトリガーされません。ユーザーはキーボード制御からマウス/ジェスチャ制御に切り替える必要があり、元のスムーズさが損なわれます。最も簡単な解決策は、外側のレイヤーでフォーム要素を使用してラップし、フォーム要素に少なくとも 1 つの送信ボタンがあることを確認することです。このとき、フォームの入力フィールドにフォーカスが当たった状態で、ユーザーは Enter キーを押して送信をトリガーします。

ブラウザはアカウントのパスワードを記憶します

フォームを送信すると、モバイルブラウザを含む高度なブラウザは、ユーザーにユーザーアカウントとパスワードを記憶する必要があるかどうかを尋ねます。一般ユーザーにとって、これは特にモバイルデバイスで非常に便利な機能であり、ユーザーの時間を大幅に節約できます。フォーム要素がない場合、ブラウザはクエリウィンドウをポップアップ表示しません。

要約する

フォームアプリケーションを開発する場合、フォーム要素を削除して直接送信しないでください。フォーム要素には送信ボタンを含める必要があります。ボタン要素の場合は、type="submit" 属性を手動で追加する必要があります。送信イベントは、送信ボタンのクリックイベントではなく、フォーム要素の送信イベントで処理されます。

参照:

フォーム要素とフォーム送信

<<: インタラクションデザインと心理学の驚くべきつながり18選

>>: NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。