Linux Professional Institute Learning Logo.
main contentにスキップ
  • ホーム
    • 全てのリソース
    • LPI学習教材
    • コントリビューターになる
    • Publishing Partners
    • Publishing Partnerになる
    • About
    • FAQ
    • コントリビューター
    • Roadmap
    • 連絡先
  • LPI.org
032.4 レッスン 1
課題 031: ソフトウェア開発とWebテクノロジー
031.1 ソフトウェア開発の基本
  • 031.1 レッスン 1
031.2 Webアプリケーションのアーキテクチャ
  • 031.2 レッスン 1
031.3 HTTP の基礎
  • 031.3 レッスン 1
課題 032: HTMLドキュメントマークアップ
032.1 HTMLドキュメントの構造
  • 032.1 レッスン 1
032.2 HTMLのセマンティックスとドキュメント階層
  • 032.2 レッスン 1
032.3 HTMLにおける参照と埋め込みリソース
  • 032.3 レッスン 1
032.4 HTMLフォーム
  • 032.4 レッスン 1
課題 033: CSSコンテンツ スタイリング
033.1 CSSの基本
  • 033.1 レッスン 1
033.2 CSSセレクターとスタイルアプリケーション
  • 033.2 レッスン 1
033.3 CSSスタイリング
  • 033.3 レッスン 1
033.4 CSSボックスモデルとレイアウト
  • 033.4 レッスン 1
課題 034: JavaScriptプログラミング
034.1 JavaScriptの実行と構文
  • 034.1 レッスン 1
034.2 JavaScriptデータ構造
  • 034.2 レッスン 1
034.3 JavaScriptの制御構造と関数
  • 034.3 レッスン 1
  • 034.3 レッスン 2
034.4 WebサイトのコンテンツとスタイリングのJavaScript操作
  • 034.4 レッスン 1
課題 035: NodeJSサーバープログラミング
035.1 NodeJSの基本
  • 035.1 レッスン 1
035.2 NodeJS Expressの基本
  • 035.2 レッスン 1
  • 035.2 レッスン 2
035.3 SQLの基本
  • 035.3 レッスン 1
How to get certified
  1. 課題 032: HTMLドキュメントマークアップ
  2. 032.4 HTMLフォーム
  3. 032.4 レッスン 1

032.4 レッスン 1

Certificate:

Web開発の要点

Version:

1.0

Topic:

032 HTMLドキュメントマークアップ

Objective:

032.4 HTMLフォーム

Lesson:

1 of 1

はじめに

Webフォームは、HTMLページから訪問者の情報を要求するためのシンプルで効率的な方法を提供します。フロントエンドの開発者は、テキストフィールド、チェックボックス、ボタンなどの様々なコンポーネントを使用して、構造化された方法でサーバにデータを送信するインターフェースを構築することができます。

シンプルなHTMLフォーム

フォーム特有のマークアップコードの説明に入る前に、まず、ボディコンテンツのないシンプルな空のHTML文書から始めましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Working with HTML Forms</title>
</head>
<body>

<!-- The body content goes here -->

</body>
</html>

コードサンプルを、拡張子が .html の生のテキストファイル( form.html のように)として保存し、お好みのブラウザで開いてください。変更後、ブラウザのリロードボタンを押すと、変更内容が表示されます。

基本的なフォームの構造は、 <form> タグ自体とその内部要素によって与えられます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Working with HTML Forms</title>
</head>
<body>

<!-- Form to collect personal information -->

<form>

<h2>Personal Information</h2>

<p>Full name:</p>
<p><input type="text" name="fullname" id="fullname"></p>

<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>

</form>

</body>
</html>

type のような一語の属性では二重引用符は必要ありませんので、 type=text は type="text" と同様に動作します。開発者はどちらの規約を使用するかを選択することができます。

新しいコンテンツを保存し、ブラウザでページを再読み込みします。 Figure 1 のような結果が表示されるはずです。

fig01
Figure 1. 非常に基本的なフォーム

