Html

disabled属性が設定されている値をSubmitする際の注意点

disabled属性を設定したHTML要素は、無効化されて一切操作できなくなります。disabled属性を設定した要素の値をサーバーにSubmitする際、値がサーバーに送信されないため注意が必要です。input要素の値は編集されたくないけど、サーバーに値を送信する方法をサンプルコードを提示しながら説明していきます。

  1. HTML要素のdisabled属性を有効化
  2. disabled属性の値をPOST
  3. readonly属性
  4. hiddenタグで画面内に埋め込む

※ASP.NET CoreとC#、Bootstrapを利用してコードを作成しています。

続きを読む

【HTML 】カスタムデータ属性

カスタムデータ属性( data-* )はhtmlのタグに付けるオリジナルの属性です。
データ属性は、似たような要素(id属性やclass属性では区別できない要素)も区別することができ、JavaScriptでdata属性の取得・設定・変更ができるため、非常に便利です。理解を深めるために、JavaScript・css・data属性を利用しながらサンプルコードを作成していきます。

部署IDのカスタムデータ属性を利用し、部署選択ボタンで該当社員行の背景色を動的に変える
  1. data属性とは
  2. data属性の取得・設定・変更(JavaScript、jQueryを使用)
  3. data属性にスタイルを適用させる(Css)

※ボタンやテーブルのデザインは、bootstrapを利用しています。

続きを読む