项目3 表单应用_第1页
项目3 表单应用_第2页
项目3 表单应用_第3页
项目3 表单应用_第4页
项目3 表单应用_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

表单应用使用常用的表单元素会使用<form>标签设计简单的表单页面掌握<form>标签的属性和使用方法了解表单的组成结构使用常用的表单元素引入场景一访问网站登录时，需要输入用户名密码；场景二网购买东西时需要选择型号、尺码、颜色；上述应用场景，HTML通过表单(form)，来收集用户输入的内容。使用常用的表单元素表单的组成结构表单控件提示信息表单域使用常用的表单元素表单的组成结构表单域表单控件提示信息使用常用的表单元素表单控件提示信息包含单行文本输入框、密码输入框、确认按钮等）表单域（容纳表单控件和提示信息）<form>标签的属性和使用方法①创建表单，需要使用<form>标签<formname="表单名"method="提交方法"action="表单提交的地址"><!--文本框、按钮等表单元素--></form>②源代码③常见表单元素包括文本框、下拉框、单选框、复选框等(1)name属性：描述的是表单的名称(2)method属性：定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get和post(3)action：定义表单数据提交的目标地址使用常用的表单元素3.<input>标签及其属性属性作用type指定元素的类型。Text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位maxlengthtype为text或password时，输入的最大字符数checkedtype为radio或checkbox时，指定按钮是否是被选中使用常用的表单元素4.表单控件-文本框使用常用的表单元素(1)文本框：用来让用户输入单行文本信息。(2)<inputtype=“text”，设置文本框。(3)size属性：设置文本框的宽度。(4)value属性：设置文本框的初始值。4.表单控件-密码框使用常用的表单元素(1)密码框：用来让用户输入密码信息。(2)<inputtype=“password”>，设置密码框。(3)size属性：设置密码框的宽度。(4)name属性：设置密码框的名称。4.表单控件-下拉列表框使用常用的表单元素(1)下拉列表框：用来设置需要选择的数据。(2)<select>：下拉列表框。(3)<option>：下拉列表数据标签。(4)selected属性：设置默认选中的项。4.表单控件-提交和重置按钮使用常用的表单元素(1)提交按钮：用于提交表单数据。(2)重置按钮：用于清空现有表单数据。(3)<inputtype=“submit”，设置提交按钮。(4)<inputtype=“reset”，设置重置按钮。(5)value属性：设置文本框的值。4.表单控件-普通按钮使用常用的表单元素(1)普通按钮：用于跳转到其他页面。(2)<inputtype=“button”>,设置普通按钮。(3)name属性：设置按钮的名字。(4)value属性：设置按钮上显示的文字信息。【总结】表单控件使用常用的表单元素(1)什么是表单域(2)表单的作用①表单域②提示信息③表单控件(3)表单的组成部分会员注册页面制作了解<p>标签的作用、特点及使用方法会员注册页面制作学习目标掌握<form>标签及其内部控件标签的使用方法会使用<form>标签设计一个较复杂的注册页面会员注册页面制作任务需求使用HTML的<p>段落标签实现一个表单注册页面的布局。表单应该清晰明了，避免用户填写信息时出现混淆表单应该包括所有必填信息表单应该采用简单的设计风格表单应该提供实时反馈，例如当用户输入错误时，应该及时提示用户表单的设计原则会员注册页面制作布局分析该注册页面共9行内容，可以使用9个<p></p>标签。把各自的表单控件放入对应的段落标记中。会员注册页面制作p标签的作用比较br标签p标签相同点p（paragraph的简写）段落标签，br（blankrow的缩写）标签在网页中起到换行的效果不同点标签使用格式<br/>单个使用。注意如果用<br>没有“/”虽然效果相同，但是不符合W3C标准<p></p>是一对配合使用换行小换行，行与行之间没有间距大换行，行与行之间有间距会员注册页面制作p标签的作用p标签是HTML中用于表示段落的标签，具有如下特点:浏览器对p标签有一些默认的样式设置，如默认的字体、行高、段落间距等。默认样式常用于分类导航或菜单等场合p标签将包裹在其内部的文字视为一个段落，浏览器会自动在段落之间添加适当的间隔。这有助于提高文本的可读性和排版效果。文字分段p标签不能嵌套其他块级元素，如div、h1等。

