Django入門|編集できないフォームフィールドに変更する方法のイメージ画像

Django入門|編集できないフォームフィールドに変更する方法

  • 公開日:2020/03/13
  • 更新日:2020/03/13
  • 投稿者:n bit

Djangoのフォーム入力フィールドにreadonly属性またはdisabled属性をつけることで値の変更を禁止したフィールドを用意する方法を解説します。

  • Python
  • Django

この記事は約 分で読めます。(文字)

  • ユーザにフォームフィールドの値を編集させたくない
  • 更新時に値を変更したくないフィールドがある

等、編集を不可にするフォームフィールドの作り方について解説。

input要素を編集不可にする2つの方法

input要素に入力されている値を編集できないようにする場合2つのやり方があります。

  • 1:input要素にreadonly属性を指定する方法。
  • 2:input要素にdisabled属性を指定する方法。

どちらもinput要素内の値を編集できなくする点は共通していますが、2つほど違いがある。その違いをしっかりと理解しておかないと、実装後困ることもあるのでreadonly属性とdisabled属性の違いについて先に説明しましょう。

input要素のreadonly属性とdisabled属性の違い

readonly属性とdisabled属性の違いは以下の通り。

値の選択(フォーカス)

  • readonly属性:選択可能
  • disabled属性:選択不可

値の送信

  • readonly属性:送信可能
  • disabled属性:送信不可

readonly属性は編集のみを不可にし、disabled属性は編集だけでなく値の送信や選択、すべての許可を不可にします。

それぞれ用途で使い分けてください。

Djangoのフォームフィールドに
readonly属性またはdisabled属性を設定する方法

readonly属性、disabled属性いずれを利用するにしても基本的な設定方法は同じ。フォームフィールドのwidgetに属性として追加します。

それぞれの設定方法は以下の通り。

ModelFormに設定

readonly属性

forms.py:SampleFormのフィールド「hoge」を編集不可にする場合

from django import forms

from .models import Sample

class SampleForm(forms.ModelForm):

def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['hoge'].widget.attrs['readonly'] = 'readonly'

class Meta:
model = Sample

disabled属性

forms.py:SampleFormのフィールド「hoge」を編集不可にする場合

from django import forms

from .models import Sample

class SampleForm(forms.ModelForm):

def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['hoge'].widget.attrs['disabled'] = 'disabled'

class Meta:
model = Sample

Formに設定する場合

readonly属性

forms.py:SampleFormのフィールド「hoge」を編集不可にする場合

from django import forms


class SampleForm(forms.Form):
hoge = forms.CharField(
widget=forms.TextInput(
attrs={
'readonly': 'readonly',
}
),
)

disabled属性

forms.py:SampleFormのフィールド「hoge」を編集不可にする場合

from django import forms


class SampleForm(forms.Form):
hoge = forms.CharField(
widget=forms.TextInput(
attrs={
'disabled': 'disabled',
}
),
)

いずれの場合も一行を追加するだけですので設定としてはシンプルですね。

今日のdot

管理者側ではなく、ユーザに直接データを編集させる場合、ユーザが予期しない編集を行ったことでデータが壊れないように、編集させたくないフィールドに関してはreadonly属性またはdisabled属性を利用して編集不可にしておきましょう。