网页设计与制作-HTML5 + CSS3 课件 任务5 制作“在线留言”子页面_第1页
网页设计与制作-HTML5 + CSS3 课件 任务5 制作“在线留言”子页面_第2页
网页设计与制作-HTML5 + CSS3 课件 任务5 制作“在线留言”子页面_第3页
网页设计与制作-HTML5 + CSS3 课件 任务5 制作“在线留言”子页面_第4页
网页设计与制作-HTML5 + CSS3 课件 任务5 制作“在线留言”子页面_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作HTML5+CSS3任务5制作“在线留言”子页面第2章网页的基本结构实现知识目标技能目标素质目标（1）理解表单的工作原理。（2）掌握表单相关标签及属性。（3）掌握表单及表单元素的应用方法。（1）能够制作出符合网站需求的各种表单页面。（2）能够创建具有相应功能的表单元素。（3）能够灵活运用常用的表单元素。（1）培养自主学习和解决问题的能力。（2）培养精益求精的工匠精神。（3）培养严谨的编程习惯。表单及其相关元素任务实现第2章网页的基本结构实现1.表单及其相关元素1.1表单的基本概念1.2常用的表单元素1.3表单按钮1.4表单元素的属性1.5表单元素的分组第2章网页的基本结构实现1.1表单的基本概念1.表单及其相关元素表单：用于收集用户的信息和意见，是网站管理者与浏览者之间沟通的桥梁。表单的创建：（1）确定表单的目的和内容。需要搜集用户的哪些数据。（2）建立表单。选择合适的表单元素控件。（3）设计表单处理程序。即接受表单所收到的数据并进一步处理数据，通常由ASP.NET、JSP、PHP等技术实现）。1.1表单的基本概念1.表单及其相关元素表单基本组成：表单标签、表单元素、表单按钮1.1表单的基本概念1.表单及其相关元素表单标签：<form>表单是一个包含表单元素的容器，可以使用<form>标签在网页中创建表单。格式：<formaction="url"method="get|post"name="value">…</form>action属性：提交的地址；method属性：提交的方式；name属性：用于指定表单的名称，以区分同一个页面的多个表单；1.1表单的基本概念1.表单及其相关元素<form

action="http://localhost/action.php"

method="post"><!--表单域-->账号：

<!--提示信息--><inputtype="text"name="zhanghao"/>

<!--表单控件-->密码：

<!--提示信息--><inputtype="password"name="pwd"/>

<!--表单控件--><inputtype="submit"value="提交"/>

<!--表单控件--></form>1.2常用表单元素1.表单及其相关元素表单元素：即表单域，也叫表单控件。包括常用的输入框、文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉菜单、文件上传框和按钮等。“input”输入框：是最重要的表单元素。input有很多种形态，通过type属性区分。（1）单行文本输入框：允许用户输入一些简短的单行信息，如用户姓名。格式：<inputtype="text"name="name"maxlength="value"size="value"value="text"/>（2）密码输入框：用于保密信息的输入，如密码。用户输入的时候显示的是“*”号。格式：<inputtype="password"name="name"maxlength="value"size="value"/>（3）单选按钮：用于单项选择，例如问卷调查中的单选，或者选择性别等。格式：<inputtype="radio"name="field_name"value="value"checked>1.2常用表单元素1.表单及其相关元素（4）复选框：允许用户在一组选项中选择多个。例如问卷调查中的多选，或者选择兴趣爱好等。格式：<inputtype="checkbox"name="name"value="value">（5）隐藏域：对于用户是不可见的，主要用于后台编程时使用。格式：<inputtype="hidden"name="name"value="value"/>（6）文件域：选择文件，并上传文件的表单元素。格式：<inputtype="file"name="name"/>（7）email类型：email类型的input元素是一种专门用于输入电子邮件地址的文本输入框，可以用来验证email输入框的内容是否符合email邮件地址格式。格式：<inputtype＝"email"/>（8）url类型：url类型的input元素是一种用于输入URL地址的文本框，如果所输入的内容是URL地址格式的文本，则会提交数据到服务器。格式：<inputtype＝"url"/>1.2常用表单元素1.表单及其相关元素（9）tel类型：tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式，因此，tel类型通常会和pattern属性配合使用。pattern属性的值是通过其检查输入值的正则表达式。格式：<inputtype＝"tel"pattern="正则表达式"/>（10）search类型：专门用于输入搜索关键词的文本框它能自动记录一些字符，例如站点搜索或者Google搜索，在用户输入内容后其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。格式：<inputtype＝"search"/>（11）color类型：用于提供设置颜色的文本框实现一个RGB颜色输入。格式：<inputtype＝"color"value="value"/>1.2常用表单元素1.表单及其相关元素<formaction="#"method="post">用户账号：<inputtype="text"/><br/><br/>用户密码：<inputtype="password"/><br/><br/>用户性别：<inputtype="radio"name="sex"checked="checked"/>男<inputtype="radio"name="sex"/>女<br/><br/>兴趣：<inputtype="checkbox"/>唱歌<inputtype="checkbox"/>跳舞<inputtype="checkbox"/>游泳<br/><br/>上传头像：<inputtype="file"/><br/><br/><inputtype="hidden"/></form>1.2常用表单元素1.表单及其相关元素<formaction="#"method="get">请输入您的邮箱：<inputtype="email"name="formmail"/><br/>请输入个人网址：<inputtype="url"name="user_url"/><br/>请输入电话号码：<inputtype="tel"name="telphone"pattern="^\d{11}$"/><br/>输入搜索关键词：<inputtype="search"name="searchinfo"/><br/>请选取一种颜色：<inputtype="color"name="color1"/><inputtype="color"name="color2"value="#FF3E96"/><inputtype="submit"value="提交"/></form>1.2常用表单元素1.表单及其相关元素“选择”表单元素：由<select>、<option>标签来定义的。其中<select>用来定义下拉列表，<option>用来定义列表选项。格式：<selectname="name"size="value"multiple><optionvalue="value"selected>选项1</option><optionvalue="value">选项2</option>…</select>表2-8“选择”表单元素属性1.2常用表单元素1.表单及其相关元素<body>出生年月：<selectname="year"size="1"><optionvalue="">请选择年份</option><optionvalue="2011">2011</option><optionvalue="2012">2012</option><optionvalue="2013">2013</option><optionvalue="2014">2014</option><optionvalue="2015">2015</option><optionvalue="2016">2016</option><optionvalue="2017">2017</option><optionvalue="2018">2018</option><optionvalue="2019">2019</option><optionvalue="2020">2020</option><optionvalue="2021">2021</option><optionvalue="2022">2022</option><optionvalue="2023">2023</option></select>年</body>1.2常用表单元素1.表单及其相关元素“文本域”表单元素：文本域既表示一个文本的区域，通俗来说就是可以一个区域内输入多行文本。格式：<textareaname="textfield_name"cols="value"rows="value"wrap=”soft|hard”>…</textarea>表2-9textarea的属性1.2常用表单元素1.表单及其相关元素<body>个人简介：<textareaname="description"cols="30"rows="10">