<form> タグは、それ自体ではページ上に何の目立った結果ももたらしません。 <form>…​</form> タグの中の要素は、訪問者に表示されるフィールドやその他の視覚的な補助を定義します。

サンプルコードには、一般的なHTMLタグ( <h2> と <p> )と、フォーム固有のタグである <input> タグが含まれています。一般的なタグはドキュメントのどこにでも現れることができますが、フォーム固有のタグは <form> 要素の中でのみ、つまり、開始の <form> と終了の </form> タグの間でのみ使用する必要があります。

Note

HTMLには、フォームの標準的な外観を変更するための基本的なタグやプロパティしかありません。CSSは、フォームの外観を変更するための精巧なメカニズムを提供します。したがって、推奨されるのは、フォームの機能面のみを扱うHTMLコードを記述し、CSSで外観を変更することです。

例で示すように、パラグラフタグの <p> を使って訪問者にフィールドを説明することができます。しかし、ブラウザが <p> タグ内の説明を対応するinput要素と関連付けることができる明白な方法はありません。このような場合には、 <label> タグがより適切です(以降、すべてのコードサンプルは、HTMLドキュメントのボディ内にあると考えてください)。

<form>

<h2>Personal Information</h2>

<label for="fullname">Full name:</label>
<p><input type="text" name="fullname" id="fullname"></p>

<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>

</form>

<label> タグの for 属性には、対応するinput 要素の id 属性が含まれています。これにより、input要素にフォーカスが当たっているときに、スクリーンリーダーがlabel要素の内容を話すことができるようになり、ページのアクセス性が向上します。さらに、訪問者はラベルをクリックして、対応する入力フィールドにフォーカスを置くことができます。

id 属性は、ドキュメント内の他の要素と同様に、 '<form>' 要素に対しても機能します。これは、ドキュメント全体の中でユニークな要素の識別子を提供します。 name 属性は同様の目的を持っていますが、フォームのコンテキストの中でinput要素を識別するために使用されます。ブラウザは、フォームデータをサーバに送信する際に name 属性を使用して入力フィールドを識別するので、フォーム内では意味のあるユニークな name 属性を使用することが重要です。

type 属性はinput要素の主要な属性であり、要素が受け付けるデータタイプと訪問者への視覚的な表示を制御するからです。 type 属性が指定されていない場合、デフォルトでは '<input>' タグはテキストボックスを表示します。モダンブラウザでサポートされている入力タイプは以下の通りです。

Table 1. フォーム入力タイプ
タイプ属性 データ型 表示方法

hidden

任意の文字列

N/A

text

改行のないテキスト

テキストコントロール

search

改行のないテキスト

検索コントロール

tel

改行のないテキスト

テキストコントロール

url

絶対URL

テキストコントロール

email

メールアドレスまたはメールアドレスのリスト

テキストコントロール

password

改行のないテキスト(機密情報)

データ入力を隠すテキストコントロール

date

タイムゾーンのない日付(年、月、日)

日付コントロール

month

タイムゾーンのない年と月で構成される日付

月コントロール

week

週年番号と週番号で構成されるタイムゾーンのない日付

週のコントロール

time

タイムゾーンのない時間(時、分、秒、小数点以下の秒数)

時間コントロール

datetime-local

タイムゾーンのない日付と時刻(年、月、日、時、分、秒、小数点以下の秒数)

日付と時刻のコントロール

number

数値

テキストコントロールまたはスピナーコントロール

range

正確な値は重要ではないという追加のセマンティクスを持つ数値

スライダーコントロールなど

color

8ビットの赤、緑、青のコンポーネントを備えたsRGBカラー

カラーピッカー

checkbox

事前定義されたリストからの0個以上の値のセット

チェックボックス(選択肢を提供し、複数の選択肢を選択できるようにします)

radio

列挙値

ラジオボタン(選択肢を提供し、1つの選択肢のみを選択できます)

file

それぞれMIMEタイプとオプションのファイル名を持つ0個以上のファイル

ラベルとボタン

submit

入力プロセスを終了し、フォームを送信する列挙値

ボタン

image

