ここでは、フォーム要素の知識を紹介し、フォームの提出を紹介します。
フォーム要素フォーム要素のDOMインターフェイスはHTMLFormElementであり、 HTMLElementから継承するため、他のHTML要素と同じデフォルト属性を備えていますが、いくつかの一意の属性と方法があります。それ自体：
| 属性値 | 説明します |
|---|---|
| Accept-charset | サーバーが処理できる文字セット、複数の文字セットはスペースで分割されます |
| アクション | リクエストを受け入れるURL、この値は、フォーム要素の入力要素またはボタン要素の形式プロパティでカバーできます |
| 要素 | フォーム内のすべてのコントロールセット（htmlcollection） |
| enctype | 要求されたコーディングタイプ、この値は、フォーム要素の入力要素またはボタン要素のFOMENCTYPEプロパティでカバーできます |
| 長さ | フォームのコントロールの数 |
| 方法 | 送信されるHTTPリクエストタイプは、通常、フォーム要素の入力要素またはボタン要素のformmethod属性でcaptedを取得または投稿できます。 |
| 名前 | フォームの名前 |
| reset（） | すべてのフォームドメインをデフォルト値にリセットします |
| 提出する （） | フォームを送信します |
| ターゲット | リクエストを送信して応答を受信するためのウィンドウ名、この値は、フォーム要素の入力要素のformTargetプロパティでカバーできます |
| オートコンプリート | テーブル要素を自動的に構成するかどうか |
入力要素は、非常に広く使用されているフォーム要素です。
テキスト入力<入力タイプ=テキスト名=>
入力を送信<入力タイプ=送信>
シングルボタン入力<入力タイプ=ラジオ名=同じ名前値=充填の値は対応するのが最適です>
<入力タイプ=チェックボックス名=同じ名前値=異なる対応値>
デジタル入力<入力タイプ=数min = max =>入力ボックスは数値のみを入力でき、最大値と最小値を設定できます。
範囲入力<入力タイプ= range min = max =>数値に似ていますが、入力ボックスの代わりにスライドバーが表示されます。
カラー入力<入力タイプ= color>は、色セレクターがポップアップします。
日付入力<入力型=日付>は、日付セレクターをポップアップします。
電子メール入力<入力タイプ=電子メール>はテキスト入力ボックスとして表示され、カスタムキーボードがポップアップされます。
tel入力<入力タイプ= tel>電子メール入力と同様
URL入力<入力型= url>電子メール入力と同様に、カスタマイズされたキーボードもポップアップします。
Textarea要素は、マルチラインテキスト領域を作成できます。
<textarea name = id = color = 30 rows = 10> </textarea>
COLSと行の属性値は、テキスト領域の幅と高さを表します。
選択した要素とオプション要素を使用して、ドロップダウンメニューを作成できます。
<名前= id => <option値=> </option> <option値=> </option> <option値=> </oplct>
無線別の名前のプロパティをグループ化する方法
例：
<入力タイプ=ラジオ名=お気に入りの値=プレイゲーム>プレイゲーム
<入力タイプ=ラジオ名=お気に入りの値= writing code> write code
<入力タイプ=ラジオ名=性=男>男性
<入力タイプ=ラジオname =性=女性>女性、女性、
これはラジオの2つのグループです
プレースホルダー入力フィールドの期待値を記述できる迅速な情報（ヒント）を提供します。
入力フィールドが空のときにプロンプトが表示され、フィールドが焦点を合わせると消えます。
type = hidden非表示の入力を定義します。隠されたフィールドはユーザーには見えません。 Hidden Fieldsは通常、デフォルト値を保存し、その値はJavaScriptによって変更することもできます。
たとえば、セキュリティの場合、背景のユーザーには表示されない名前と値の値を使用して、背景をチェックして、偽造ページを確認および防止できます。
[提出]ボタンフォームに送信ボタンを追加して、ユーザーがフォームを送信できるようにします。
次の3つのボタンは、クリック時にフォームの送信イベントをトリガーできます。
<入力タイプ=送信 /> <ボタンタイプ=送信> < /button> <入力タイプ=画像 />
仕様のボタン要素のタイプデフォルト値は送信されますが、瞑想値はIE678の下でボタンです。したがって、Type = Propertyを互換性からボタン要素に手動で追加する必要があります。
イベントを送信します最初の人は、フォームの送信ボタンのクリックイベントによってトリガーされると考えるかもしれません。
form.addeventlistener（ 'submit'、function（e）{if（valid（））{...} e.preventdefault（）}）フォーム要素に上記の3つのボタンがない場合、ユーザーはフォームを送信できません（Enterキーも無効ですsubmit() 。 submit()
if（value（））{form.submit（）}フォームの提出とユーザーエクスペリエンス現在の人気のあるAjax+Cross -Domain Post（CORS）テクノロジーに基づいて、フォーム要素を使用してサーバーに直接データを送信しない可能性があります。これは実行可能ですが、ほとんどの場合、劣化の現象があります。
JavaScriptフォーム検証JavaScriptを使用して、データがサーバーに送信される前に、HTMLフォームのこれらの入力データを検証できます。
JavaScriptによって検証されたこれらの典型的なフォームデータは次のとおりです。
ユーザーは、必要なアイテムをフォームのアイテムに記入しましたか？
ユーザーが入力したメールアドレスは合法ですか？
ユーザーは法的日付を入力しましたか？
ユーザーは数値フィールドにテキストを入力しますか？
プロジェクトを埋める（または選択する必要があります）次の機能を使用して、ユーザーがフォームの必要な（または必要な）アイテムに記入したかどうかを確認します。入力するかオプションが空になっている必要がある場合、警告ボックスがポップアップし、関数の返品値が誤ります。そうしないと、関数の返品値が真です（データが問題ではないことを意味します）：
function value_required（field）{field）{value == null || value ==）{alerttxt）;以下は、HTMLフォームのコードです。
<html> <head> <スクリプトタイプ= text/javascript> function value_required（field、alerttxt）{if（value = null || value ==）{alert（alert lerttxt）; {return true}} function value_form（this）{with（this）{if（value_required（email、emailが記入する必要があります！）{email.foc us（）; return false}}} < /script> < /head> <body> <form action = submitpage.htm onsubmit = return validate_form（this）method = email> email：<入力タイプ=テキスト名= 30> <入力タイプ= submit = submit> </form> </body> < /html>電子メール検証次の関数は、入力データが電子メールアドレスの基本的な構文に適合するかどうかを確認します。
これは、入力データに@シンボルとドット番号（。）を含める必要があることを意味します。同時に、@@はメールアドレスの最初の文字ではなく、@同时の後に少なくとも1つのポイント番号：
function value_email（field）{apos = value.indexof（@）dotpos = lastindexof（。）if（apos <1 || dotpos-apos <2）lert（alerttxt）; else {return true}}}以下は、HTMLフォームの完全なコードです。
<html> <head> <script type = text/javascript> function value_email（field、alerttxt）{with（field）{apos = value.indexof（@）dotpos = value .lastindexof（。）if（apos <1 || dotpos-apos <2）{alert（alerttxt）; return false} else {return true}} function validate_form（thisform）{if（validate_ema）il（email、not o balid e-mail address！）= = false）{email.focus（）; return false} </script> </head> <form action.htmonsubmit = return validate_form（this）;テキスト名=電子メールサイズ= 30> <入力タイプ=送信値=送信> </form> </body> </html>ショートカットキーの提出フォーム要素パッケージがない場合、現在のページの焦点がフォーム要素にある場合でも、Enterキーを押すと、フォームのフォームがトリガーされません。 、元のオリジナルの流れを破壊します。最も簡単な解決策は、外側の層のフォーム要素でそれを包み、フォーム要素に少なくとも送信ボタンがあることを判断することです。この時点で、フォームの入力ドメインが焦点を合わせた場合、ユーザーはEnterキーを押して提出物をトリガーします。
ブラウザアカウントのパスワードを覚えておいてくださいフォームを送信すると、モバイルブラウザを含む高レベルのブラウザは、ユーザーのパスワードを覚えておく必要があるかどうかを尋ねます。フォーム要素がない場合、ブラウザはお問い合わせウィンドウをポップアップしません。
要約しますフォームアプリケーションを開発する場合、フォーム要素を直接送信しようとする必要があります。送信ボタンのクリックイベントではなく、フォーム要素の送信イベントでインシデント処理を送信しました。
参照：
フォーム要素とフォームの提出