「Django框架」-Form表單組件

章來源于公眾號【Python野路子】

HTML表單是網站交互性的經典方式，本章將記錄如何用Django對用戶提交的表單數據進行處理。

HTML中的表單

站在前端角度，form表單是HTML中用于提交數據給服務器的一個標簽，所有的表單元素(input/textarea/button...)都要放在form標簽當中，還有以下參數：

form的method參數用于設置表單的提交方式，默認使用GET；
action用于設置表單的提交url，如果不寫或者保持空字符串，那么將使用當前的URL，建議盡量指定一個url，因為有些瀏覽器可能兼容問題，不填是不能獲取到對應的action的。

Django中的表單

Django中的表單不是html中的那個表單，這里是指Django中的組件名叫表單，主要做以下2件事：

1）表單驗證數據的合法性。

2）通渲染表單模板；

Form

Form類在from django import forms中，使用時需要定義一個Form的子類，相當于將請求的表單數據封裝到一個特殊的類中，并自動完成一些數據的驗證工作。

Form基本使用

1）先在某個應用app下，新建一個forms.py的文件(類似前面學過的views.py和urls.py在對應app應用下)。

2）在里面定義一個表單類，繼承自django.forms.Form

 from django import forms

3）在表單類中，創建字段與模型類類似，但是沒有null=True（是否接受空值NULL，默認值False）或者blank=True（是否接受空白內容，默認為False）等這幾種參數了，有的參數是required=True/False(請求能否為空，True不能為空，默認為True)。

from django import forms

class RegisterForm(forms.Form):
    # label屬性是form表單中特有的屬性，代表這個字段的描述，這個屬性類似于模型類中的verbose_name屬性
    username = forms.CharField(label=u'用戶名', max_length=20, min_length=3)
    # 存儲到數據庫的密碼，是一個加密后的字符串，但是這里是通過前端傳輸過來的，并沒進行加密
    password = forms.CharField(label=u'密碼', max_length=20, min_length=8)

4）表單生成HTML表單元素。

# views.py

class RegisterView(View):
    def get(self, request):
        # 如果需要使用django表單渲染html頁面
        # 實例化該表單模型，傳遞給前端
        form = RegisterForm()
        return render(request, 'register_form.html', {'form': form})

    def post(self, request):
        # 如果不使用django表單,需要一個一個的值取出來，并且需要自己寫對應的驗證
        username = request.POST.get('username')
        password = request.POST.get('password')
        return render(request, 'register_form.html', locals())

<!-- register_form.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% if username %}
        提交的post數據:
        {{ username }}
        {{ password }}
    {% else %}
        <form action = "{% url "user:register" %}" method="post">
            {% csrf_token %}
            {{ form }}  <!--會自動識別表單屬性的 -->
            <input type="submit" vlaue='注冊'>
        </form>
    {% endif %}
</body>
</html>

注意：使用Django的Form類生成的表單，不包含form和submit按鈕兩個標簽，需要手動添加。

一般用于生成HTML表單元素很少使用，尤其在現在前后分離趨勢下，這個功能很雞肋，把前端該做的事情放到后臺來實現，增加了代碼的耦合性，也增加了服務器的壓力。

我們一般使用forms組件的校驗功能，比如賬號長度必須6~12位，密碼長度必須為8~20位，且必須含大小寫字母，我們可以一個個獲取前端傳過來的字段進行一個個校驗，如果字段比較多，如果一個個單獨校驗，那比較繁瑣，那我們可以使用django提供的forms組件，我們先來看個簡單的。

# forms.py
'''
forms.py的作用
它是專門編寫你的forms配置的模型
forms.py本身命名沒有要求，你可以為任意名稱, 但是我們一般約定它叫forms，代表這個文件是專門處理該APP下處理表單組件的
'''
from django import forms

class RegisterForm(forms.Form):
    username = forms.CharField(max_length=20, min_length=3)
    password = forms.CharField(max_length=20, min_length=8)

# views.py