特定の画像のサイズに関連する座標。これにより、入力プロセスが終了し、フォームが送信されます。

クリック可能な画像またはボタンのいずれか

button

N/A

一般的なボタン

reset

N/A

他のすべてのフィールドを初期値にリセットする機能を持つボタン

password 、 search 、 tel 、 url 、 email の各入力タイプの外観は、標準の text タイプと変わりません。これらの入力タイプの目的は、その入力フィールドに意図されたコンテンツについてのヒントをブラウザに提供することであり、ブラウザやクライアント側で実行されるスクリプトは、特定の入力タイプに対してカスタムアクションを取ることができます。例えば、テキスト入力タイプとパスワードフィールドタイプの唯一の違いは、訪問者が入力する際にパスワードフィールドの内容が表示されないことです。タッチスクリーンデバイスでは、テキストがスクリーンキーボードで入力されるので、 tel タイプの入力がフォーカスされると、ブラウザは数字キーボードだけをポップアップすることができます。もう一つの可能なアクションは、 email タイプの入力にフォーカスが当たったときに、既知のメールアドレスのリストを提案することです。

number タイプは、シンプルなテキスト入力として表示されますが、横に増減の矢印が付いています。このタイプを使用すると、タッチスクリーンデバイスでフォーカスが当たったときに、数値キーボードが表示されます。

その他のinput要素は、それぞれ独自の外観と動作を持っています。例えば、 date タイプは、ローカルの日付フォーマットの設定に従ってレンダリングされ、フィールドにフォーカスが当たるとカレンダーが表示されます。

<form>

<p>
  <label for="date">Date:</label>
  <input type="date" name="date" id="date">
</p>

</form>

Figure 2 は、現在のデスクトップ版Firefoxがこのフィールドをどのように表示しているかを示しています。

fig02
Figure 2. dateタイプ属性
Note

これらの要素は、ブラウザやOSによって表示が多少異なることがありますが、その機能や使い方は常に同じです。

これは、すべてのモダンブラウザの標準機能であり、余分なオプションやプログラミングを必要としません。

入力タイプにかかわらず、入力フィールドの内容はその value と呼ばれます。すべてのフィールドの値はデフォルトでは空ですが、 value 属性を使ってフィールドのデフォルト値を設定することができます。日付型の値は YYYY-MM-DD の形式を使わなければなりません。次の日付フィールドのデフォルト値は、2020年8月6日です。

<form>

<p>
  <label for="date">Date:</label>
  <input type="date" name="date" id="date" value="2020-08-06">
</p>

</form>

特定の入力タイプは、訪問者がフィールドに入力する際の手助けとなりますが、訪問者が制限を回避して任意のフィールドに任意の値を入力することを防ぐことはできません。そのため、フィールドの値がサーバに到着したときに検証されることが重要です。

訪問者が値を入力しなければならない<form>要素には、入力を助ける特別な属性がある場合があります。 placeholder 属性は、input要素の中に例となる値を挿入します。

<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41 John St., Upper Suite 1"></p>

Figure 3 のように、input要素の中にプレースホルダーが表示されます。

fig03
Figure 3. プレースホルダー属性の例

訪問者がフィールドへの入力を開始すると、プレースホルダーテキストは消えます。訪問者がフィールドを空にした場合、プレースホルダーテキストはフィールド値として送信されません。

required 属性は、訪問者がフォームを送信する前に、対応するフィールドに値を入力することを要求します。

<p>Address: <input type="text" name="address" id="address" required placeholder="e.g. 41 John St., Upper Suite 1"></p>

required 属性はブーリアン属性なので、単独で(等号を付けずに)配置することができます。必須のフィールドをマークすることは重要です。そうしないと、訪問者はどのフィールドが欠けていてフォームの送信を妨げているのかわからなくなってしまいます。

autocomplete 属性は、input要素の値をブラウザが自動的に補完するかどうかを示します。 autocomplete="off" に設定すると、ブラウザは入力を埋めるために過去の値を提案しません。クレジットカード番号のような機密情報を扱うinput要素は、 autocomplete 属性を off に設定すべきです。

