一篇文章搞懂Django中的form表單

orm介紹

　　之前在HTML頁面中利用form表單向后端提交數(shù)據(jù)時，都會寫一些獲取用戶輸入的標簽并且用form標簽把它們包起來。

與此同時我們在好多場景下都需要對用戶的輸入做校驗，比如校驗用戶是否輸入，輸入的長度和格式等正不正確。如果用戶輸入的內(nèi)容有錯誤就需要在頁面上相應的位置顯示顯示對應的錯誤信息.。

Django form組件就實現(xiàn)了上面所述的功能。

總結(jié)一下，其實form組件的主要功能如下:

生成頁面可用的HTML標簽
對用戶提交的數(shù)據(jù)進行校驗
保留上次輸入內(nèi)容

普通的登錄

views.py

def login(request):
    error_msg=""
    if request.method=="POST":
        username=request.POST.get("username")
        pwd=request.POST.get("pwd")
        if username=="SKS" and pwd=="1366768":
            return HttpResponse("OK")
        else:
            error_msg="用戶名或密碼錯誤"
    return render(request, "login.html", {"error_msg": error_msg})

login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>login</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
<form action="/login/" method="post">
  {% csrf_token %}
  <p>
    <label for="username">用戶名</label>
    <input type="text" name="username" id="username">
  </p>
  <p>
    <label for="pwd">密碼</label>
    <input type="password" name="pwd" id="pwd">
    <span class="error"></span>
  </p>
  <p>
    <input type="submit">
    <span class="error">{{ error_msg }}</span>
  </p>
</form>
</body>
</html>

使用form組件

views.py

先定義好一個LoginForm類。

# 定義一個form組件類
class LoginForm(forms.Form):
    # 驗證的字段及條件
    username=forms.CharField(min_length=10, label="用戶名")
    pwd=forms.CharField(min_length=10, label="密碼")


def login(request):
    # 存儲錯誤信息
    error_msg=""
   # 實例化對象
    form_obj=LoginForm()
     # 判斷前端頁面請求是否是POST請求
    if request.method=="POST":
        # 將數(shù)據(jù)傳入form組件類中
        form_obj=LoginForm(request.POST)
        # 存儲的正確信息
        if form_obj.is_valid():
            username=form_obj.cleaned_data.get("username")
            pwd=form_obj.cleaned_data.get("pwd")
            if username=="SKS" and pwd=="1866768":
                return HttpResponse("OK")
            else:
                error_msg="用戶名或密碼錯誤"
    return render(request, "login2.html", {"form_obj": form_obj, "error_msg": error_msg})

login2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>login</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
<form action="/login2/" method="post" novalidate>
  {% csrf_token %}
  <p>
    {{ form_obj.username.label }}
    {{ form_obj.username }}
    <span class="error">{{ form_obj.username.errors.0 }}</span>
  </p>
  <p>
    {{ form_obj.pwd.label }}
    {{ form_obj.pwd }}
    <span class="error">{{ form_obj.pwd.errors.0 }}</span>
  </p>
  <p>
    <input type="submit">
    <span class="error">{{ error_msg }}</span>
  </p>
</form>
</body>
</html>

看網(wǎng)頁效果發(fā)現(xiàn) 也驗證了form的功能：

前端頁面是form類的對象生成的 -->生成HTML標簽功能
當用戶名和密碼輸入為空或輸錯之后頁面都會提示 -->用戶提交校驗功能
當用戶輸錯之后再次輸入上次的內(nèi)容還保留在input框 -->保留上次輸入內(nèi)容

Form組件

常用字段演示

initial

初始值，input框里面的初始值。

# 定義一個類繼承forms.Form
class LoginForm(forms.Form):
    username=forms.CharField(
        min_length=10,
        label="用戶名",
        initial="hewm"  # 設(shè)置默認值方法
    )
    pwd=forms.CharField(min_length=10, label="密碼")

error_messages

重寫錯誤信息。