class RegisterView(View):
    def get(self, request):
        # 如果需要使用django表單渲染html頁面
        # 實例化該表單模型，傳遞給前端
        form = RegisterForm()
        return render(request, 'register_form.html', {'form': form})

    def post(self, request):
        # 滿足Form里面
        form = RegisterForm({'username': 'admin', 'password': '12345678'})
        print(form.is_valid())  # True
        print(form.cleaned_data)  # {'username': 'admin', 'password': '12345678'}，輸出全部校驗正確的字段
        print(form.errors)

        # 其中一個不滿足，例如密碼長度少于8
        form = RegisterForm({'username': 'admin', 'password': '12345'})
        print(form.is_valid())  # False
        print(form.cleaned_data)  #  {'username': 'admin'}, 輸出校驗正確的字段
        print(form.errors)
        '''
        <ul class="errorlist">
            <li>password
                <ul class="errorlist">
                    <li>Ensure this value has at least 8 characters (it has 5).</li>
                </ul>
            </li>
        </ul>
        '''
        print(type(form.errors))  # <class 'django.forms.utils.ErrorDict'>
        print(form['password'].errors)
        # <ul class="errorlist"><li>Ensure this value has at least 8 characters (it has 5).</li></ul>
        print(form.errors.get('password'))
        # <ul class="errorlist"><li>Ensure this value has at least 8 characters (it has 5).</li></ul>
        print(form.errors.get_json_data())
        # {'password': [{'message': 'Ensure this value has at least 8 characters (it has 5).', 'code': 'min_length'}]}


        # 比Form少一個字段
        form = RegisterForm({'username': 'admin'})
        print(form.is_valid())  # False
        print(form.cleaned_data)  # {'username': 'admin'}
        print(form.errors)
        '''
        <ul class="errorlist">
            <li>password
                <ul class="errorlist">
                    <li>This field is required.</li>
                </ul>
            </li>
        </ul>        
        '''
        print(form.errors.get('password'))
        # <ul class="errorlist"><li>This field is required.</li></ul>
        
        print(form.errors.get_json_data())
        # {'password': [{'message': 'This field is required.', 'code': 'required'}]}


        # 比Form多一個字段，例如多個age
        form = RegisterForm({'username': 'admin', 'password': '12345678', 'age': 18})
        print(form.is_valid())  # True
        print(form.cleaned_data)  # {'username': 'admin', 'password': '12345678'}, 比Form多的字段不輸出
        print(form.errors)

        return render(request, 'register_form.html', locals())

我們這里先傳幾個固定的參數來進行測試，通過上面測試，我們可以總結下。

1）使用is_valid()方法可以驗證用戶提交的數據是否合法，這個方法會返回一個bool值，合法則返回True，否則返回False。其中在實例化一個form對象時，傳的參數必須與Form里面定義的字段：

傳的字段名一樣；
字段值必須滿足Form里面的校驗規則；
傳的參數個數等于或大于 Form定義的個數。

2）cleaned_data()獲取滿足Form校驗規則的字段，使用cleaned_data必須執行完is_valid()方法。

3）如果表單校驗沒有通過，form對象則會產生一個errors屬性，這個屬性包括所有的驗證錯誤信息。我們可以獲取錯誤信息傳遞給前端。

form.errors：這個屬性獲取的錯誤信息是一個包含html標簽的錯誤信息。
通過form['屬性名'].erros或form.errors.get('屬性名')訪問對應的錯誤。
通過form.errors.get_json_data()或form['屬性名'].erros.get_json_data()可以將錯誤消息轉換成JSON數據。
默認的錯誤信息是英文不夠人性化，我們可以通過在Field中添加一個error_messages的dict類型的參數，然后根據屬性名設置對應的message，例如以下代碼：password = forms.CharField(label=u'密碼', max_length=20, min_length=8, error_messages={'required':u'密碼不能為空'})

必須要執行完is_valid函數，否則errors是不會包含錯誤。

常用Field字段

在表單中，創建字段跟模型是一模一樣的，但是沒有null=True（是否接受空值NULL，默認值False）或者blank=True（是否接受空白內容，默認為False）等這幾種參數了，有的參數是required=True/False(請求能否為空，True不能為空，默認為True)。

使用Field可以是對數據驗證的第一步。你期望這個提交上來的數據是什么類型，那么就使用什么類型的Field。

CharField

用來接收文本。參數：