大きなテキストの入力:textarea

1行のテキストしか挿入できないテキストフィールドとは異なり、 textarea 要素は訪問者が複数の行のテキストを入力できるようにします。textareaは別の要素ですが、input要素をベースにしているわけではありません。

<p> <label for="comment">Type your comment here:</label> <br>

<textarea id="comment" name="comment" rows="10" cols="50">
My multi-line, plain-text comment.
</textarea>

</p>

textarea要素の典型的な外観は Figure 4 です。

fig04
Figure 4. textarea 要素

input要素とのもう一つの違いは、 textarea 要素は閉じタグ( </textarea> )を持っているので、その内容(つまり値)はそれらの間に入ります。 rows と cols 属性は、テキストの量を制限するものではなく、レイアウトを定義するためにのみ使用されます。textareaには右下にハンドルがあり、訪問者がサイズを変更できるようになっています。

オプションのリスト

フォームコントロールには、 <select> 要素、 radio や checkbox といったinput要素のtype属性など、訪問者に選択肢のリストを提示するために使用できるものがあります。

<select> 要素は、定義済みのエントリのリストを持つドロップダウンコントロールです。

<p><label for="browser">Favorite Browser:</label>
<select name="browser" id="browser">
<option value="firefox">Mozilla Firefox</option>
<option value="chrome">Google Chrome</option>
<option value="opera">Opera</option>
<option value="edge">Microsoft Edge</option>
</select>
</p>

<option> タグは、対応する <select> コントロールの1つのエントリーを表します。 Figure 5 に示すように、ビジターがコントロールをタップまたはクリックすると、リスト全体が表示されます。

fig05
Figure 5. select 要素

デフォルトでは、リストの最初のエントリが選択されます。この動作を変更するには、別のエントリーに selected 属性を追加して、ページが読み込まれたときに選択されるようにします。

radio の入力タイプは、 <select> コントロールに似ていますが、ドロップダウンリストの代わりに、すべてのエントリーを表示して、訪問者がそのうちの一つをマークできるようにします。以下のコードの結果を Figure 6 に示します。

<p>Favorite Browser:</p>

<p>
	<input type="radio" id="browser-firefox" name="browser" value="firefox" checked>
  <label for="browser-firefox">Mozilla Firefox</label>
</p>

<p>
	<input type="radio" id="browser-chrome" name="browser" value="chrome">
  <label for="browser-chrome">Google Chrome</label>
</p>

<p>
	<input type="radio" id="browser-opera" name="browser" value="opera">
  <label for="browser-opera">Opera</label>
</p>

<p>
	<input type="radio" id="browser-edge" name="browser" value="edge">
  <label for="browser-edge">Microsoft Edge</label>
</p>
fig06
Figure 6. radio タイプ属性

同じグループ内のすべての radio 入力タイプは、同じ name 属性を持っていることに注意してください。それぞれの属性は排他的なので、選択されたエントリに対応する value 属性は、共有された name 属性に関連付けられたものになります。 checked 属性は、 <select> コントロールの selected 属性のように動作します。ページが最初にロードされたときに、対応するエントリがマークされます。 <label> タグは、特にラジオエントリに便利です。訪問者がコントロール自体に加えて、対応するテキストをクリックまたはタップすることによって、エントリをチェックすることができるからです。

radio コントロールがリストの1つのエントリのみを選択することを目的としているのに対して、 checkbox 入力タイプはビジターが複数のエントリをチェックすることを可能にします。

<p>Favorite Browser:</p>

<p>
	<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
	<label for="browser-firefox">Mozilla Firefox</label>
</p>

<p>
	<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
	<label for="browser-chrome">Google Chrome</label>
</p>

<p>
	<input type="checkbox" id="browser-opera" name="browser" value="opera">
	<label for="browser-opera">Opera</label>
</p>

<p>
	<input type="checkbox" id="browser-edge" name="browser" value="edge">
	<label for="browser-edge">Microsoft Edge</label>
</p>

