マニュアル キャンセル

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

 

 

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

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

Dreamweaver での修正されたフォームワークフロー

Dreamweaver 12.1 アップデートで修正されたフォームのワークフロー

David Powers

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

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

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

フォームエレメント エレメントに固有の新しい属性 属性の説明
Text Field List http://www.w3.org/TR/html-markup/input.text.html
Button <固有の新規属性はありません> http://www.w3.org/wiki/HTML/Elements/button
Check Box <固有の新規属性はありません> http://www.w3.org/TR/html-markup/input.checkbox.html
File Multiple http://www.w3.org/TR/html-markup/input.file.html
Form No validateAccept charset http://www.w3.org/TR/2012/WD-html-markup-20120329/form.html
Hidden <固有の新規属性はありません> http://www.w3.org/TR/2012/WD-html-markup-20120329/input.hidden.html
Password <固有の新規属性はありません> http://www.w3.org/TR/html-markup/input.password.html
Image Width、Height、Action、Method、Form no Validate、Form Enc Type、Form target http://www.w3.org/TR/html-markup/input.image.html
Reset <固有の新規属性はありません> http://dev.w3.org/cvsweb/html5/markup/button.reset.html
Submit Form No Validate、Form Enc type、Form target、Action、Tab Index、Method http://www.w3.org/TR/html-markup/input.submit.html
Radio <固有の新規属性はありません> http://www.w3.org/TR/html-markup/input.radio.html
Text Area Rows、Cols、Place Holder、Wrap、Max Length、Tab Index http://www.w3.org/TR/html-markup/textarea.html
Select Size http://www.w3.org/wiki/HTML/Elements/select

HTML5 フォームエレメント

フォームエレメント 利用可能なバージョン 説明 属性の説明
Color 12.2 カラーを格納する入力フィールドで使用します。 http://www.w3.org/TR/html-markup/input.color.html
Date 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
Time 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
E-mail 12.1 エレメントの値で提供される電子メールアドレスのリストを編集するためのコントロールです。 http://www.w3.org/TR/html-markup/input.email.html
Search 12.1 1 つ以上の検索語を入力するための 1 行のプレーンテキスト編集コントロールです。 http://www.w3.org/TR/html-markup/input.search.html
Telephone (Tel) 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

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合