class LoginForm(forms.Form):
    username=forms.CharField(
        min_length=10,
        label="用戶名",
        initial="rum",
       # 重寫錯誤提示信息
        error_messages={
            "required": "不能為空",
            "invalid": "格式錯誤",
            "min_length": "用戶名最短10位"
        }
    )
    pwd=forms.CharField(min_length=10, label="密碼")

password

class LoginForm(forms.Form):
    ...
    pwd=forms.CharField(
        min_length=10,
        label="密碼",
         # 密文方法   參數(shù)attrs：樣式類   render_value=驗證失敗是否回填

widget=forms.widgets.PasswordInput(attrs={'class': 'c1'}, render_value=True) )

radioSelect

單radio值為字符串

class LoginForm(forms.Form):
    username=forms.CharField(
        min_length=10,
        label="用戶名",
        initial="rum",
        error_messages={
            "required": "不能為空",
            "invalid": "格式錯誤",
            "min_length": "用戶名最短10位"
        }
    )
    pwd=forms.CharField(min_length=6, label="密碼")
    gender=forms.fields.ChoiceField(
        choices=((1, "男"), (2, "女"), (3, "保密")),
        label="性別",
        initial=3,
        widget=forms.widgets.RadioSelect
    )

單選Select

class LoginForm(forms.Form):
    ...
    hobby=forms.fields.ChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "乒乓球"), ),
        label="愛好",
        initial=3,
        widget=forms.widgets.Select
    )

多選Select

class LoginForm(forms.Form):
    ...
    hobby=forms.fields.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"), ),
        label="愛好",
        initial=[1, 3],
        widget=forms.widgets.SelectMultiple
    )

單選checkbox

class LoginForm(forms.Form):
    ...
    keep=forms.fields.ChoiceField(
        label="是否記住密碼",
        initial="checked",
        widget=forms.widgets.CheckboxInput
    )

多選checkbox

class LoginForm(forms.Form):
    ...
    hobby=forms.fields.MultipleChoiceField(
        choices=((1, "籃球"), (2, "足球"), (3, "雙色球"),),
        label="愛好",
        initial=[1, 3],
        widget=forms.widgets.CheckboxSelectMultiple
    )

關(guān)于choice的注意事項：

在使用選擇標簽時，需要注意choices的選項可以從數(shù)據(jù)庫中獲取，但是由于是靜態(tài)字段 ***獲取的值無法實時更新***，那么需要自定義構(gòu)造方法從而達到此目的。

方式一：

from django.forms import Form
from django.forms import widgets
from django.forms import fields

 
class MyForm(Form):
 
    user=fields.ChoiceField(
        # choices=((1, '上海'), (2, '北京'),),
        initial=2,
        widget=widgets.Select
    )
 # 初始化init方法 （執(zhí)行時間為類實例化時執(zhí)行）
    def __init__(self, *args, **kwargs):
        super(MyForm,self).__init__(*args, **kwargs)
        # self.fields['user'].widget.choices=((1, '上海'), (2, '北京'),)
        # 或
        self.fields['user'].widget.choices=models.Classes.objects.all().values_list('id','caption')

方式二：

from django import forms
from django.forms import fields
from django.forms import models as form_model

 
class FInfo(forms.Form):
    authors=form_model.ModelMultipleChoiceField(queryset=models.NNewType.objects.all())
    # authors=form_model.ModelChoiceField(queryset=models.NNewType.objects.all())

內(nèi)置字段

Field
    required=True,               是否允許為空
    widget=None,                 HTML插件
    label=None,                  用于生成Label標簽或顯示內(nèi)容
    initial=None,                初始值
    help_text='',                幫助信息(在標簽旁邊顯示)
    error_messages=None,         錯誤信息 {'required': '不能為空', 'invalid': '格式錯誤'}
    show_hidden_initial=False,   是否在當前插件后面再加一個隱藏的且具有默認值的插件（可用于檢驗兩次輸入是否一直）
    validators=[],               自定義驗證規(guī)則
    localize=False,              是否支持本地化
    disabled=False,              是否可以編輯
    label_suffix=None            Label內(nèi)容后綴
 
 
