HTMLフォーム要素

HTMLフォーム要素

Webページ上のHTMLフォームは、ユーザーが処理のためにサーバーに送信されたデータを入力することができます。 Webユーザは、チェックボックス、ラジオボタン、またはテキストフィールドを使用して、フォームに必要事項を記入するので、フォームは、紙またはデータベースの形に似ていることができます。

たとえば、フォームが製品を注文するために、出荷またはクレジットカード情報を入力するために使用することができ、または検索エンジンからの検索結果を取得するために使用することができます。

この章では、すべてのHTMLフォーム要素について説明します。

<input>要素

最も重要なフォーム要素がある<input>要素。

<input>要素には、に応じて、多くの方法で変えることができtype属性。

<select>要素(Drop-Down List)

<select>要素のドロップダウンリストを定義しています。

<option>要素は、選択するオプションを定義します。

選択したリストには、通常、最初の項目が表示されます。

あなたは、事前に定義されたオプションを定義するために選択した属性を追加することができます。

<textarea>要素

<textarea>要素は、複数行の入力フィールド定義( a text area ) 。

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

猫が庭で遊んでいました。

<button>要素

<button>要素はクリック可能なボタンを定義します。

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

私をクリックしてください！

HTML5フォーム要素

HTML5には、以下のフォーム要素を追加しました：

• <datalist>
• <keygen>
• <output>

HTML5 <datalist>要素

<datalist>要素はのための事前定義されたオプションのリストを指定する<input>要素。

ユーザーは、入力データとしてあらかじめ定義されたオプションのドロップダウンリストが表示されます。

listの属性<input>要素は、を参照しなければなりませんidの属性<datalist>要素。

例

<input>で事前定義された値を持つ要素<datalist> ：

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

»それを自分で試してみてください

HTML5 <keygen>要素

目的<keygen>要素は、ユーザーを認証する安全な方法を提供することです。

<keygen>要素は、フォームに鍵ペアジェネレータのフィールドを指定します。

フォームが送信されると、2つのキーが、プライベート1つずつ公開する生成されます。

秘密鍵は、ローカルに保存され、公開鍵は、サーバーに送信されます。

公開鍵は、将来的には、ユーザを認証するためのクライアント証明書を生成するために使用することができます。

例

keygenのフィールドを持つフォーム：

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

»それを自分で試してみてください

HTML5 <output>要素

<output>要素は、（スクリプトによって実行されるような）計算の結果を表します。

例

計算を実行し、結果を表示し<output>要素：

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

»それを自分で試してみてください

練習で自分自身をテストします！

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

HTMLフォーム要素

= HTML5の新しいです。