チェックボックスも checked 属性を使って、エントリーをデフォルトで選択状態にすることができます。チェックボックスは、 Figure 7 に示すように、ラジオ入力の丸いコントロールの代わりに、四角いコントロールとしてレンダリングされます。

fig07
Figure 7. checkbox タイプ属性

複数のエントリが選択された場合、ブラウザはそれらを同じ名前で送信するため、バックエンドの開発者は、チェックボックスを含むフォームデータを適切に読み取るための特定のコードを記述する必要があります。

ユーザビリティを向上させるために、入力フィールドを <fieldset> タグでまとめておくことができます。

<fieldset>
<legend>Favorite Browser</legend>

<p>
	<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
	<label for="browser-firefox">Mozilla Firefox</label>
</p>

<p>
	<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
	<label for="browser-chrome">Google Chrome</label>
</p>

<p>
	<input type="checkbox" id="browser-opera" name="browser" value="opera">
	<label for="browser-opera">Opera</label>
</p>

<p>
	<input type="checkbox" id="browser-edge" name="browser" value="edge">
	<label for="browser-edge">Microsoft Edge</label>
</p>
</fieldset>

<legend> タグは、 <fieldset> タグがコントロールの周りに描くフレームの上部に配置されるテキストを含みます( Figure 8 )。

fig08
Figure 8. fieldset タグで要素をグループ化します。

<fieldset> タグは、フィールドの値がサーバに送信される方法を変更するものではありませんが、フロントエンドの開発者がネストされたコントロールをより簡単に制御できるようにします。例えば、 <fieldset> 属性に disabled 属性を設定すると、その内側のすべての要素を訪問者が利用できないようにします。

hidden タイプ属性

開発者は、訪問者が操作できない情報をフォームに含めたい場合があります。つまり、訪問者が値を入力したり変更したりできるフォームフィールドを提示することなく、開発者が選択した値を送信したい場合です。例えば、開発者は、訪問者に見られる必要のない、特定のフォームのための識別トークンを入れたいと思うかもしれません。隠しhiddenタイプ属性は、以下の例のようにコード化されます。

<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393-847d-2dab065bbc92">

隠し入力フィールドの値は、通常、サーバ側でドキュメントをレンダリングする際にドキュメントに追加されます。隠し入力は、ブラウザがサーバに送信する際には通常のフィールドと同様に扱われ、サーバも通常の入力フィールドとして読み込みます。

ファイル入力タイプ

HTMLフォームでは、入力またはリストから選択されたテキストデータに加えて、任意のファイルをサーバに送信することもできます。 file という入力タイプでは、訪問者がローカルのファイルシステムからファイルを選び、それをWebページから直接送信することができます。

<p>
<label for="attachment">Attachment:</label><br>
<input type="file" id="attachment" name="attachment">
</p>

file の入力タイプでは、値を入力したり選択したりするフォームフィールドの代わりに、ファイルダイアログを開くための ファイルを選択 ボタンが表示されます。 file 入力タイプではあらゆるファイルタイプを受け付けることができますが、バックエンドの開発者はおそらく許可されるファイルタイプとその最大サイズを制限するでしょう。ファイルタイプの検証はフロントエンドでも accept 属性を追加することで行うことができます。例えば、JPEGとPNGの画像のみを受け付ける場合には、 accept 属性を accept="image/jpeg, image/png" とします。

アクションボタン

デフォルトでは、訪問者が任意の入力フィールドでEnterキーを押すと、フォームが送信されます。より直感的に操作できるように、 submit という入力タイプで送信ボタンを追加する必要があります。

<input type="submit" value="Submit form">

Figure 9 のように、 value 属性のテキストがボタンに表示されます。

fig09
Figure 9. 標準的な送信ボタンです。

また、複雑なフォームに入れると便利なのが reset ボタンで、フォームをクリアして元の状態に戻します。

<input type="reset" value="Clear form">

サブミットボタンのように、 value 属性のテキストがボタンのラベルとして使われます。また、フォームやページ内の任意の場所にボタンを追加するには、 <button> タグを使用します。 <input> タグで作られたボタンとは異なり、buttonタグには閉じタグがあり、ボタンのラベルはその内側のコンテンツとなります。

