整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
章来源于公众号【Python野路子】
HTML表单是网站交互性的经典方式，本章将记录如何用Django对用户提交的表单数据进行处理。
站在前端角度，form表单是HTML中用于提交数据给服务器的一个标签，所有的表单元素(input/textarea/button...)都要放在form标签当中，还有以下参数：
Django中的表单不是html中的那个表单，这里是指Django中的组件名叫表单，主要做以下2件事：
1）表单验证数据的合法性。
2）通渲染表单模板；
Form类在from django import forms中，使用时需要定义一个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里面定义的字段：
2）cleaned_data()获取满足Form校验规则的字段， 使用cleaned_data必须执行完is_valid()方法。
3）如果表单校验没有通过，form对象则会产生一个errors属性，这个属性包括所有的验证错误信息。我们可以获取错误信息传递给前端。
必须要执行完is_valid函数，否则errors是不会包含错误。
在表单中，创建字段跟模型是一模一样的，但是没有null=True（是否接受空值NULL，默认值False）或者blank=True（是否接受空白内容，默认为False）等这几种参数了，有的参数是required=True/False(请求能否为空，True不能为空，默认为True)。
使用Field可以是对数据验证的第一步。你期望这个提交上来的数据是什么类型，那么就使用什么类型的Field。
CharField
用来接收文本。参数：
EmailField
用来接收邮件，会自动验证邮箱格式是否合法。错误信息的key：required、invalid。
FloatField
用来接收浮点类型，并且如果验证通过后，会将这个字段的值转换为浮点类型。参数：
错误信息的key：required、invalid、max_value、min_value。
IntegerField
用来接收整形，并且验证通过后，会将这个字段的值转换为整形。参数：
错误信息的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类中的各个Field字段其实都有一些基本的验证器，如果表单中的某个字段想要额外添加一些验证功能，可以指定validators参数给字段添加一些验证器，或者给这个字段定义一个额外的形如clean_[字段名]自定义验证方法。
内置验证器通过字段的validators参数指定对应的验证器列表即可，Django内置的验证器都在django.core.validators中，常用的内置验证器：
系统自带表单校验规则，有时无法满足我们的需求，比如在注册的表单验证中，我们需要验证用户是否已经被注册过了，那么这个时候就需要去数据库查询判断才知道，这个时候我们可以对某个字段，进行自定义的验证。
需要针对某个字段进行特殊验证时，可以在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，否则自定义的。
通过上面我们发现，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文件：
<link rel="stylesheet" href="css/a.css">
<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表单
*请认真填写需求信息，我们会在24小时内与您取得联系。
