网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-表单.pptx

网页中的注册、登陆、搜索等用于用户输入内容的文本框、单选框、复选框、下拉列表框、按钮等，可以用表单来实现。HTML5的块级元素表单

目录块级元素2.1基本块级元素2.2列表元素2.3表格元素table2.4表单2.5分区元素div2.6缩排元素blockquote2.7实训—制作精选信息板块习题2

2.4表单2.4.1表单元素form表单的基本格式为：formname=表单名action=URLmethod=get|post……/form1）action属性。2）method属性。3）enctype属性。4）name属性。5）target属性。

2.4表单2.4.2输入元素inputinput标签的基本格式为：inputtype=表项类型name=元素名size=xmaxlength=yinput标签常用属性如下。

2.4表单1）type属性：

2.4表单2）name属性。3）size属性。4）maxlength属性。5）checked属性。6）readonly属性。7）autofocus属性。8）disabled属性。9）value属性。

2.4表单【例2-13】制作不同类型的表单按钮，本例文件2-13.html在浏览器中显示的效果如图2-13所示。

2.4表单!DOCTYPEhtmlhtmlheadmetacharset=utf-8title表单的input示例/title/headbodyformaction=method= 帐号:inputtype=textname=usersize=30/br/ 密码:inputtype=passwordname=passwdsize=30/br/ 性别:inputtype=radioname=sexvlaue=male/男 inputtype=radioname=sexvalue=femalechecked=checked/女br/ 技术:inputtype=checkboxname=techvalue=java/Java inputtype=checkboxname=techvalue=html/html inputtype=checkboxname=techvalue=css/CSSbr/ 选择上传文件:inputtype=filename=file/br/

2.4表单图片按钮:inputtype=imagesrc=images/ClickEnter.jpgwidth=80height=25br/ 隐藏组件:inputtype=hiddenname=mykeyvalue=myvalue/br/ 选择你喜欢的颜色:inputtype=colorname=favcolorbr 工作日期:inputtype=datename=bdaybr/ 生日(日期和时间):inputtype=datetime-localname=bdaytimebr/ 选择时间:inputtype=timename=usr_timebr/ 生日(月和年):inputtype=monthname=bdaymonthbr/ 数量(1到5之间):inputtype=numbername=quantitymin=1max=5br/ 强度:inputtype=rangename=pointsmin=1max=10br/ inputtype=reset/nbsp;nbsp;inputtype=submit/nbsp;nbsp;inputtype=resetvalue=自定义按钮/ /form/body/html

2.4表单2.4.3标签元素labellabel标签的格式为：labelfor=id说明文字/label【例2-14】label元素的示例。本例文件2-14.html在浏览器中显示的效果如图2-14所示，单击“密码”标签，焦点将定位到其关联的文本框中。

2.4表单!DOCTYPEhtmlhtmlheadmetacharset=utf-8titlelabel元素示例/title/headbodyformaction=method=post labelfor=username用户名：/labelinputid=username