教学项目十六 HTML中表单网页设计(二)

《网站建设与维护》课程标准一、课程基本信息《网站建设与维护》课程基本信息，见表表1-1《网站建设与维护》课程基本信息二、课程性质与设计思路（一）课程性质网站建设与维护是网络系统管理专业学生必备的综合职业能力，本课程是网络系统管理专业的核心课程，通过本课程的学习，学生从整体上对网站设计与制作、网站管理与维护工作所需要的知识与技能有全面的认识，培养学生具备一定的网站开发等技能型人才所必需的知识及相关的职业能力，本课程以网页设计与制作、网络操作系统、数据库管理与维护为基础。

通过学习本课程,使学生掌握网站的建设步骤,会规划和设计网站,掌握Web服务器的安装和配置,能综合使用静态网页技术和动态服务器网页技术制作网站,掌握网站的测试和发布方法,熟悉网站的推广和维护技术，能创建和运营淘宝C2C网店，能利用独立网店系统创建独立网店。

通过启发引导项目式教学改革提高学生积极的行动意识和职业规划能力，培养学生的实际网站制作、网店创建、网店运营能力，为后续课程学习作前期准备，为学生顶岗就业夯实基础（二）设计思路本课程是依据“电子商务专业工作任务与职业能力分析表”中的网站建设与网店运营工作项目设置的。

随着互联网技术的不断发展，网站建设与网店运营在企业整体运行中占有越来越大的比重，网站建设与维护也与其紧密相连，因而设置这门课。

课程内容的编排和组织是以企业需求、学生的认知规律、多年的教学积累为依据确定的。

立足于实际能力培养，对课程内容的选择标准作了根本性改革，打破以知识传授为主要特征的传统学科课程模式，转变为以工作任务为中心组织课程内容，并让学生在完成具体项目的过程中学会完成相应工作任务，并构建相关理论知识，发展职业能力。

经过电子商务与网站建设行业专家深入、细致、系统的分析，本课程最终确定了以下十六个项目：创建网站站点、制作图文混排页面、制作表单网页、制作多媒体展示网页、处理网站图像、制作网站动画、制作网站需求分析报告、制作公司宣传网站、创建C2C网店、拍摄网店商品图片、处理网店商品图片、装修C2C网店、管理C2C网店、创建独立网店、装修独立网店、管理独立网店。

多媒体技术与网页制作第13讲2007年5月修订2013-7-20制作人：马秀麟1说明：由于多数网页要跨平台使用，因此网页文件不支持常用的空格符和换行符号。

大多数网页中采用表格实现定位，即利用表格确定文字和图片的存放位置。

表格可以嵌套，表格中可以嵌套表格。

1、表格用途:(1)展示文字:像Word等文字处理软件一样，利用表格展示特定的文字。

(2)页面布局:对整个页面进行布局，确定页面中各个对象的显示位置。

用于页面布局的表格往往使用无线表格。

2、插入表格直接插入所需行列数的表格：【插入】【表格】。

在对话框中回答表格的行列数。

3、表格操作:在屏幕上绘出表格后，可以利用鼠标拖放的方式移动表格线。

另外系统也会根据表格中文档的大小自动调节表格大小。

或者：选择系统菜单【修改】【表格】，利用子菜单项可以进行表格的拆分、合并、插入、删除等常规操作。

事实上，用得最多的是：当选定表格中的单元格后，桌面底部的属性面板自动变成【单元格】属性面板，此时也可以直接利用属性面板实现表格的各种操作。

4、表格属性:❑选定表格后（单击表格底部600旁的小三角就可以选定整个表格，或者利用【修改】菜单选定表格），底部的“属性”面板自动切换为“表格属性”面板。

(1)表格背景❑打开表格【属性】面板，若面板较窄，则可单击面板右下角的按钮，展开面板，从中可通过【背景】为表格设置背景等。

(2)表格边框❑打开表格【属性】面板，可设置表格边框宽度。

表格边框宽度为0，表示不显示边框，表格为无线表格。

(3)边框颜色❑打开表格【属性】面板，可设置表格边框颜色。

5、单元格属性❑选定单元格后，底部的“属性”面板自动切换为“单元格”面板。

(1)单元格背景❑打开单元格【属性】面板，若面板较窄，则可单击面板右下角的按钮，展开面板，从中可通过【背景】为选定单元格设置背景等。

(2)单元格合并❑打开单元格【属性】面板，单击左下角的单元格合并按钮，可合并选定单元格。

(3)单元格拆分❑打开单元格【属性】面板，单击左下角的单元格拆分按钮，可把选定单元格拆分为几个单元格。

简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。

下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。

该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。

这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。

- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。

html中的表单标签及表单元素1、表单标签<form action="提交地址" method="提交⽅式"></form>表单边框标签：fieldset2、表单元素分为三类：（1）⽂本类型： ⽂本框：text 属性有：disabled（不可操作）、readonly（只读）、placeholder（默认提⽰⽂字）账号：<input type="text"> 密码框：password密码：<input type="password"> 隐藏域：hidden 多⾏⽂本（特殊格式）：textarea<textarea name="" id="" ></textarea>（2）选择类型： 单选：radio 属性有：disabled（不可操作）、checkbox（默认选中的）性别：<input type="radio">男 <input type="radio">⼥ 多选：checkbox爱好：<input type="checkbox">打游戏 <input type="checkbox">看电视 <input type="checkbox">看书 下拉（特殊格式）：select option 属性（option的属性）：selected（默认选中）、multiple（全部显⽰）属性（select的属性）：size（显⽰⼏条）<select name="" id=""><option value="">汉族</option><option value="">满族</option><option value="">壮族</option><option value="">回族</option></select>（3）按钮类型： 普通：button<input type="button" value="点我试试"> 提交：submit　<input type="submit" value="提交按钮"> 复位：reset<input type="reset" value="清空">其他：1、autofocus属性（聚焦）实例：2、optgroup定义选项组实例：注意：methon:get传值（键值对，显⽰在⽹页的路径上，路径后⾯加数据）post（⽹络传值) ⼀般都⽤post 格式：<form action="#" method="post" enctype="multipart/form-data"> Html5新增：<input type="color"><br><input type="date"><br><input type="search"><br><input type="week"><br><input type="text" name="" list="list"><datalist id="list"><option value="aaa"></option><option value="vvv"></option><option value="ddd"></option></datalist>。

html网页表单制作1.表单标签,form,……,/form,语法:,FORM name=“form_name” ACTION=“URL”METHOD=“GET|POST”,…,/FORM,Name :定义表单的名称Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为:get ; Action :用来指定表单处理程序的位置(asp 等服务器端脚本处理程序) 2.文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式:,input type=“text” name=“...” size=“...” maxlength=“...” value=“...”,type=“text” 定义单行文本输入框;name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称;size 属性定义文本框的宽度，单位是单个字符宽度;maxlength 属性定义最多输入的字符数。

value 属性定义文本框的初始值3.密码框密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。

格式:<input type=“password” name=“...” size=“...” maxlength= “...” >4. 按钮类型:普通按钮、提交按钮、重置按钮。

1) 普通按钮当type 的类型为button 时，表示该输入项输入的是普通按钮。

语法格式: <input type="button" value="…“ name=“…”>Value: 表示显示在按钮上面的文字。

普通按钮经常和脚本一起使用。

2) 提交按钮通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。

例句: <input type="submit" value="提交">3) 重置按钮当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。