<button>Submit form</button>

フォームの中にあるとき、 button 要素のデフォルトのアクションは、フォームを送信することです。入力ボタンと同様に、ボタンのtype属性を reset に切り替えることができます。

フォームのアクションとメソッド

HTMLフォームを作成する最後のステップは、データをどこにどのように送信するかを定義することです。これらの点は、クライアントとサーバの両方の詳細に依存します。

サーバサイドでは、アプリケーションの目的に応じて、フォームデータを解析、検証、処理するスクリプトファイルを用意するのが最も一般的なアプローチです。例えば、バックエンドの開発者は、フォームから送られてきたデータを受け取るために、 receive_form.php というスクリプトを書くことができます。クライアント側では、このスクリプトはformタグの action 属性で示されます。

<form action="receive_form.php">

action 属性は、すべてのHTTPアドレスと同じ慣例に従います。スクリプトがフォームを含むページと同じ階層にある場合は、パスなしで記述することができます。それ以外の場合は、絶対パスまたは相対パスを指定する必要があります。また、このスクリプトは、訪問者がフォームを送信した後にブラウザによって読み込まれるランディングページとしての役割を果たすためのレスポンスを生成する必要があります。

HTTPには、サーバとの接続を通じてフォームデータを送信するための個別のメソッドが用意されています。最も一般的なメソッドは get と post で、これらは form タグの method 属性で指定します。

<form action="receive_form.php" method="get">

または、

<form action="receive_form.php" method="post">

get メソッドでは、フォームのデータはリクエストURLに直接エンコードされます。訪問者がフォームを送信すると、ブラウザは action 属性で定義されたURLを、フォームフィールドが付加された状態で読み込みます。

シンプルなコンタクトフォームのように少量のデータを扱う場合は、 get メソッドを使うとよいでしょう。しかし、URLは数千文字を超えることはできないので、フォームに画像のような大きなフィールドやテキスト以外のフィールドが含まれる場合は、 post メソッドを使うべきです。

post メソッドは、ブラウザがHTTPリクエストのボディセクションにフォームデータを記述して送信するようにします。URLのサイズ制限を超えるようなバイナリデータの場合には必要ですが、よりシンプルなテキストフォームで使用する場合には、 post メソッドは接続に不要なオーバーヘッドを追加するので、そのような場合には get メソッドを使用することをお勧めします。

選択されたメソッドは訪問者がフォームをどのように操作するかには影響しません。 get と post のメソッドは、フォームを受け取ったサーバサイドのスクリプトによって異なる処理が行われます。

post メソッドを使うときには、 enctype フォーム属性を使って、フォームのコンテンツのMIMEタイプを変更することもできます。これは、サーバとのHTTP通信において、フォームのフィールドと値がどのようにスタックされるかに影響します。 enctype のデフォルト値は application/x-www-form-urlencoded で、これは get メソッドで使われるフォーマットに似ています。フォームが file タイプの入力フィールドを含む場合は、代わりにenctype multipart/form-data を使用してください。

演習

  1. <label> タグと <input> タグを関連付けるには、どのような方法がありますか?

  2. 数値を入力するスライダーコントロールを提供するinput要素タイプは何でしょうか?

  3. placeholder 属性の目的は何ですか?

  4. select要素の2つ目のoption要素がデフォルトで選択されていることを指定する属性は何でしょうか?

発展演習

  1. ファイルの入力を変更して、PDFファイルだけを受け付けるようにするにはどうすればいいですか?

  2. フォームのどのフィールドが必須であるかを訪問者にどのように知らせることができますか?

  3. このレッスンの3つのコードスニペットを1つのフォームにまとめてください。複数のフォームコントロールで同じ name 属性や id 属性を使わないように注意してください。

まとめ