CharField(Field)
    max_length=None,             最大長度
    min_length=None,             最小長度
    strip=True                   是否移除用戶輸入空白
 
IntegerField(Field)
    max_value=None,              最大值
    min_value=None,              最小值
 
FloatField(IntegerField)
    ...
 
DecimalField(IntegerField)
    max_value=None,              最大值
    min_value=None,              最小值
    max_digits=None,             總長度
    decimal_places=None,         小數(shù)位長度
 
BaseTemporalField(Field)
    input_formats=None          時間格式化   
 
DateField(BaseTemporalField)    格式：2015-09-01
TimeField(BaseTemporalField)    格式：11:12
DateTimeField(BaseTemporalField)格式：2015-09-01 11:12
 
DurationField(Field)            時間間隔：%d %H:%M:%S.%f
    ...
 
RegexField(CharField)
    regex,                      自定制正則表達式
    max_length=None,            最大長度
    min_length=None,            最小長度
    error_message=None,         忽略，錯誤信息使用 error_messages={'invalid': '...'}
 
EmailField(CharField)      
    ...
 
FileField(Field)
    allow_empty_file=False     是否允許空文件
 
ImageField(FileField)      
    ...
    注：需要PIL模塊，pip3 install Pillow
    以上兩個字典使用時，需要注意兩點：
        - form表單中 enctype="multipart/form-data"
        - view函數(shù)中 obj=MyForm(request.POST, request.FILES)
 
URLField(Field)
    ...
 
 
BooleanField(Field)  
    ...
 
NullBooleanField(BooleanField)
    ...
 
ChoiceField(Field)
    ...
    choices=(),                選項，如：choices=((0,'上海'),(1,'北京'),)
    required=True,             是否必填
    widget=None,               插件，默認select插件
    label=None,                Label內(nèi)容
    initial=None,              初始值
    help_text='',              幫助提示
 
 
ModelChoiceField(ChoiceField)
    ...                        django.forms.models.ModelChoiceField
    queryset,                  # 查詢數(shù)據(jù)庫中的數(shù)據(jù)
    empty_label="---------",   # 默認空顯示內(nèi)容
    to_field_name=None,        # HTML中value的值對應的字段
    limit_choices_to=None      # ModelForm中對queryset二次篩選
     
ModelMultipleChoiceField(ModelChoiceField)
    ...                        django.forms.models.ModelMultipleChoiceField
 
 
     
TypedChoiceField(ChoiceField)
    coerce=lambda val: val   對選中的值進行一次轉(zhuǎn)換
    empty_value=''            空值的默認值
 
MultipleChoiceField(ChoiceField)
    ...
 
TypedMultipleChoiceField(MultipleChoiceField)
    coerce=lambda val: val   對選中的每一個值進行一次轉(zhuǎn)換
    empty_value=''            空值的默認值
 
ComboField(Field)
    fields=()                  使用多個驗證，如下：即驗證最大長度20，又驗證郵箱格式
                               fields.ComboField(fields=[fields.CharField(max_length=20), fields.EmailField(),])
 
MultiValueField(Field)
    PS: 抽象類，子類中可以實現(xiàn)聚合多個字典去匹配一個值，要配合MultiWidget使用
 
SplitDateTimeField(MultiValueField)
    input_date_formats=None,   格式列表：['%Y--%m--%d', '%m%d/%Y', '%m/%d/%y']
    input_time_formats=None    格式列表：['%H:%M:%S', '%H:%M:%S.%f', '%H:%M']
 
FilePathField(ChoiceField)     文件選項，目錄下文件顯示在頁面中
    path,                      文件夾路徑
    match=None,                正則匹配
    recursive=False,           遞歸下面的文件夾
    allow_files=True,          允許文件
    allow_folders=False,       允許文件夾
    required=True,
    widget=None,
    label=None,
    initial=None,
    help_text=''
 
GenericIPAddressField
    protocol='both',           both,ipv4,ipv6支持的IP格式
    unpack_ipv4=False          解析ipv4地址，如果是::ffff:192.0.2.1時候，可解析為192.0.2.1， PS：protocol必須為both才能啟用
 
SlugField(CharField)           數(shù)字，字母，下劃線，減號（連字符）
    ...
 
UUIDField(CharField)           uuid類型

Django form內(nèi)置字段

校驗

方式一：

from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import RegexValidator
 
class MyForm(Form):
    user=fields.CharField(
        validators=[RegexValidator(r'^[0-9]+$', '請輸入數(shù)字'), RegexValidator(r'^159[0-9]+$', '數(shù)字必須以159開頭')],
    )

方式二：

import re
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.exceptions import ValidationError
 
 
# 自定義驗證規(guī)則
def mobile_validate(value):
    mobile_re=re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
    if not mobile_re.match(value):
        raise ValidationError('手機號碼格式錯誤')
 
 
class PublishForm(Form):
 
 
    title=fields.CharField(max_length=20,
                            min_length=5,
                            error_messages={'required': '標題不能為空',
                                            'min_length': '標題最少為5個字符',
                                            'max_length': '標題最多為20個字符'},
                            widget=widgets.TextInput(attrs={'class': "form-control",
                                                          'placeholder': '標題5-20個字符'}))
 
 
    # 使用自定義驗證規(guī)則
    phone=fields.CharField(validators=[mobile_validate, ],
                            error_messages={'required': '手機不能為空'},
                            widget=widgets.TextInput(attrs={'class': "form-control",
                                                          'placeholder': u'手機號碼'}))
 
    email=fields.EmailField(required=False,
                            error_messages={'required': u'郵箱不能為空','invalid': u'郵箱格式錯誤'},
                            widget=widgets.TextInput(attrs={'class': "form-control", 'placeholder': u'郵箱'}))

補充進階

應用Bootstrap樣式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  <title>login</title>
</head>
<body>
<div class="container">
  <div class="row">
    <form action="/login2/" method="post" novalidate class="form-horizontal">
      {% csrf_token %}
      <div class="form-group">
        <label for="{{ form_obj.username.id_for_label }}"
               class="col-md-2 control-label">{{ form_obj.username.label }}</label>
        <div class="col-md-10">
          {{ form_obj.username }}
          <span class="help-block">{{ form_obj.username.errors.0 }}</span>
        </div>
      </div>
      <div class="form-group">
        <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
        <div class="col-md-10">
          {{ form_obj.pwd }}
          <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
        </div>
      </div>
      <div class="form-group">
      <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
        <div class="col-md-10">
          <div class="radio">
            {% for radio in form_obj.gender %}
              <label for="{{ radio.id_for_label }}">
                {{ radio.tag }}{{ radio.choice_label }}
              </label>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
          <button type="submit" class="btn btn-default">注冊</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

批量添加樣式

可通過重寫form類的init方法來實現(xiàn)。

class LoginForm(forms.Form):
    username=forms.CharField(
        min_length=10,
        label="用戶名",
        initial="張三",
        error_messages={
            "required": "不能為空",
            "invalid": "格式錯誤",
            "min_length": "用戶名最短10位"
        }
    ...

    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

源碼簡易剖析

views.py文件

def register(request):
    if request.method=="POST":
        res={"user": None, "error_dict": None}
        form=RegForm(request.POST)
        # 存儲驗證通過的信息.is_valid()（源碼剖析開始點）
        if form.is_valid():
            user=form.cleaned_data.get("user")
            pwd=form.cleaned_data.get("pwd")
            email=form.cleaned_data.get("email")
            avatar=request.FILES.get("avatar")
            print(user,pwd,email,avatar)
            if avatar:
                user=UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar)
            else:
                user=UserInfo.objects.create_user(username=user, password=pwd, email=email)

            res["user"]=user.username
        else:
            print(form.errors)
            res["error_dict"]=form.errors
        return JsonResponse(res)
    form=RegForm()
    return render(request, 'register.html', locals())

點擊進入forms.py文件

def is_valid(self):
        """
        Returns True if the form has no errors. Otherwise, False. If errors are
        being ignored, returns False.
        """
        # 含義：返回布爾值，只要有數(shù)據(jù)并且沒有錯誤信息就返回True
        return self.is_bound and not self.errors

點擊self.errors進入forms.py文件中

# 靜態(tài)方法
@property
    def errors(self):
        "Returns an ErrorDict for the data provided for the form"
       # 判斷self._errors是否為空
        if self._errors is None:
            self.full_clean()
        return self._errors

點擊._errors進入forms.py文件中

def __init__(self, data=None, files=None, auto_id='id_%s', prefix=None,
                 initial=None, error_class=ErrorList, label_suffix=None,
                 empty_permitted=False, field_order=None, use_required_attribute=None, renderer=None):
        self.is_bound=data is not None or files is not None
        self.data=data or {}
        self.files=files or {}
        self.auto_id=auto_id
        if prefix is not None:
            self.prefix=prefix
        self.initial=initial or {}
        self.error_class=error_class
        # Translators: This is the default suffix added to form field labels
        self.label_suffix=label_suffix if label_suffix is not None else _(':')
        self.empty_permitted=empty_permitted

       
        # 默認值為None
        self._errors=None  # Stores the errors after clean() has been called.





        # The base_fields class attribute is the *class-wide* definition of
        # fields. Because a particular *instance* of the class might want to
        # alter self.fields, we create self.fields here by copying base_fields.
        # Instances should always modify self.fields; they should not modify
        # self.base_fields.
        self.fields=copy.deepcopy(self.base_fields)
        self._bound_fields_cache={}
        self.order_fields(self.field_order if field_order is None else field_order)

返回def errors(self)

@property
    def errors(self):
        "Returns an ErrorDict for the data provided for the form"
        if self._errors is None:
            self.full_clean()  # 這個方法才是真正幫忙執(zhí)行效驗操作
        return self._errors

點擊full_clean方法

def full_clean(self):
        """
        Cleans all of self.data and populates self._errors and
        self.cleaned_data.
        """
        self._errors=ErrorDict()  # 定義一個保存錯誤信息字典
        if not self.is_bound:  # Stop further processing.
            return
        self.cleaned_data={}
        # If the form is permitted to be empty, and none of the form data has
        # changed from the initial data, short circuit any validation.
        if self.empty_permitted and not self.has_changed():
            return

        self._clean_fields()
        self._clean_form()
        self._post_clean()

點擊self._clean_fields()進入

def _clean_fields(self):
        for name, field in self.fields.items():
              # self.fields：類似一個字典
              #for name, field in self.fields.items():解釋分別獲取self.fields的鍵和值分別賦值給 name, field
            # value_from_datadict() gets the data from the data dictionaries.
            # Each widget type knows how to retrieve its own data, because some
            # widgets split data over several HTML fields.
            if field.disabled:
                value=self.get_initial_for_field(field, name)
            else:
                value=field.widget.value_from_datadict(self.data, self.files, self.add_prefix(name))
            try:
                if isinstance(field, FileField):  # 如果是文件字段
                    initial=self.get_initial_for_field(field, name)
                    value=field.clean(value, initial)
                else:  #   field.clean(value) 之后Dbug運行檢查，為循環(huán)判斷錯誤
                    value=field.clean(value)
                self.cleaned_data[name]=value
                if hasattr(self, 'clean_%s' % name):
                    value=getattr(self, 'clean_%s' % name)()
                    self.cleaned_data[name]=value
            except ValidationError as e:
                self.add_error(name, e)

#科技##python##一起學python##Python 語言##Python入門推薦#

單的工作過程

表單的信息發(fā)送與處理過程可以簡單的進行圖示，如下圖。

以注冊會員為例，用戶在自己的電腦上打開相應的注冊表單頁面填寫信息，完成填寫后點擊提交按鈕，也就是圖中1所示過程。

這時瀏覽器會將這些信息發(fā)送給處理這些信息的服務器，服務器上有使用類似asp或php寫成的相應的處理程序，處理完成后，生成一個反饋信息，也就是2到3的過程。

然后服務器將處理后的信息發(fā)送給個人電腦，個人電腦在瀏覽器上通過一個新頁面來提示用戶處理結(jié)果。

