<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メソッドを指定しGETやPOSTフォームを送信するときに使用します):
<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>
.
練習で自分自身をテストします!
こちらのリストである<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デフォルト)。
あなたは、次の章の属性についての詳細を学びます。
その他の例
フォームから電子メールを送信します
どのようにフォームから電子メールを送信します。