网页设计与制作项目教程（第四版） 模块09制作可让用户提交信息的表单

网页设计与制作项目教程（第四版）模块09制作可让用户提交信息的表单教学课件教学目标：学习与能力学习目标能力目标•理解交互式网页的工作流程。•掌握表单生成的相关原理与概念。•熟悉表单各类控件的属性与用途。•掌握专业级表单的布局设计方法。•熟练使用文本框、按钮、下拉列表。•掌握文件上传框及多选/单选控件。•能够独立完成复杂业务表单的设计。教学目标：素养培养•创新思维：探索多样化设计方案，兼顾美感与实用性。•问题解决：针对不同业务场景，尝试多种控件组合方案。•团队协作：模拟前后台联调场景，提升沟通协调能力。•持续学习：关注HTML5表单新标准及交互设计动态。教学要求：知识要点与关联知识知识要点能力要求关联知识交互式网页流程理解请求/响应原理、动静态网页差异表单生成的原理理解标签属性及数据采集表单设计与控件掌握文本域、单选/复选、下拉框、文件上传任务引领：旅游订购单制作任务说明：制作一个完整的“旅游订购”界面，允许用户输入姓名、电话，并选择出游人数、喜欢的地区、预算及出发港口，支持上传身份证扫描件。设计重点1.表单区域的划分

2.控件名称(Name)的规范化

3.表格在表单中的辅助定位作用步骤1：表单容器与布局基础•1.新建。•2.插入外层3x1表格（800px），设置背景色。•3.定义表单区域：第3行内点击菜单“插入”→“表单”→“表单”。•4.内部排版：在红虚线区域内插入9x2表格，左列宽设为。代码原理生成的HTML标签：

表单元素必须位于标签对内部才能被正确提交。步骤2：插入文本字段(TextField)•1.姓名栏：选中单元格，在“插入”面板点击文本图标。•2.属性设置：选中控件，在属性面板设置Name值为。•3.人数栏：依次设置成人/儿童框。•参数配置：参数说明Size：控制输入框的视觉宽度。

MaxLength：强制限制用户输入的字数，常用于电话或身份证号。○字符宽度(Size)：○最多字符(MaxLength)：○初始值(Value)：成人设为1，儿童0。专家提示：表单控件的命名准则核心知识点•唯一性：同一表单内，不同用途的控件必须有唯一的。•后端映射：这个Name是服务器接收数据的“键值”。如果Name填错或缺失，后台程序将无法获取该项内容。•规范：建议使用英文，且“见名知意”（如username而非a1）。步骤3：插入多行文本区域•1.针对“说明事项”，选择插入“文本区域(Textarea)”。•2.参数设定：类型区别文本字段用于单行短语（如电话）；文本区域适合大段文字（如反馈信息）。○名称：○行数(Rows)：○列数(Cols)：步骤4：插入复选框组(CheckboxGroup)•1.点击表单面板中的“复选框组”。•2.数据填写：•3.默认选中：选中马尔代夫复选框，在属性面板勾选。○名称：○标签：马尔代夫|值：Maldives○标签：巴厘岛|值：Bali步骤5：插入单选按钮组(RadioGroup)•1.点击“单选按钮组”。•2.逻辑设定：•3.单选互斥原理：组内所有按钮名称必须相同，以保证“多选一”的逻辑。核心逻辑复选框允许用户选零个或多个；单选按钮在同一组内只能选择一个，新选操作会自动取消旧选。○名称：○标签：不限|值：Unlimited○标签：10000以上|值：above10000步骤6：下拉列表与文件上传•1.选择框：插入“选择(Select)”，点击列表值。•2.默认值：设Selected属性为“（中国）上海”。•3.文件域：插入“文件(File)”，名称设为。文件安全文件域是唯一的本地资源上传通道。注意：表单method必须设为POST且编码类型需特殊处理才能上传文件。步骤7：制作提交与重置按钮•1.提交按钮：选中控件，修改Value为。•2.重置按钮：选中控件，修改Value为。•3.图像域可选：可使用图片作为美化版的提交按钮。按钮逻辑Submit：触发Action并传送数据。

Reset：一键清空当前表单所有输入，恢复初始状态。理论深度：静态vs动态网页工作流静态网页用户请求->服务器直接读取HTML->返回。内容对所有访问者一致。动态网页用户提交请求->服务器运行程序处理->生成新HTML->返回。具有交互性。核心知识：表单控件功能全览选型逻辑单选还是复选？下拉还是单选？

准则：选项多于5个建议用下拉框，确保页面整洁。项目渐近：实现“我心飞扬”给我留言页任务背景：基于common.dwt模板创建留言页，并集成Bootstrap的Form组件，实现现代化感官的响应式表单布局。关键环节•利用模板创建新页•插入Bootstrap表单组件•调整Input属性•重关联模板导航链接操作原子化：模板页插入Bootstrap表单•1.切换至“实时视图”的“拆分”模式。•2.确保光标在“自定义区域”代码内。•3.插入面板->Bootstrap组件->Form。•4.冲突解决：必须在代码窗口确定光标位置，否则组件无法准确插入模板的可编辑区。专家提示：深度理解表单属性标签•文本框空置时的提示词，焦点进入后消失。•For的值必须等于输入框的id，以实现点击标签即可激活输入框。•浏览器会自动验证格式是否包含@等email必需格式，无需手写复杂脚本。步骤演示：优化默认生成的表单元素•1.转换类型：将邮箱类型修改为文本类型（text）用于录入姓名。2.更换控件：删除复选框，将第2行内<input>标签改为文本区域标签<textarea>。•3.更新模板链接：在common.dwt资源面板中，将“给我留言”链接指向。•4.保存并同步：弹出提示后点击“更新”。拓展训练：复杂注册页排版实战任务要求：制作“吧友注册”网页。核心难点在于使用1行2列总布局，右列再嵌套8行2列小表格，实现精密的表单控件对齐。回味思考：客观题检测(1)1.在HTML中，哪个元素用于创建表单容器？答案：<form>2.哪个属性用于定义表单数据提交的地址？答案：action3.HTML5中，哪个属性用于指定输入框的半透明占位符？答案：placeholder回味思考：客观题检测(2)4.若要使表单在用户提交时进行非空等验证，应使用哪个属性？答案：required5.若要创建一个单选按钮组，应使用哪个标签和类型？答案：<inputtype="radio">6.静态网页与动态网页最大的区别在于？答案：服务器是否对程序代码进行运算处理回味思考：深度逻辑解析Q：一组单选按钮如果Name属性设置得各不一样，会有什么后果？Q：如何限制用户在文本区域中输入的字符数量？逻辑解析：单选按钮的“互斥”功能依赖于相同的Name。如果Name不同，浏览器会认为它们属于不同的独立项，导致用户可以同时选中多个单选按钮，这违背了“多选一”的业务逻辑，会导致提交的数据无效。逻辑解析：使用属性。虽然传统textarea对此属性支持有限，但在HTML5标准下已全面生效，能直接在前端阻止多余字符的输入。操作实战：学生通讯录表单设计任务挑战：•1.包含：