HTMLフォーム

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チュートリアル: