HTMLおよびすべてのフォーム要素タグでフォームを使用する方法をご覧ください
フォームは、Webテクノロジーで構築されたページまたはアプリを操作する方法です。
一連のコントロールがあり、「送信」ボタンをクリックするかプログラムでフォームを送信すると、ブラウザはデータをサーバーに送信します。
デフォルトでは、このデータ送信により、データ送信後にページがリロードされますが、JavaScriptを使用すると、この動作を変更できます(この本ではその方法については説明しません)。
フォームは、を使用して作成されますform
鬼ごっこ:
<form>
...
</form>
デフォルトでは、フォームはGETHTTPメソッドを使用して送信されます。これには欠点があり、通常はPOSTを使用します。
を使用して送信時にPOSTを使用するようにフォームを設定できます。method
属性:
<form method="POST">
...
</form>
フォームは、GETまたはPOSTを使用して、フォームが存在するのと同じURLに送信されます。
したがって、フォームがhttps://flaviocopes.com/contacts
ページで「送信」ボタンを押すと、同じURLにリクエストが送信されます。
何も起こらない可能性があります。
リクエストを処理するにはサーバー側で何かが必要であり、通常は専用のURLでこれらのフォーム送信イベントを「リッスン」します。
あなたは経由でURLを指定することができますaction
パラメータ:
<form action="/new-contact" method="POST">
...
</form>
これにより、ブラウザはPOSTを使用してフォームデータをに送信します。/new-contact
同じオリジンのURL。
起点(プロトコル+ドメイン+ポート)がhttps://flaviocopes.com
(ポート80がデフォルトです)、これはフォームデータがに送信されることを意味しますhttps://flaviocopes.com/new-contact
。
私はデータについて話しました。どのデータ?
データは、Webプラットフォームで利用可能な一連のコントロールを介してユーザーによって提供されます。
- 入力ボックス(1行のテキスト)
- テキスト領域(複数行テキスト)
- ボックスを選択します(ドロップダウンメニューから1つのオプションを選択します)
- ラジオボタン(常に表示されるリストから1つのオプションを選択してください)
- チェックボックス(ゼロ、1つ以上のオプションを選択)
- ファイルのアップロード
- もっと!
以下のフォームフィールドの概要で、それぞれを紹介しましょう。
ザ・input
鬼ごっこ
ザ・input
フィールドは、最も広く使用されているフォーム要素の1つです。また、非常に用途の広い要素であり、に基づいて動作を完全に変更できます。type
属性。
デフォルトの動作は、単一行のテキスト入力コントロールです。
<input />
使用と同等:
<input type="text" />
以下の他のすべてのフィールドと同様に、フォームの送信時にコンテンツがサーバーに送信されるように、フィールドに名前を付ける必要があります。
<input type="text" name="username" />
ザ・placeholder
属性は、フィールドが空のときにテキストを薄い灰色で表示するために使用されます。入力内容のヒントをユーザーに追加するのに便利です。
<input type="text" name="username" placeholder="Your username" />
Eメール
使用するtype="email"
送信する前に、クライアント側(ブラウザ内)の電子メールの正当性(セマンティックの正当性、電子メールアドレスが存在することを確認しない)を検証します。
<input type="email" name="email" placeholder="Your email" />
パスワード
使用するtype="password"
入力されたすべてのキーがアスタリスク(*)またはドットとして表示され、パスワードをホストするフィールドに役立ちます。
<input type="password" name="password" placeholder="Your password" />
数字
入力要素に数値のみを受け入れるようにすることができます。
<input type="number" name="age" placeholder="Your age" />
受け入れられる最小値と最大値を指定できます。
<input type="number" name="age" placeholder="Your age" min="18" max="110" />
ザ・step
属性は、異なる値の間のステップを識別するのに役立ちます。たとえば、これは5のステップで10から50までの値を受け入れます。
<input type="number" name="a-number" min="10" max="50" step="5" />
隠しフィールド
フィールドはユーザーから隠すことができます。フォームの送信時に引き続きサーバーに送信されます。
<input type="hidden" name="some-hidden-field" value="some-value" />
これは通常、セキュリティやユーザーの識別に使用されるCSRFトークンなどの値を保存するために使用されます。また、特別な手法を使用してスパムを送信するロボットを検出するためにも使用されます。
また、フォームとそのアクションを識別するために使用することもできます。
デフォルト値の設定
これらのフィールドはすべて、事前定義された値を受け入れます。ユーザーが変更しない場合、これはサーバーに送信される値になります。
<input type="number" name="age" value="18" />
プレースホルダーを設定した場合、ユーザーが入力フィールドの値をクリアすると、その値が表示されます。
<input type="number" name="age" placeholder="Your age" value="18" />
フォーム送信
ザ・type="submit"
フィールドは、ユーザーが押すとフォームを送信するボタンです。
<input type="submit">
ザ・value
属性はボタンのテキストを設定します。これがない場合は「送信」テキストが表示されます。
<input type="submit" value="Click me">
フォームの検証
ブラウザは、フォームにクライアント側の検証機能を提供します。
必要に応じてフィールドを設定し、それらが入力されていることを確認し、各フィールドの入力に特定の形式を適用できます。
両方のオプションを見てみましょう。
必要に応じてフィールドを設定します
ザ・required
属性は検証に役立ちます。フィールドが設定されていない場合、クライアント側の検証は失敗し、ブラウザはフォームを送信しません。
<input type="text" name="username" required />
特定の形式を適用する
私は説明しましたtype="email"
上記のフィールド。仕様で設定された形式に従って、電子メールアドレスを自動的に検証します。
の中にtype="number"
フィールド、私は言及しましたmin
そしてmax
入力された値を間隔に制限する属性。
あなたはもっとできる。
任意のフィールドに特定の形式を適用できます。
ザ・pattern
属性を使用すると、値を検証するための正規表現を設定できます。
正規表現ガイドを読むことをお勧めします。flaviocopes.com/javascript-regular-expressions/。
pattern =“ https://.*”
<input type="text" name="username" pattern="[a-zA-Z]{8}" />
その他のフィールド
ファイルのアップロード
ローカルコンピュータからファイルをロードし、を使用してサーバーに送信できます。type="file"
入力要素:
<input type="file" name="secret-documents">
複数のファイルを添付できます。
<input type="file" name="secret-documents" multiple>
を使用して許可される1つ以上のファイルタイプを指定できますaccept
属性。これは画像を受け入れます:
<input type="file" name="secret-documents" accept="image/*">
次のような特定のMIMEタイプを使用できますapplication/json
または次のようなファイル拡張子を設定します.pdf
。または、次のように複数のファイル拡張子を設定します。
<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">
ボタン
ザ・type="button"
入力フィールドを使用して、送信ボタンではないボタンをフォームに追加できます。
<input type="button" value="Click me">
これらは、JavaScriptを使用してプログラムで何かを行うために使用されます。
ボタンとしてレンダリングされた特別なフィールドがあります。その特別なアクションは、フォーム全体をクリアし、フィールドの状態を最初の状態に戻すことです。
<input type="reset">
ラジオボタン
ラジオボタンは、選択肢のセットを作成するために使用され、そのうちの1つが押され、他のすべてが無効になります。
名前は、この種のインターフェースを備えた古いカーラジオに由来しています。
のセットを定義しますtype="radio"
入力、すべて同じname
属性、および異なるvalue
属性:
<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
フォームが送信されると、color
データプロパティには単一の値があります。
チェックされる要素は常に1つです。最初の項目は、デフォルトでチェックされている項目です。
を使用して事前に選択された値を設定できますchecked
属性。無線入力グループごとに1回だけ使用できます。
チェックボックス
ラジオボックスに似ていますが、複数の値を選択できるか、まったく選択できません。
のセットを定義しますtype="checkbox"
入力、すべて同じname
属性、および異なるvalue
属性:
<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">
これらのチェックボックスはすべて、デフォルトでオフになっています。使用checked
ページの読み込み時にそれらを有効にする属性。
この入力フィールドでは複数の値を使用できるため、フォームの送信時に値が配列としてサーバーに送信されます。
日時
日付値を受け入れるための入力タイプがいくつかあります。
ザ・type="date"
入力フィールドでは、ユーザーが日付を入力でき、必要に応じて日付ピッカーが表示されます。
<input type="date" name="birthday">
ザ・type="time"
入力フィールドでは、ユーザーが時間を入力でき、必要に応じてタイムピッカーが表示されます。
<input type="time" name="time-to-pickup">
ザ・type="month"
入力フィールドでは、ユーザーは月と年を入力できます。
<input type="month" name="choose-release-month">
ザ・type="week"
入力フィールドでは、ユーザーは週と年を入力できます。
<input type="week" name="choose-week">
これらのフィールドはすべて、各値の間の範囲とステップを制限することができます。使用法の詳細については、MDNを確認することをお勧めします。
ザ・type="datetime-local"
フィールドでは、日付と時刻を選択できます。
<input type="datetime-local" name="date-and-time">
これらすべてをテストするページは次のとおりです。https://codepen.io/flaviocopes/pen/ZdWQPm
カラーピッカー
ユーザーがを使用して色を選択できるようにすることができますtype="color"
素子:
<input type="color" name="car-color">
を使用してデフォルト値を設定しますvalue
属性:
<input type="color" name="car-color" value="#000000">
ブラウザは、ユーザーにカラーピッカーを表示します。
範囲
この入力要素は、スライダー要素を示しています。人々はそれを使用して、開始値から終了値に移動できます。
<input type="range" name="age" min="0" max="100" value="30">
オプションのステップを提供できます。
<input type="range" name="age" min="0" max="100" value="30" step="10">
電話
ザ・type="tel"
入力フィールドは、電話番号を入力するために使用されます。
<input type="tel" name="telephone-number">
使用の主なセールスポイントtel
以上text
はモバイル上にあり、デバイスは数字キーボードの表示を選択できます。
指定しますpattern
追加の検証用の属性:
<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">
URL
ザ・type="url"
フィールドはURLを入力するために使用されます。
<input type="url" name="website">
を使用して検証できますpattern
属性:
<input type="url" name="website" pattern="https://.*">
ザ・textarea
鬼ごっこ
ザ・textarea
要素を使用すると、ユーザーは複数行のテキストを入力できます。に比べinput
、終了タグが必要です:
<textarea></textarea>
CSSを使用して寸法を設定できますが、rows
そしてcols
属性:
<textarea rows="20" cols="10"></textarea>
他のフォームタグと同様に、name
属性は、サーバーに送信されるデータの名前を決定します。
<textarea name="article"></textarea>
ザ・select
鬼ごっこ
このタグは、ドロップダウンメニューを作成するために使用されます。
ユーザーは、使用可能なオプションの1つを選択できます。
各オプションは、option
鬼ごっこ。選択に名前を追加し、各オプションに値を追加します。
<select name="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
オプションを無効に設定できます。
<select name="color">
<option value="red" disabled>Red</option>
<option value="yellow">Yellow</option>
</select>
空のオプションを1つ持つことができます。
<select name="color">
<option value="">None</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
オプションは、を使用してグループ化できます。optgroup
鬼ごっこ。各オプショングループにはlabel
属性:
<select name="color">
<optgroup label="Primary">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Others">
<option value="green">Green</option>
<option value="pink">Pink</option>
</optgroup>
</select>
私の無料ダウンロードHTMLハンドブック
その他のhtmlチュートリアル:
- HTMLの紹介
- HTMLの `iframe`タグ
- HTMLフォーム
- HTMLの `video`タグ
- HTMLの `audio`タグ
- テキストのHTMLタグ
- HTMLテーブル
- HTMLの `img`タグ
- HTMLの `a`タグ
- HTMLの `picture`タグ
- HTMLの `figure`タグ
- HTMLコンテナタグ
- Web上のアクセシビリティ
- HTMLでコメントを作成する方法
- ダークモードでHTML画像のURLを変更する方法
- `srcset`を使用したレスポンシブ画像
- ダークモードでファビコンを変更する