此处描述信息</textarea></body>1.3表单按钮1.表单及其相关元素从本质上讲，表单按钮也是表单元素。提交按钮用于把表单数据发送到服务器，重置按钮用于重置整个表单的数据，普通按钮则需要开发者赋予它功能。提交按钮：定义提交表单数据至表单处理程序的按钮。格式：<inputtype＝"submit"name=”...”value=”...”/>实例代码：<inputtype="submit"value="立即购买"/>重置按钮：填完表单信息后，发现填写错误，希望将表单数据还原为页面加载时的状态。可以在表单上创建一个重置按钮，可清除表单中的所有数据。格式：<inputtype＝"reset"name=”...”value=”...”/>实例代码：<inputtype="reset"value="取消"/>1.3表单按钮1.表单及其相关元素图像按钮：默认的图像按钮不美观，可以创建一幅漂亮的图像，再把<input>标签的type属性设置为“image”，把src属性设置为图像的URL，使用图像按钮时，input元素没有value属性。格式：<inputtype＝"image"name=”...”src=”...”alt=”...”/>实例代码：<inputtype="image"src="images/dl.jpg"alt="登录"/>普通按钮：定义可单击按钮，多数情况下，用于JavaScript启动脚本。格式：<inputtype＝"button"name=”...”value=”...”/><button>标签：用于定义一个按钮，在标签内部可以放置内容，比如文本或图像等。格式：<buttontype＝"button"name=”...”value=”...”/>...</button>实例代码：<buttontype="button"onclick="alert('欢迎学习！')">点我!</button>1.4表单元素的属性1.表单及其相关元素表单元素除了type、name属性之外还定义很多其他的属性以实现不同的功能。1.value属性value属性规定输入字段的初始值，也是表单被提交时被发送到服务器的值。2.autofocus属性autofocus属性是布尔属性，用于指定页面加载后是否自动获取焦点，将标记的属性值所在位置。3.placeholder属性placeholder属性用于为input类型的输入框提供相关提示信息以描述输入框期待用户输入何种内容。placeholder属性适用于以下输入类型：text、search、url、tel、email以及password。1.4表单元素的属性1.表单及其相关元素<formaction="#"method="post"><inputtype="search"name="user_search"placeholder="请输入你要搜素的内容"/><inputtype="submit"/></form>1.4表单元素的属性1.表单及其相关元素4.required属性required属性是布尔属性，用于规定输入框填写的内容不能为空。适用于以下输入类型：text、search、url、tel、email、password、number、checkbox、radio、file。<formaction="#"method="post">用户名:<inputtype="text"name="usr_name"required="required"/><inputtype="submit"value="提交"/></form>1.4表单元素的属性1.表单及其相关元素5.readonly属性readonly属性规定输入字段为只读（不能修改），readonly只对text、password以及textarea有效。6.disabled属性disabled属性规定输入字段是禁用的。disabled属性不需要值。它等同于disabled="disabled"。该属性对text、password、textarea、select、radio、checkbox、hidden、option等表单元素都有效。7.pattern属性pattern属性规定用于验证输入字段的模式。模式指的是正则表达式。pattern属性适用于的类型是:text、search、url、tel、email和password类型的input元素。1.4表单元素的属性1.表单及其相关元素<formaction="#"method="get">账号：<inputtype="text"name="username"pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"/>（以字母开头，允许5-16字节，允许字母数字下划线）<br/>

密码：<inputtype="password"name="pwd"pattern="^[a-zA-Z]\w{5,17}$"/>（以字母开头，长度在6~18之间，只能包含字母、数字和下划线）<br/>Email地址：<inputtype="email"name="myemail"pattern="^\w+([-+.]\w+)*@

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

温馨提示

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

最新文档

评论

0/150

提交评论