フォームエレメントの HTML5 サポート強化

最終更新日 : 2024年4月25日

Dreamweaver での HTML5 の継続サポートに合わせて、一部のフォームエレメントに新しい属性が導入されました。 また、4 つの新しい HTML5 フォームエレメントも導入されています。

フォームエレメントは挿入パネルで見つけることができます。 ウィンドウ挿入を選択します。 挿入パネルのメニューで、「フォーム」を選択します。

フォームエレメントに共通の新しい属性

次の新しい属性はすべてのフォームエレメントに共通です。

  • Disabled:ブラウザーでエレメントを無効にする場合に、このオプションを選択します。
  • Required:値が指定されているかどうかブラウザーでチェックする場合に、このオプションを選択します。
  • Auto complete:ユーザーがブラウザーに情報を入力したときに値を自動読み込みする場合に、このオプションを選択します。
  • Auto focus:ブラウザーでページを読み込むときに、このエレメントにフォーカスを置く場合に、このオプションを選択します。
  • Read only:エレメントの値を読み取り専用に設定する場合に、このオプションを選択します。
  • Form:<input> エレメントが属する 1 つ以上のフォームを指定します。
  • Name:コード内のエレメントの参照に使用する一意の名前です。
  • Place holder:入力フィールドの必要な値について説明するヒントです。
  • Pattern:エレメントの値が検証される対象の正規表現です。
  • Title:エレメントに関する追加情報です。 ツールヒントとして表示されます。
  • Tab Index:現在のドキュメントに対するタブ順の設定での現在のエレメントの位置を指定します。

フォームエレメントの変更された属性

  • Form No Validate:フォームバリデートを無効にするには、このオプションを選択します。 選択すると、フォームレベルで No Validate 属性が上書きされます。
  • Form Enc Type:ユーザーエージェントがフォーム送信用にこのエレメントを関連付ける MIME タイプです。
  • Form Target:コントロールのターゲットを表す参照コンテキスト名またはキーワードです。
  • Accept charset:フォーム送信に使用される文字セットエンコードを指定します。
メモ

属性のリンクには、HTML5 の仕様に一覧表示されているすべての属性の情報が含まれています。 一部の属性はプロパティパネルに存在しません。 パネルにない属性については、コードビューを使用して追加できます。

フォームエレメント 要素に固有の新しい属性 属性の説明
テキストフィールド リスト http://www.w3.org/TR/html-markup/input.text.html
ボタン <固有の新規属性はありません> http://www.w3.org/wiki/HTML/Elements/button
チェックボックス <固有の新規属性はありません> http://www.w3.org/TR/html-markup/input.checkbox.html
ファイル 複数 http://www.w3.org/TR/html-markup/input.file.html
フォーム No validateAccept charset http://www.w3.org/TR/2012/WD-html-markup-20120329/form.html
非表示 <固有の新規属性はありません> http://www.w3.org/TR/2012/WD-html-markup-20120329/input.hidden.html
パスワード <固有の新規属性はありません> http://www.w3.org/TR/html-markup/input.password.html
イメージ Width、Height、Action、Method、Form no Validate、Form Enc Type、Form target。 http://www.w3.org/TR/html-markup/input.image.html
リセット <固有の新規属性はありません> http://dev.w3.org/cvsweb/html5/markup/button.reset.html
onSubmit Form No Validate、Form Enc type、Form target、Action、Tab Index、Method http://www.w3.org/TR/html-markup/input.submit.html
ラジオ <固有の新規属性はありません> http://www.w3.org/TR/html-markup/input.radio.html
テキストエリア 行、列、プレースホルダー、折り返し、最大文字数、タブインデックス http://www.w3.org/TR/html-markup/textarea.html
選択 サイズ http://www.w3.org/wiki/HTML/Elements/select

HTML5 フォームエレメント

フォーム要素 利用可能なバージョン 説明 属性の説明
カラー 12.2 カラーを格納する入力フィールドで使用します。 http://www.w3.org/TR/html-markup/input.color.html
日付 12.2 日付を選択するためのコントロールです。 http://www.w3.org/TR/html-markup/input.date.html
Date Time 12.2 日時を選択できます(タイムゾーンあり)。 http://www.w3.org/TR/html-markup/input.datetime.html
Date Time Local 12.2 日時を選択できます(タイムゾーンなし)。 http://www.w3.org/TR/html-markup/input.datetime-local.html
Month 12.2 月と年を選択できます。 http://www.w3.org/TR/html-markup/input.month.html
Number 12.2 数値のみを格納するフィールドで使用します。 http://www.w3.org/TR/html-markup/input.number.html
Range 12.2 数値の範囲からの値を格納するフィールドで使用します。 http://www.w3.org/TR/html-markup/input.range.html
時間 12.2 時間を選択できます。 http://www.w3.org/TR/html-markup/input.time.html
Week 12.2 週と年を選択できます。 http://www.w3.org/TR/html-markup/input.week.html
電子メール 12.1 エレメントの値で提供される電子メールアドレスのリストを編集するためのコントロールです。 http://www.w3.org/TR/html-markup/input.email.html
検索 12.1 1 つ以上の検索語を入力するための 1 行のプレーンテキスト編集コントロールです。 http://www.w3.org/TR/html-markup/input.search.html
電話番号 12.1 電話番号を入力するための 1 行のプレーンテキスト編集コントロールです。 http://www.w3.org/TR/html-markup/input.tel.html
URL 12.1 エレメントの値で提供された絶対 URL を編集するためのコントロールです。 http://www.w3.org/TR/html-markup/input.url.html

その他の関連ヘルプ