このレッスンでは、サーバにデータを送り返すための簡単なHTMLフォームの作成方法を説明します。クライアント側では、HTMLフォームは標準的なHTML要素で構成されており、それらを組み合わせてカスタムインターフェースを構築します。また、フォームはサーバと適切に通信するように設定する必要があります。このレッスンでは、次のようなコンセプトと手順を説明しました。

  • <form> タグと基本的なフォーム構造

  • 基本的な入力要素と特殊な入力要素

  • <label> 、 <fieldset> 、 <legend> のような特別なタグの役割

  • フォームのボタンとアクション

演習の回答

  1. <label> タグと <input> タグを関連付けるには、どのような方法がありますか?

    <label> タグの for 属性には、対応する <input> タグのid属性を指定します。

  2. 数値を入力するスライダーコントロールを提供するinput要素タイプは何でしょうか?

    range タイプです。

  3. placeholder 属性の目的は何ですか?

    placeholder 属性には、対応する入力フィールドが空のときに表示される訪問者の入力例が含まれています。

  4. select要素の2つ目のoption要素がデフォルトで選択されていることを指定する属性は何でしょうか?

    2つ目の option 要素には selected 属性が必要です。

発展演習の回答

  1. ファイルの入力を変更して、PDFファイルだけを受け付けるようにするにはどうすればいいですか?

    input 要素の accept 属性には application/pdf を設定してください。

  2. フォームのどのフィールドが必須であるかを訪問者にどのように知らせることができますか?

    通常、必須項目にはアスタリスク( * )を付け、“*でマークされたフィールドは必須です” というような簡単な注意書きをフォームのそばに置きます。

  3. このレッスンの3つのコードスニペットを1つのフォームにまとめてください。複数のフォームコントロールで同じ name 属性や id 属性を使わないように注意してください。

      <form action="receive_form.php" method="get">
    
      <h2>Personal Information</h2>
    
      <label for="fullname">Full name:</label>
      <p><input type="text" name="fullname" id="fullname"></p>
    
      <p>
        <label for="date">Date:</label>
        <input type="date" name="date" id="date">
      </p>
    
      <p>Favorite Browser:</p>
    
      <p>
        <input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
        <label for="browser-firefox">Mozilla Firefox</label>
      </p>
    
      <p>
        <input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
        <label for="browser-chrome">Google Chrome</label>
      </p>
    
      <p>
        <input type="checkbox" id="browser-opera" name="browser" value="opera">
        <label for="browser-opera">Opera</label>
      </p>
    
      <p>
        <input type="checkbox" id="browser-edge" name="browser" value="edge">
        <label for="browser-edge">Microsoft Edge</label>
      </p>
    
      <p><input type="reset" value="Clear form"></p>
      <p><input type="submit" value="Submit form"></p>
    
      </form>

Linux Professional Insitute Inc. All rights reserved. 学習資料をご覧ください: https://learning.lpi.org
ここでの作成物は、Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Licenseの下でライセンスされています。

次のレッスン

033.1 CSSの基本 (033.1 レッスン 1)

次のレッスンを読む

Linux Professional Insitute Inc. All rights reserved. 学習資料をご覧ください: https://learning.lpi.org
ここでの作成物は、Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Licenseの下でライセンスされています。

LPIは非営利団体です。

© 2023 Linux Professional Institute(LPI)は、オープンソースプロフェッショナル向けのグローバルな認定基準およびキャリアサポート組織です。200,000人以上の認定保持者を擁する、世界初かつ最大のベンダー中立Linuxおよびオープンソース認定機関です。LPIは180か国以上で認定プロフェッショナルを擁し、複数の言語で試験を実施し、何百ものトレーニングパートナーを擁しています。

私たちの目的は、オープンソースの知識とスキルの認定資格を世界中からアクセスできるようにすることで、誰にとっても経済的で創造的な機会を可能にすることです。

  • LinkedIn
  • flogo-RGB-HEX-Blk-58 Facebook
  • Twitter
  • お問い合わせ
  • 個人情報とCookieポリシー

間違いを見つけたり、このページを改善したいですか? 私たちに知らせてください。.

© 1999–2023 The Linux Professional Institute Inc. All rights reserved.