max_length：這個字段值的最大長度。
min_length：這個字段值的最小長度。
required：這個字段是否是必須的。默認是True，必須的。
error_messages：字段驗證失敗時給出的錯誤提示信息，需要傳入一個字典，字典中需要指定對應驗證條件的錯誤提示信息，如error_messages={'max_length': '最多只能有100個字符！'}表示指定文本最大長度不滿足時給出提示信息。

EmailField

用來接收郵件，會自動驗證郵箱格式是否合法。錯誤信息的key：required、invalid。

FloatField

用來接收浮點類型，并且如果驗證通過后，會將這個字段的值轉換為浮點類型。參數：

max_value：最大的值。
min_value：最小的值。

錯誤信息的key：required、invalid、max_value、min_value。

IntegerField

用來接收整形，并且驗證通過后，會將這個字段的值轉換為整形。參數：

max_value：最大的值。
min_value：最小的值。

錯誤信息的key：required、invalid、max_value、min_value。

URLField

用來接收url格式的字符串。錯誤信息的key：required、invalid。

FileField

用來接收文件，allow_empty_file=False是否允許空文件。

ImageField

接收圖片，注意需要PIL模塊，pip3 install Pillow，以上2個字典使用時，需要注意2點：

form表單中enctype="multipart/form-data"
view函數中my_form= MyForm(request.POST, request.FILES)

驗證器

Form類中的各個Field字段其實都有一些基本的驗證器，如果表單中的某個字段想要額外添加一些驗證功能，可以指定validators參數給字段添加一些驗證器，或者給這個字段定義一個額外的形如clean_[字段名]自定義驗證方法。

內置驗證器

內置驗證器通過字段的validators參數指定對應的驗證器列表即可，Django內置的驗證器都在django.core.validators中，常用的內置驗證器：

MaxValueValidator：最大值。
MinValueValidator：最小值。
MaxLengthValidator：最大長度。
MinLengthValidator：最小長度。
EmailValidator：是否為郵箱格式。
URLValidator：是否為url格式。
RegexValidator：是否符合正則表達式，使用時傳入一個正則表達式即可。
FileExtensionValidator：驗證文件名后綴是否符合要求，使用時傳入一個文件名后綴的列表，如['txt', 'csv']，表示只允許上傳這些類型的文件。

自定義驗證

系統自帶表單校驗規則，有時無法滿足我們的需求，比如在注冊的表單驗證中，我們需要驗證用戶是否已經被注冊過了，那么這個時候就需要去數據庫查詢判斷才知道，這個時候我們可以對某個字段，進行自定義的驗證。

需要針對某個字段進行特殊驗證時，可以在Form表單類中定義一個clean_[字段名]的方法，就會自動執行這個方法進行驗證了，如果不符合要求，直接拋出異常即可，符合要求則返回對應的值。如果想要針對多個字段之間的驗證，可以重寫clean()方法，當所有字段的驗證都通過后就會執行這個方法。

# form.py

from django import forms
from .models import Account