這里就涉及到一個問題，一個網(wǎng)站會有針對不同用戶的信息注冊表單以及相應的信息處理程序，比如我們注冊頭條號就有"個人"、"企業(yè)"、"媒體"和"國家機構(gòu)"的區(qū)分。如何使不同的表單找到相應的處理程序呢？在<form>標簽中，有一個action屬性就是為這個表單信息指定處理程序的。

<form>中的action屬性

調(diào)用程序

<form>的action屬性實際上就是為表單提示處理程序所在的路徑，如果程序和頁面在一個服務器中存儲，那使用相對路徑即可，如果在其他服務器，則要使用絕對路徑。示例代碼如下：

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

這段代碼中的"form_action.asp"程序和這個表單頁面在一個文件夾中，故直接寫名稱即可調(diào)用。

發(fā)送郵件

action屬性除了調(diào)用程序外，也可以發(fā)送郵件，示例代碼如下：

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件發(fā)送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20"><br />
電郵：<br /><input type="text" name="mail" value="yourmail" size="20"><br />
內(nèi)容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="發(fā)送">
<input type="reset" value="重置">
</form>

這段代碼中。發(fā)送郵件的寫法是這樣的：action="MAILTO:someone@w3school.com.cn"，通過MAILTO:告訴瀏覽器，這里要發(fā)送郵件！然后輸入相應的郵箱地址，這樣就會把表單中的信息以郵件的形式發(fā)送到相應的郵箱中了。

大家可以把郵箱地址改成自己的郵箱試一下，瀏覽器會讓大家選擇發(fā)送郵件的程序。如圖所示：

使用這個功能我們可以寫一個簡單的郵件發(fā)送頁面，示例代碼如下：

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主題：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>

這樣的寫法大家可能會發(fā)現(xiàn)問題，即如果一個網(wǎng)站注冊用戶超過100人以后，靠這種手動輸入用戶郵箱的方法發(fā)送郵件簡直就是折磨人啊！

實際上，在網(wǎng)站中，我們會把會員或注冊用戶的郵箱存在數(shù)據(jù)庫中，通過調(diào)用數(shù)據(jù)庫中的用戶郵箱的程序語句來替換action中的具體郵箱地址即可，再通過程序，可以針對全部用戶或部分用戶進行群發(fā)信息。

其中，enctype屬性是向服務器聲明上傳信息的形式，也就是向服務器說明發(fā)送的數(shù)據(jù)到底是數(shù)字還是英文還是中文還是編程語句。專業(yè)一些的說法是"規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對其進行編碼。"

全部屬性值有三個，如圖所示，大家可以簡要理解一下。

除此之外，我們還發(fā)現(xiàn)一個屬性叫做method（方法），通過上面的示例代碼可知，method屬性有兩個屬性值，一個是get一個是post，這是什么意思呢？

信息上傳的兩種方法

<form>中的method標簽即為表單信息指定相應的發(fā)送方法。

方法有兩種，一種叫g(shù)et，這種方法通常用來發(fā)送簡短的且低安全要求的信息，特點是速度比較快。

post經(jīng)常用來發(fā)送體積較大的信息，如果發(fā)送一些對安全性要求高的信息，html的官方說明中建議使用post方法。

我個人認為，現(xiàn)階段大家能記住這兩個方法的主要特點即可。這一篇的內(nèi)容實際上也是前端學習者對服務器端的運行的了解內(nèi)容。

下面為大家附上更為專業(yè)的講解，看不懂也沒關(guān)系，盡量讀，至少能被專業(yè)詞匯洗禮一下!

method 屬性

瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務器進行處理。共有兩種方法：POST 方法和 GET 方法。

如果采用 POST 方法，瀏覽器將會按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與 action 屬性中指定的表單處理服務器建立聯(lián)系，一旦建立連接之后，瀏覽器就會按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務器。

在服務器端，一旦 POST 樣式的應用程序開始執(zhí)行時，就應該從一個標志位置讀取參數(shù)，而一旦讀到參數(shù)，在應用程序能夠使用這些表單值以前，必須對這些參數(shù)進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數(shù)。

