最新のWeb開発のチュートリアル

HTMLフォーム


<form>要素

HTMLフォームは、ユーザーの入力を収集するために使用されています。

<form>要素は、HTMLフォームを定義します。

<form>
.
HTMLフォームは、 フォーム要素が含まれています。

フォーム要素は、異なる入力要素の種類、チェックボックス、ラジオボタン、ボタンを提出し、より多くのです。


<input>要素

<input>要素には、最も重要なフォーム要素です。

<input>要素は、に依存して、多くの変形を有するtype属性。

ここでは、この章で使用するタイプは次のとおりです。

タイプ 説明
text 通常のテキスト入力を定義します
radio ラジオボタンの入力を定義します(for selecting one of many choices)
submit 送信ボタンを定義します(for submitting the form)

このチュートリアルの後半で入力タイプについてより多くを学びます。


テキスト入力

<input type="text"> テキスト入力のための一行入力フィールドを定義しています。

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
»それを自分で試してみてください

これは、ブラウザで次のようになります方法です。

ファーストネーム:

苗字:

Note:フォーム自体が表示されていません。 また、テキストフィールドのデフォルトの幅は20個の文字であることに注意してください。


Radioボタン入力

<input type="radio">定義radioボタン。

Radioボタンは、ユーザーが選択肢の限られた数のいずれかを選択してみましょう:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
»それを自分で試してみてください

これは、上記のHTMLコードをブラウザに表示する方法です。

男性
女性
他の


送信ボタン

<input type="submit"> フォームハンドラにフォームを送信するためのボタンを定義します。

フォームハンドラは、典型的には、入力データを処理するためのスクリプトを使用してサーバーページです。

フォームハンドラは、フォームの中で指定されたaction属性:

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
»それを自分で試してみてください

これは、上記のHTMLコードをブラウザに表示する方法です。

ファーストネーム:

苗字:



Action属性

action属性は、フォームが送信されたときに実行するアクションを定義します。

サーバーにフォームを送信する一般的な方法は、送信ボタンを使用することです。

通常、フォームは、Webサーバ上のWebページに提出されます。

上記の例では、サーバー側のスクリプトは、送信されたフォームを処理するために指定されています。

<form action="action_page.php ">

場合はaction属性が省略され、アクションが現在のページに設定されています。


Method属性

method属性は、(HTTPメソッドを指定しGETPOSTフォームを送信するときに使用します):

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

または:

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

ときに使用するGET

あなたは使用することができますGET (the default method)

フォームの送信は、受動的である場合には(like a search engine query) 、および機密情報なし。

あなたが使用する場合はGET 、フォームデータはページアドレスに表示されます:

action_page.php?firstname=Mickey&lastname=Mouse

GETは、データの短い量に最適です。 サイズ制限は、お使いのブラウザに設定されています。


使用する場合はPOST

あなたは使うべきPOST

フォームは、データを更新している、または機密情報が含まれている場合(password)

POST提出されたデータは、ページアドレスには表示されませんので、より高いセキュリティを提供しています。


Name属性

正確に提出するために、各入力フィールドには持っている必要がありますname属性を。

この例は、提出する"Last name" :入力フィールドを

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
»それを自分で試してみてください

フォームデータのグループ化<fieldset>

<fieldset>形式でデータを関連要素群。

<legend>要素はのキャプション定義<fieldset>要素。

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
»それを自分で試してみてください

これは、上記のHTMLコードをブラウザに表示する方法です。

個人情報: ファーストネーム:

苗字:



HTML Formの属性

HTML <form>に設定可能なすべての属性を持つ要素は、次のようになります。

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
練習で自分自身をテストします!

演習1» 演習2» 演習3» 演習4»


こちらのリストである<form>属性は:

属性 説明
accept-charset (:ページの文字セットデフォルト)送信されたフォームで使用する文字セットを指定します。
action アドレスを指定します(url)提出ページデフォルト)フォームを送信します。
autocomplete ブラウザがフォームを自動補完するかどうかを指定します(default: on)
enctype 提出されたデータのエンコーディングを指定します(default: is url-encoded)
method フォーム提出するときに使用されるHTTPメソッドを指定します(default: GET)
name (:document.forms.name DOMの使用のための)フォームを識別するために使用される名前を指定します。
novalidate ブラウザがフォームを検証するべきではないことを指定します。
target 内のアドレスのターゲットを指定しaction属性(:_selfデフォルト)。

あなたは、次の章の属性についての詳細を学びます。


その他の例

フォームから電子メールを送信します
どのようにフォームから電子メールを送信します。