class RegisterForm(forms.Form):
    # label 屬性是form表單中特有的屬性，代表這個字段的描述，這個屬性類似于模型類中的verbose_name屬性
    username = forms.CharField(label=u'用戶名', min_length=3, max_length=18,
                               error_messages={'required': u'用戶名不能為空',
                                               'min_length': u'用戶名不少于3位',
                                               'max_length': u'用戶名不超過18位'
                                               })

    password = forms.CharField(label=u'密碼', required=True, min_length=6, max_length=16,
                               error_messages={'required': u'密碼不能為空', 'min_length': u'密碼不少于6位',
                                               'max_length': u'密碼不超過16位'})
    confirm_pwd = forms.CharField(label=u'確認密碼', min_length=6, max_length=16,
                                  error_messages={'required': u'確認密碼不能為空', 'min_length': u'密碼不少于6位',
                                               'max_length': u'密碼不超過16位'})
    # 可以不填
    email = forms.EmailField(label=u'郵箱', required=False)  # required 請求能否為空，True不能為空，默認為True

    # 表單自定義錯誤消息：重寫方法clean_field（field是一個屬性名），可以自定義針對某一個field的驗證機制，一個屬性一個對應方法
    # clean() 或者 clean_xxx() 會在執行 form.is_valid() 的過程中被調用
    def clean_username(self):
        # 當字段的基本驗證通過后，會將數據存儲在cleaned_data中
        username = self.cleaned_data['username']
        if Account.objects.filter(username=username).exists():
            # 如果這里判斷有多個錯誤存在，則使用add_error方法。
            self.add_error('username', '該用戶名已使用，請重新選擇！')
            # 如果只是單個錯誤，使用ValidationError，否則這里raise拋出去了，后面就不能執行了
            #raise forms.ValidationError('用戶已存在')

        # 敏感詞匯
        if username.find('mmp') >= 0:
            self.add_error('username', '存在敏感字符')
            
  # 需要返回處理后的值
        return username

    def clean_confirm_pwd(self):  #不能用clean_password，因為加載這個時候，confirm_pwd還沒加載出來，是沒有值的。
        pwd = self.cleaned_data['password']
        confirm_pwd = self.cleaned_data['confirm_pwd']

        if pwd != confirm_pwd:
            raise forms.ValidationError('兩次密碼不一致', code='')

        return pwd
    
    def clean(self):
        # 執行這個方法時表示所有字段都已驗證成功，當然，需要先調用父類的clean()方法
        cleaned_data = super().clean()
        # 當字段的基本驗證通過后，會將數據存儲在cleaned_data中
        # 獲取需要驗證的字段
        
        ...
        # 需要返回處理后的值
        return cleaned_data      

    def get_error_dict(self):
        # 提取錯誤信息
        if hasattr(self, 'errors'): #hasattr() 函數用于判斷對象是否包含對應的屬性。
            errors = self.errors.get_json_data()
            print(type(errors)) # <class 'dict'>
            print(errors)
            # {'username': [{'message': '用戶名不能為空', 'code': 'required'}],
            # 'password': [{'message': '密碼不能為空', 'code': 'required'}],
            # 'confirm_pwd': [{'message': '確認密碼不能為空', 'code': 'required'}]}

            err_msg_dict = {}
            for key, message in errors.items():
                print(key, message) # username [{'message': '用戶名不能為空', 'code': 'required'}]
                msg_list = []
                for msg in message:
                    print(msg) # {'message': '用戶名不能為空', 'code': 'required'}
                    msg_list.append(msg['message'])

                err_msg_dict[key] = msg_list

            print(err_msg_dict)  # {'username': ['用戶名不能為空'], 'password': ['密碼不能為空'], 'confirm_pwd': ['確認密碼不能為空']}

            return err_msg_dict

        return None


    def get_error_str(self):
        # 提取錯誤信息
        if hasattr(self, 'errors'): #hasattr() 函數用于判斷對象是否包含對應的屬性。
            errors = self.errors.get_json_data().values()  # 獲取字典值部分
            print(errors)
            #dict_values([[{'message': '用戶名不能為空', 'code': 'required'}],
            # [{'message': '密碼不能為空', 'code': 'required'}], [{'message': '確認密碼不能為空', 'code': 'required'}]])

            err_msg_list = []
            for itme in errors:
                print(itme) # [{'message': '用戶名不能為空', 'code': 'required'}]

                err_msg_list.append(itme[0].get('message'))

            print(err_msg_list) # ['用戶名不能為空', '密碼不能為空', '確認密碼不能為空']

            err_msg_str = ';'.join(err_msg_list)  # 將錯誤信息通過;拼接成字符串

            print(err_msg_str)  # 用戶名不能為空;密碼不能為空;確認密碼不能為空

            return err_msg_str

        return None

視圖views.py