另一種情況是采用 GET 方法，這時瀏覽器會與表單處理服務器建立連接，然后直接在一個傳輸步驟中發(fā)送所有的表單數(shù)據(jù)：瀏覽器會將數(shù)據(jù)直接附在表單的 action URL 之后。這兩者之間用問號進行分隔。

一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務器只接受其中一種方法提供的數(shù)據(jù)。可以在 <form> 標簽的 method （方法）屬性中指明表單處理服務器要用方法來處理數(shù)據(jù)，使 POST 還是 GET。

POST 還是 GET？

如果表單處理服務器既支持 POST 方法又支持 GET 方法，那么你該選擇哪種方法呢？下面是有關(guān)這方面的一些規(guī)律：

如果希望獲得最佳表單傳輸性能，可以采用 GET 方法發(fā)送只有少數(shù)簡短字段的小表單。

一些服務器操作系統(tǒng)在處理可以立即傳遞給應用程序的命令行參數(shù)時，會限制其數(shù)目和長度，在這種情況下，對那些有許多字段或是很長的文本域的表單來說，就應該采用 POST 方法來發(fā)送。

如果你在編寫服務器端的表單處理應用程序方面經(jīng)驗不足，應該選擇 GET 方法。如果采用 POST 方法，就要在讀取和解碼方法做些額外的工作，也許這并不很難，但是也許你不太愿意去處理這些問題。

如果安全性是個問題，那么我們建議選用 POST 方法。GET 方法將表單參數(shù)直接放在應用程序的 URL 中，這樣網(wǎng)絡窺探者可以很輕松地捕獲它們，還可以從服務器的日志文件中進行摘錄。如果參數(shù)中包含了信用卡帳號這樣的敏感信息，就會在不知不覺中危及用戶的安全。而 POST 應用程序就沒有安全方面的漏洞，在將參數(shù)作為單獨的事務傳輸給服務器進行處理時，至少還可以采用加密的方法。

如果想在表單之外調(diào)用服務器端的應用程序，而且包括向其傳遞參數(shù)的過程，就要采用 GET 方法，因為該方法允許把表單這樣的參數(shù)包括進來作為 URL 的一部分。而另一方面，使用 POST 樣式的應用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程，其中傳輸?shù)膬?nèi)容不能作為傳統(tǒng) <a> 標簽的內(nèi)容。

以上內(nèi)容來自W3school

今天的內(nèi)容結(jié)束了，這一篇內(nèi)容實踐的東西比較少，主要是閱讀與了解。

至此，HTML表單部分的講解就算告于段落了，如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作

個表單的form標簽是必不可少的，所有的表單元素都應該被他包含。一個頁面可能有多個表單，就需要對每個表單的區(qū)域進行分組，防止表單信息混雜。

目標

表單的完整結(jié)構(gòu)？
表單內(nèi)如何進行元素分組？

表單

可以在一個網(wǎng)頁中收集用戶的數(shù)據(jù)，比如填寫用戶注冊數(shù)據(jù)、留言板、評論等內(nèi)容。

Form標簽

一個表單的form標簽是必不可少的，所有的表單元素都應該被他包含。

<form >
	<input type="text" />			
</form>

一個網(wǎng)頁可能會有多個表單，就需要聲明每個表單的區(qū)域，防止表單信息混雜。

以下就是兩個表單，他們之間的表單元素就會跟隨自己的表單。

兩個表單

分組

有時候，表單內(nèi)的元素過多，就需要將他們進行分類。

fieldset標簽可以將表單內(nèi)的相關(guān)元素分組。

legend標簽是為 fieldset元素定義標題。

<fieldset >
	<legend>學生信息</legend>
	姓名：<input type="text" /><br>
	班級：<input type="text" /><br>			
</fieldset>

分組

分組完成

總結(jié)

思維導圖

在線咨詢

上一篇：怎樣使用requests模塊抓取網(wǎng)頁？
下一篇：Python 爬蟲正則表達式和re庫，及re庫的基本

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商