嵌套规则会员注册页面制作注册表单包含了哪些表单控件？设置行宽

V属性设置段落外边距margin属性设置段落内边距，以调整段落间距和边距padding属性设置段落的背景颜色Backgroundcolor属性设置边框的宽度颜色border属性会员注册页面制作注册表单包含了哪些表单控件？文本输入框密码输入框电子邮箱输入框单选按钮文件域多选按钮下拉列表框提交和重置按钮用户登录表单的代码会员注册页面制作<!doctypehtml><head><metacharset=“utf-8”><title>会员注册页面</title></head><body><formmethod="post"action="register_success.htm"><!--添加1个单行文本框和2个密码框--><p>登录名：<inputname="sname"type="text"size="24"/>（可包含a-z、0-9和下划线）</p><p>密码：<inputname="pass"type="password"size="26"/>（至少包含6个字符）</p><p>再次输入密码：<inputname="rpass"type="password"size="26"/></p><!--添加电子邮箱输入框--><p>电子邮箱：<inputname="email"type="text"size="24"/>（必须包含@字符）</p><!--添加单选按钮--><p>性别：<inputname="gen"type="radio"value="男"checked="checked"/><imgsrc="images/Male.gif"alt="alt"/>男

<inputname="gen"type="radio"value="女"/><imgsrc="images/Female.gif"alt="alt"/>女</p><!--添加上传文件域--><p>头像:<inputtype="file"name="upfiles"/></p><!--添加多选按钮--><p>爱好:<inputtype="checkbox"name="checkbox"value="checkbox"/>运动

<inputtype="checkbox"name="checkbox2"value="checkbox"/>聊天

<inputtype="checkbox"name="checkbox3"value="checkbox"/>玩游戏</p><p>喜欢的城市：<selectname="nMonth"> <optionvalue=""selected="selected">[请选择]</option> <optionvalue="0">北京</option> <optionvalue="1">上海</option></select></p><!--添加提交按钮和重置按钮--><p><inputtype="submit"name="Button"value="同意右侧服务条款，提交注册信息"disabled="true"/><inputtype="reset"name="Reset"value="重

填"/></p></form> </body></html>新标准HTML5新标准HTML5学习目标了解html5新增的媒体标签了解html5新增的语义化标签会应用html5新增的表单控件新标准HTML5新特性HTML5提供了新的元素来创建更好的页面结构，例如<header>、<nav>、<footer>和<section>。新的语义元素HTML5拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，例如，数字（number）和日期（date）。新的表单控件HTML5可使用<canvas>和<svg>标签通过脚本语言（通常是JavaScript）绘制图形。强大的图像支持HTML5规定了在网页上嵌入视频和音频元素的标准，即使用<video>和<audio>元素。强大的多媒体支持HTML5语义化标签构建“H5标准页面”定义文档的页眉通常是一些引导和导航信息定义导航链接定义文章定义文档中的节定义文章的侧栏广告，成组的内容，友情链接，侧边栏等定义文档或节的页脚HTML5多媒体标签构建视频网页①<audio>

标签，插入声音②<video>

标签，插入视频HTML5多媒体标签构建视频网页播放音乐：<audiocontrols="controls"src="media/music.mp3"></audio>播放视频：<videosrc="media/video.mp4"controls="controls"autoplay="autoplay"loop="loop"></video>在多媒体标签内设置是否自动播放autoplay属性指定多个播放路径src

属性用来设置播放进度条controls属性HTML5表

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论