class RegisterView(View):
    def get(self, request):
        # 如果需要使用django表單渲染html頁面
        # 實例化該表單模型，傳遞給前端
        return render(request, 'register_form.html')

    def post(self, request):
        print(request.POST) #<QueryDict: {'username': ['admin'], 'password': ['6666'], 'confirm_pwd': ['222'], 'email': ['']}>

        register_form = RegisterForm(request.POST)

        if register_form.is_valid():
            # 使用cleaned_data 必須執行完is_valid 且返回為True才能獲取數據,保存用戶提交上來的數據
            print(register_form.cleaned_data)
            username = register_form.cleaned_data['username']
            password = register_form.cleaned_data['password']

            # 利用字典解包方式
            params = {'username': username, 'password': password}
            Account.objects.create(**params)

            return HttpResponse('注冊成功')

        else:
            print(register_form.errors)
            # <ul class="errorlist"><li>username<ul class="errorlist"><li>用戶名不能為空</li></ul></li></ul>
            print(register_form.errors.get_json_data())
            # {'username': [{'message': '用戶名不能為空', 'code': 'required'}]}

            print(register_form.errors.get('username'))  # <ul class="errorlist"><li>用戶名不能為空</li></ul>

            print(register_form.errors.get('username').get_json_data()) # [{'message': '用戶名不能為空', 'code': 'required'}]

            err_msg_dict = register_form.get_error_dict()
            # {'username': ['用戶名不能為空'], 'password': ['密碼不能為空'], 'confirm_pwd': ['確認密碼不能為空']}

            return render(request, 'register_form.html', err_msg_dict)

模板register_form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="{% url "user:register" %}" method="post">
    用戶名：<input type="text" name="username"><span>{{ username.0 }}</span>
    密  碼：<input type="password" name="password"><span>{{ password.0 }}</span>
    確認密碼：<input type="password" name="confirm_pwd"><span>{{ confirm_pwd.0 }}</span>
    郵  箱：<input type="email" name="email">

    <input type="submit" vlaue='注冊'>
</form>
</body>
</html>

自定義錯誤信息，可以通過在定義表單類是設置相關屬性，校驗不通過則會報默認錯誤。我們可以通過設置error_messages字典來設置對應message。也可以自定義錯誤信息。

不管那種必須要執行完is_valid函數，否則執行相關errors是不會包含錯誤，form類的運行順序是init，clean，validte，save，如果遇到類似錯誤，比如說不能為空，最大最小長度時，在error_messages寫了錯誤信息，也自定義了表單錯誤信息，則required=True時調用error_message，否則自定義的。

ModelForm

通過上面我們發現，Form表單中的字段與模型中的字段基本是一模一樣的，表單中需要驗證的數據，也就是模型中需要保存的，我們可以將模型中的字段與表單中的字段進行綁定，例如上面RegisterForm改成繼承forms.ModelForm。

# models.py
class Account(models.Model):
    username = models.CharField(max_length=16)
    password = models.CharField(max_length=20)

    class Meta:
        db_table = 'tb_account'

    def __str__(self):
        return self.username
    
# forms.py
class RegisterForm(forms.ModelForm):
    """
      1.補充 Model 沒有的 Field 到表單，例如這里的confirm_pwd
      2.覆蓋 Model 中的 Field 定義
    """
    confirm_pwd = forms.CharField(label=u'確認密碼', min_length=6, max_length=16,
                                  error_messages={'required': u'確認密碼不能為空',                                   'min_length': u'密碼不少于6位', 'max_length': u'密碼不超過16位'})

    class Meta:
        model = Account  # 對應model中的類
        fields = '__all__'  # 說明要關聯類中的哪些字段，默認__all__關聯所有字段，如果不需要全部
        # exclude = ['avatar']  # 排除字段
        error_messages = {  # 自定義錯誤信息
            'username': {
                'max_length': '用戶名長度不超過16位',
                'required': "用戶名不能為空",
            },
            'password': {
                'max_length': '用戶名長度不超過16位',
                'required': "用戶名不能為空",
            }
        }

    def clean_confirm_pwd(self): 
        pwd = self.cleaned_data['password']
        confirm_pwd = self.cleaned_data['confirm_pwd']

        if pwd != confirm_pwd:
            raise forms.ValidationError('兩次密碼不一致', code='')

        return pwd

    
# views.py
from .forms import RegisterForm

from hashlib import md5

class RegisterView(View):
    def get(self, request):
        # 如果需要使用django表單渲染html頁面
        # 實例化該表單模型，傳遞給前端
        return render(request, 'register_form.html')

    def post(self, request):
        print(request.POST)

        register_form = RegisterForm(request.POST)

        if register_form.is_valid():
            # 使用cleaned_data 必須執行完is_valid 且返回為True才能獲取數據,保存用戶提交上來的數據
            print(register_form.cleaned_data)
            # {'username': 'admin666', 'password': '1q2w3e4r', 'confirm_pwd': '1q2w3e4r'}

            register_form.save()  # 這里save即使多了個confirm_pwd沒關系，是按照model字段來的。

            return HttpResponse('注冊成功')

        else:
            print(register_form.errors.get_json_data())
            #{'username': [{'message': '用戶名不能為空', 'code': 'required'}],
            # 'password': [{'message': '用戶名不能為空', 'code': 'required'}],
            # 'confirm_pwd': [{'message': '確認密碼不能為空', 'code': 'required'}]}

            print(register_form.errors.get('username').get_json_data())  # [{'message': '用戶名不能為空', 'code': 'required'}]

            return render(request, 'register_form.html')

RegisterForm是繼承自forms.ModelForm，然后在表單中定義了一個Meta類，在Meta類中指定了model=Account，以及fields="__all__"，這樣就可以將Account模型中所有的字段都復制過來，進行驗證。如果只想針對其中幾個字段進行驗證，那么可以給fields指定一個列表，將需要的字段寫進去。

如果要驗證的字段比較多，只是除了少數幾個字段不需要驗證，那么可以使用exclude來代替fields。

與普通的Form表單驗證類型類似，ModelForm表單的驗證在調用is_valid()或訪問errors屬性時隱式調用。

驗證時，可以在ORM模型的字段定義中指定validators參數，添加額外的驗證器即可。

自定義錯誤，因為字段都不是在表單中定義的，而是在模型中定義的，因此一些錯誤消息無法在字段中定義。那么這時候可以在Meta類中，定義error_messages，然后把相應的錯誤消息寫到里面去。

自定義校驗規則與Form表單一樣。

save保存，ModelForm還有save方法，可以在驗證完成后直接調用save方法，就可以將這個數據保存到數據庫中了。這個方法必須要在clean沒有問題后才能使用，如果在clean之前使用，會拋出異常。另外，我們在調用save方法的時候，如果傳入一個commit=False，那么只會生成這個模型的對象，而不會把這個對象真正的插入到數據庫中。比如表單上驗證的字段沒有包含模型中所有的字段，這時候就可以先創建對象，再根據填充其他字段，把所有字段的值都補充完成后，再保存到數據庫中，例如：

form = MyForm(request.POST)
if form.is_valid():
    article = form.save(commit=False)
    article.category = 'Python'
    article.save()
    return HttpResponse('succes')
else:
    print(form.get_errors())
    return HttpResponse('fail')

并且即使form的數據比model模型字段多也沒關系。

ModelForm的子類可以接受現有的模型實例作為關鍵字參數instance；如果提供此功能，則save()將更新該實例。如果沒有提供，save() 將創建模型的一個新實例。

# 修改表數據是，記得把instance信息也傳進去，不然是新建數據，而不是對某行數據進行修改。
article_form = ArticleAddForm(dict_data, instance=article)  # 指定給誰做修改
if article_form.is_valid():
    article_form.save()
    return json_status.result(message='文章更新成功')

#Django#

文章來源于公眾號【Python野路子】

、HTML標簽：表單標簽

1.1 表單概念：用于采集用戶輸入的數據的。用于和服務器進行交互。

1.2 語法：

form：用于定義表單的，可以定義一個范圍，范圍代表采集用戶數據的范圍

屬性：

action：指定提交數據的URL

method：指定提交方式

method分類：一共7種，2種比較常用

get：

1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議后講解)。

2. 請求參數大小是有限制的。

3. 不太安全。

post：

1. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議后講解)

2. 請求參數的大小沒有限制。

3. 較為安全。

注意：表單項中的數據要想被提交：必須指定其name屬性

二、表單項標簽：

2.1 input：可以通過type屬性值，改變元素展示的樣式

2.1.1 type屬性：

text：文本輸入框，默認值

placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息

password：密碼輸入框

radio:單選框

注意：

1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。

2. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值

3. checked屬性，可以指定默認值

checkbox：復選框

注意：

1. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值

2. checked屬性，可以指定默認值

file：文件選擇框

hidden：隱藏域，用于提交一些信息。

按鈕：

submit：提交按鈕。可以提交表單

button：普通按鈕

image：圖片提交按鈕

src屬性指定圖片的路徑

label：指定輸入項的文字描述信息

注意：

label的for屬性一般會和 input 的id屬性值對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。

select: 下拉列表，子元素option，指定列表項

textarea：文本域，cols指定列數，每一行有多少個字符，rows默認多少行。

三、CSS：頁面美化和布局控制

3.1 概念： Cascading Style Sheets 層疊樣式表

層疊：多個樣式可以作用在同一個html的元素上，同時生效

3.2 好處：

1. 功能強大

2. 將內容展示和樣式控制分離

3. 降低耦合度。解耦

4. 讓分工協作更容易

5. 提高開發效率

3.3 CSS的使用：CSS與html結合方式

3.3.1 內聯樣式：在標簽內使用style屬性指定css代碼

如：<div style="color:red;">hello css</div>

3.3.2 內部樣式：在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼

如：

<style>

div{

color:blue;

}

</style>

<div>hello css</div>

3.3.3 外部樣式

1. 定義css資源文件。

2. 在head標簽內，定義link標簽，引入外部的資源文件

如：

a.css文件：

div{

color:green;

}

html文件：

<div>hello css</div>

注意：

1,2,3種方式 css作用范圍越來越大

1方式不常用，后期常用2,3

3.4 css語法：

3.4.1 格式：

選擇器 {

屬性名1:屬性值1;

屬性名2:屬性值2;

...

}

* 選擇器:篩選具有相似特征的元素

* 注意：

* 每一對屬性需要使用；隔開，最后一對屬性可以不加；

3.5 css選擇器：篩選具有相似特征的元素

3.5.1 分類：

1. 基礎選擇器：

1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一

* 語法：#id屬性值{}

2. 元素選擇器：選擇具有相同標簽名稱的元素

* 語法：標簽名稱{}

* 注意：id選擇器優先級高于元素選擇器

3. 類選擇器：選擇具有相同的class屬性值的元素。

* 語法：.class屬性值{}

* 注意：類選擇器選擇器優先級高于元素選擇器

2. 擴展選擇器：

1. 選擇所有元素：

* 語法： *{}

2. 并集選擇器：

* 選擇器1,選擇器2{}

3. 子選擇器：篩選選擇器1元素下的選擇器2元素

* 語法：選擇器1 選擇器2{}

4. 父選擇器：篩選選擇器2的父元素選擇器1

* 語法：選擇器1 > 選擇器2{}

5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素

* 語法：元素名稱[屬性名="屬性值"]{}

6. 偽類選擇器：選擇一些元素具有的狀態

* 語法：元素:狀態{}

* 如： <a>

* 狀態：

* link：初始化的狀態

* visited：被訪問過的狀態

* active：正在訪問狀態

* hover：鼠標懸浮狀態

3.6 css屬性：

1. 字體、文本

* font-size：字體大小

* color：文本顏色

* text-align：對其方式

* line-height：行高

2. 背景

* background：

3. 邊框

* border：設置邊框，符合屬性

4. 尺寸

* width：寬度

* height：高度

5. 盒子模型：控制布局

* margin：外邊距

* padding：內邊距

* 默認情況下內邊距會影響整個盒子的大小

* box-sizing: border-box; 設置盒子的屬性，讓width和height就是最終盒子的大小

* float：浮動

* left

* right

單的作用就是采集用戶填寫的信息,將其發往服務器做相應的處理

表單的元素必須寫在form標簽中,一個form就是一個表單,表單中最重要的元素是input

input元素有一個type屬性,type的可選值有：1)button(普通按鈕)2checkbox(復選框)3text(單行文本框)4password(密碼框)5radio(單選按鈕)6image(圖片按鈕)7file(文件選擇框)8hidden(隱藏字段)9<input type="file" />submit(提交按鈕)10reset(重置按鈕)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>表單元素</title>
</head>
<body>
    <form action="http://www.bd.com/register.aspx" method="post">
        用 戶 名:<input type="text" value="張三" size="8" name="txtName" /><br /><br />
        用戶密碼:<input type="password" size="8" /><br /><br />
        用戶性別:<input type="radio" name="rdGender" value="1" />男<input type="radio" name="rdGender"
            value="0" />女<br /><br />
        興趣愛好:<input type="checkbox" value="0" checked="checked" />乒乓球<input type="checkbox" value="1" />籃球<input
            type="checkbox" value="2" />排球<br /><br />
        省市選擇:省:<select>
            <option value="0">北京</option>
            <option selected="selected" value="1">河南</option>
            <option value="2">河北</option>
        </select>
        市:<select>
            <option value="0">密云</option>
            <option selected="selected" value="1">鄭州</option>
            <option value="2">石家莊</option>
        </select><br /><br />
        上傳文件:<input type="file" /><br/><br/>
        <textarea cols="50" rows="10" readonly="readonly">
				北京百度網訊科技有限公司
				統一社會信用代碼/注冊號：91110000802100433B
				注冊資本：1342128萬元
				法定代表人：梁志祥
				成立日期：2001-06-05
				營業期限：2001-06-05 至 長期
				企業類型：有限責任公司(自然人投資或控股)
				注冊地址：北京市海淀區上地十街10號百度大廈2層
				經營范圍：技術轉讓、技術咨詢、技術服務、技術培訓、技術推廣；設計、開發、銷售計算機軟件；經濟信息咨詢；利用www.baidu.com、www.hao123.com(www.hao222.net、www.hao222.com)網站發布廣告；設計、制作、代理、發布廣告；貨物進出口、技術進出口、代理進出口；醫療軟件技術開發；委托生產電子產品、玩具、照相器材；銷售家用電器、機械設備、五金交電（不含電動自行車）、電子產品、文化用品、照相器材、計算機、軟件及輔助設備、化妝品、衛生用品、體育用品、紡織品、服裝、鞋帽、日用品、家具、首飾、避孕器具、工藝品、鐘表、眼鏡、玩具、汽車及摩托車配件、儀器儀表、塑料制品、花、草及觀賞植物、建筑材料、通訊設備、汽車電子產品、器件和元件、自行開發后的產品；預防保健咨詢；公園門票、文藝演出、體育賽事、展覽會票務代理；翻譯服務；通訊設備和電子產品的技術開發；計算機系統服務；車聯網技術開發；汽車電子產品設計、研發、制造（北京市中心城區除外）；演出經紀；人才中介服；經營電信業務；利用信息網絡經營音樂娛樂產品、演出劇（節）目、動漫產品、游戲產品（含網絡游戲虛擬貨幣發行）、表演、網絡游戲技法展示或解說（網絡文化經營許可證有效期至2020年04月17日）；因特網信息服務業務（除出版、教育、醫療保健以外的內容）；圖書、電子出版物、音像制品批發、零售、網上銷售。（市場主體依法自主選擇經營項目，開展經營活動；演出經紀、人才中介服務、利用信息網絡經營音樂娛樂產品、演出劇（節）目、動漫產品、游戲產品（含網絡游戲虛擬貨幣發行）、表演、網絡游戲技法展示或解說、經營電信業務以及依法須經批準的項目，經相關部門批準后依批準的內容開展經營活動；不得從事國家和本市產業政策禁止和限制類項目的經營活動。）
			</textarea><br /><br />
        <input type="button" value="按鈕" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

還有一些次要的表單元素以后需要用到再說;關于瀏覽器兼容性自己測試不再截圖

絕大多數表單元素必須有name與value屬性,這樣的表單元素才能將此元素的的value值傳遞給服務器;如果method屬性值為get,點擊submit這個按鈕時在網址中就能看到填寫的值

如果是radio(單選按鈕)name屬性值必須一樣,這樣此元素值就會只能選擇其中一個

button:只是一個普通按鈕,以后會通過JavaScript進行操作;submit:自動將填寫在此網頁表單元素的值發送給action指定的服務器相應的程序去處理;reset:將表單元素中填入的值還原為默認值

HTML表單

在線咨詢

上一篇：HTML5 <mark> 標簽
下一篇：多用途游戲娛樂新聞網站HTML5模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商