htmlのフォーム・フォーム送信操作に関する情報集
ここでは、form要素とフォーム送信について紹介します。
form要素
form 要素の DOM インターフェースは次のとおりです。
HTMLFormElement
を継承しています。
HTMLElement
そのため、他の HTML 要素と同じデフォルトのプロパティを持ちますが、いくつかの独自のプロパティとメソッドを持っています。
入力要素
input要素は非常に広く使われているフォーム要素で、type属性の値によって以下のようにいくつかの一般的な使い方があります。
テキスト入力
提交入
{を入力します。
单选钮输入
入力
{を入力します。
复选框输入
入力
{を入力します。
数字输入
入力
输入框只能输入数字，可设置最大值，最小值。
范围输入
入力
类似数，但它会显示一个滑动条，而不是输入框。
颜色输入
入力
会弹出一个颜色选择器。
日期输入
入力
会弹出一个日期选择器。
電子メール输入
{を入力します。
显示为一个文输入框，并会弹出一个定制键盘。
テル输入
{を入力します。
跟你的电子输入类似。
url输入
{を入力します。
跟你的email输入类似，也会弹出一个定制键。
テキストエリア元素可以创建一个多行的文本区。
其中cols和row的属性值分别表示文本区宽度和高度的字符。
選択元素和option元素结合使用可创建一个下拉菜单。
選択
{オプション
{オプション
{オプション
ラジオ
如何なる分组？设置不同的名属即可。
例：
入力
玩游戏
書き込みコード
{を入力します。
男性
女性
この2組のラジオは
プレースホルダー
入力フィールドに期待される値を記述したヒント（hint）を提供する。
ヒントは、入力フィールドが空のときに表示され、フィールドにフォーカスが当たると消えます。
タイプ=hidden
hidden入力を定義します。hiddenフィールドは、ユーザーには見えません。隠しフィールドには通常デフォルト値が格納され、その値はJavaScriptで変更することができます。
これは、例えば、ユーザーには見えない名前と値の値をバックエンドに送信し、バックエンドがチェックサムを行うことでページの偽造を防ぐなど、セキュリティ上の目的で使用されます。
送信ボタン
フォームに送信ボタンを追加することで、ユーザーがフォームを送信することができます。
以下の3つのボタンは、いずれもクリックされるとフォームのsubmitイベントが発生します。
<input type="submit" />
<button type="submit"></button>
<input type="image" />
規範 button要素のtypeのデフォルト値はsubmitですが、IE678ではデフォルト値がbuttonとなるため、互換性の観点から手動でtype="submit "属性を追加する必要があります。
サブミットイベント
初心者の方は、フォーム送信は、送信ボタンのクリックイベントがトリガーになっていると思われるかもしれませんが、そうではありません。ボタン要素のクリックイベントとフォームのサブミットイベントは、ブラウザによって実行される順番が異なるため、フォームのサブミットイベントを正確に制御するために、フォームのサブミットイベントでバリデーションなどの処理を行うことにしているのです。
form.addEventListener('submit', function (e) {
if (valid()) {
...
}
e.preventDefault()
})
form要素に上記3つのボタンがない場合、ユーザーはフォームを送信できない（エンターキーが効かない）ので、form要素に固有の
submit()
メソッドを使用します。注意すべき点は、submit() メソッドを呼んでも form 要素の submit イベントは発生せず、フォームのバリデーションやその他の操作は
submit()
メソッドを使用します。
if (valid()) {
form.submit()
}
フォーム送信とユーザーエクスペリエンス
現在普及しているajax+クロスドメインPOST（CORS）技術に基づき、form要素を使用せずに直接サーバーにデータを送信することが多いようです。これは有効ですが、ほとんどの場合、エクスペリエンスの劣化があります。
JavaScriptフォームバリデーション
JavaScriptを使用すると、HTMLフォームの入力データをサーバーに送信する前に、この入力データを検証することができます。
JavaScriptで検証される代表的なフォームデータは以下の通りです。
ユーザーがフォームの必須項目を入力したか？
ユーザーが入力した電子メールアドレスは正当なものか？
ユーザーが入力した日付は正当なものですか？
ユーザーが数値フィールドにテキストを入力したか？
必須（またはオプション）項目
以下の関数は、ユーザーがフォームの必須項目（あるいは必須事項）を入力したかどうかを確認するために使用されます。必須項目または必須項目が空の場合、警告ボックスがポップアップ表示され、この関数は false を返します。それ以外の場合、この関数は true を返します (データに問題がないことを意味します)。
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
以下は、HTMLフォームと一緒に書かれたコードです。
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{ email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
メール認証
次の関数は、入力されたデータがメールアドレスの基本構文と一致するかどうかをチェックします。
は、入力データに@記号とドット(.)が含まれていなければならないことを意味します。また、@はメールアドレスの最初の文字であってはならず、@の後には少なくとも1つのドットが付いていなければなりません。
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(". ")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
以下は、HTMLフォームと一緒に完全なコードです。
<html>
<head>
<script type="text/javascript">
function validate_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)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{ email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
ショートカット投稿
フォーム要素のラッパーがない場合、現在のページのフォーカスがフォーム要素にあったとしても、エンターキーを押してもフォーム送信は行われません。ユーザーにとっては、キーボード操作からマウス／ジェスチャー操作に切り替える必要があり、本来の流暢さが損なわれます。最も簡単な解決策は、form 要素を外側のレイヤーで囲み、form 要素の中に少なくとも一つの送信ボタンがあるようにすることです。このとき、フォームの入力フィールドにフォーカスが当たると、ユーザーはエンターキーを押して送信を開始します。
ブラウザがアカウントのパスワードを記憶する
モバイルブラウザを含む先進的なブラウザでは、フォームを送信する際に、フォームの内容を記憶させるかどうかをユーザーに尋ねます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン