表单

HTML5+CSS3网页设计与制作案例教程表单第7章HTML5+CSS3网页设计与制作案例教程7.3表单基本元素7.1表单概述7.2建立表单form7.5通用的表单属性7.4input新增表单高级元素7.6综合实例——表单设计HTML5+CSS3网页设计与制作案例教程表单在网页中起着重要作用，它是与用户交互信息的主要手段。比如我们常用的用户注册、在线联系、在线调查表等都是表单的具体应用形式。新的HTML5对目前的Web表单进行了全面的提升，HTML5的一个重要的特性就是对表单的改进。过去，需要编写JavaScript以增强表单行为——例如，要求访问者提交表单之前必须填写某个字段。HTML5通过引入新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL以及定制模式的验证，让这一切变得很轻松。7.1表单概述HTML5+CSS3网页设计与制作案例教程在HTML中，只要在需要使用表单的地方插入成对的标记form和/form，就可以很简单地完成表单的插入。基本语法：7.2建立表单formformname=method=action=……表单元素（如文本框、单选按钮、复选框、列表框、文本区域等）……/formHTML5+CSS3网页设计与制作案例教程•name：该属性表示表单的名称。•method：该属性用来定义提交信息的方式，取值为post或get，默认为get。•action：该属性用来指定处理表单数据的程序文件所在的位置，当单击提交按钮后，就将表单信息提交给该文件进行处理。如下是一个建立表单的基本语句：formname=form1method=postaction=login.html/form语法说明：HTML5+CSS3网页设计与制作案例教程一个表单重要的两个组成部分表单域和表单按钮。表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮包括提交按钮、复位按钮和一般按钮。7.3表单基本元素HTML5+CSS3网页设计与制作案例教程7.3.1input标记inputname=type=/该标记可以在表单中定义单行文本框、单选按钮、复选框等表单元素。基本语法：HTML5+CSS3网页设计与制作案例教程不同的元素有不同的属性，详细的属性如表7-1所示。HTML5+CSS3网页设计与制作案例教程HTML5+CSS3网页设计与制作案例教程1.文本框和密码框文本框和密码框是表单设计里面最常用的两个表单元素，比如登录、注册等页面设计都会用到这两个表单元素。基本语法：inputtype=类型name=名称readonly=只读size=宽度maxlength=可输入字符数value=”默认值”/HTML5+CSS3网页设计与制作案例教程!DOCTYPEHTMLhtmlheadtitle文本框和密码框/title/headbodyform用户名：inputtype=textname=unamevalue=Mary/br/br/密码：inputtype=passwordname=upass/br/br/年龄:inputtype=textname=uagesize=3maxlength=3//form/body/html图7-2文本框和密码框浏览效果【例7-1】创建文本框和密码框（7-1.html）HTML5+CSS3网页设计与制作案例教程2.按钮在表单中常用的按钮有四种，分别是提交按钮、重置按钮、普通按钮和图片按钮。•提交按钮的type属性值为submit。•重置按钮就是让所有表单数据都还原到初始值。•普通按钮就是能生成一个按钮的形状，但单击按钮不会有任何操作，需要配合相关代码支持功能操作。•图片按钮当input标记的属性值为image时，就成为一个图像域，图像域相当于一个图片样式的提交按钮。基本语法：inputtype=imagesrc=图片的位置width=图片宽度height=图片的高度/HTML5+CSS3网页设计与制作案例教程!DOCTYPEHTMLhtmlheadtitle按钮/title/headbodyform用户名：inputtype=textname=unamevalue=Mary/br/br/密码：inputtype=passwordname=upass/br/br/年龄:inputtype=textname=uagesize=3maxlength=3/br/br/inputtype=submitvalue=提交按钮/inputtype=resetvalue=重置按钮/inputtype=buttonvalue=普通按钮onClick=window.alert('请输入用户信息')//form/body/html图7-3提交、重置和普通按钮浏览效果【例7-2】创建提交按钮、重置按钮和普通按钮（7-2.html）HTML5+CSS3网页设计与制作案例教程!DOCTYPEHTMLhtmlheadtitle图片按钮/title/headbodyform用户名：inputtype=textname=uname/br/br/密码：inputtype=passwordname=upass/br/br/年龄:inputtype=textname=uagesize=3maxlength=3/br/br/inputtype=imagesrc=images/submit.jpgwidth=120//form/body/html图7-4图像域的应用浏览效果【例7-3】创建图片按钮的实例（7-3.html）HTML5+CSS3网页设计与制作案例教程3.单选按钮单选按钮(radiobutton)是较小的圆形按钮，它允许用户从一个选项列表中选择单个选项。只需使用input元素并将type特性设置为radio，就可以创建单选按钮。在定义选项时，必须保证同一组的单选框的name属性值一样，这样才能在一组选项中作出一个选择。HTML5+CSS3网页设计与制作案例教程!DOCTYPEhtmlhtmlheadtitle单选按钮/title/headbodyformbr/br/性别br/br/inputtype=radioname=radio1value=男生checked=checked/男生br/br/inputtype=radioname=radio1value=女生/女生/form/body/html图7-5单选按钮浏览效果【例7-4】创建单选按钮（7-4.html）HTML5+CSS3网页设计与制作案例教程4.复选框复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时，要注意如果name值一样的话，用户所有选项会组合为一个数据进行提交。HTML5+CSS3网页设计与制作案例教程!DOCTYPEhtmlhtmlheadtitle复选框/title/headbodyformbr/br/个人爱好br/br/inputtype=checkboxname=checkgroupvalue=跳舞/跳舞br/br/inputtype=checkboxname=checkgroupvalue=唱歌/唱歌br/br/inputtype=checkboxname=checkgroupvalue=羽毛球/羽毛球br/br/inputtype=checkboxname=checkgroupvalue=乒乓球/乒乓球br/br//form/body/html图7-6复选框浏览效果【例7-5】创建复选框（7-5.html）HTML5+CSS3网页设计与制作案例教程5.文件域文件域类型用于文件上传。在设计网站时，有时会需要用户上传一些本地计算机上的一些文件。这时候使用文件域就会非常方便，可以让用户自行选择要上传的文件。HTML5+CSS3网页设计与制作案例教程!DOCTYPEhtmlhtmlheadtitle文件域/title/headbodyforminputtype=filename=user_file//form/body/html图7-7文件域浏览效果【例7-6】创建文件域的应用（7-6.html）HTML5+CSS3网页设计与制作案例教程6.hidden类型hidden类型可以定义一个隐藏的表单控件。在浏览器中，这个隐藏项用户是看不到的。通常情况下，设计者可以利用隐藏表单控件存储一些数据，可以当作一个页面变量。例如：inputtype=hiddenname=hiddenTextvalue=1000/HTML5+CSS3网页设计与制作案例教程7.3.2多行文字框textareatextarea和/textarea标记就用于定义一个多行文本域，常用于需要输入大量文字的地方，如留言、自我介绍等。由textarea创建的文本域对输入的文本长度没有任何限制，该区域在垂直方向和水平方向上都可以有滚动条。基本语法：textarearows=行数cols=列数这是多行文字框/textareaHTML5+CSS3网页设计与制作案例教程!DOCTYPEhtmlhtmlheadtitle多行文字框/title/headbodyform个人简介：textarearows=10cols=30name=txtarea简介：/textarea/form/body/html图7-8多行文字框浏览效果【例7-7】创建多行文字框（7-7.html）HTML5+CSS3网页设计与制作案例教程7.3.3列表selectoptiondatalist1.selectselect标记是和option标记配合使用的，一个option标记就是下拉菜单中的一项，select标记和option标记的属性分别如表7-4和表7-5所示。HTML5+CSS3网页设计与制作案例教程selectoptionvalue=列表项的值1列表项的说明1/option……optionvalue=列表项的值n列表项的说明n/option/selectHTML5+CSS3网页设计与制作案例教程!DOCTYPEhtmlhtmlheadtitle列表/title/headbodyformselect：selectoptionvalue=C++C++/optionoptionvalue=JavaJava/optionoptionvalue=HtmlHtml/option/select/form/body/html图7-9select列表浏览效果【例7-8】使用select列表（7-8.html）HTML5+CSS3网页设计与制作案例教程2.datalistdatalist虽然也可以生成列表，但是不能独立使用这个表单。datalist标记必须和一个可输入文本框类型一起配合使用。基本语法：inputtype=textlist=要绑定的datalist的idname=名称/datalistid=列表idoptionlabel=列表项的说明1value=列表项的值1/……optionlabel=列表项的说明nvalue=列表项的值n//datalistHTM