web第二次作业.zip表单设计，web前端_web表单案例资源-CSDN文库

共14个文件

jfif：6个

html：3个

下载：3个

需积分: 9 47 浏览量 2022-11-01 12:49:21 上传评论收藏 6.46MB ZIP 举报

在Web开发领域，表单设计是构建交互式网站的关键部分，尤其对于前端开发而言，它直接关乎用户体验和数据收集的有效性。"web第二次作业.zip"这个压缩包文件似乎包含了关于Web前端开发中表单设计的学习资料，具体分为三个部分：2_files、1_files和电影网_files。下面将对这些知识点进行详细解释。 1. **HTML表单基础**： HTML表单是网页上用于用户输入数据的区域，通过`<form>`标签定义。表单可以包含各种元素，如文本输入框（`<input type="text">`）、密码输入框（`<input type="password">`）、复选框（`<input type="checkbox">`）、单选按钮（`<input type="radio">`）、下拉选择框（`<select>`）以及提交按钮（`<input type="submit">`）等。表单数据通过`<input>`标签的`name`属性来标识，并在提交时发送到服务器。 2. **CSS样式设计**：为了提高表单的视觉吸引力和易用性，使用CSS进行样式设计至关重要。这包括设置字体、颜色、边距、填充、背景等样式属性，以及使用布局技术（如Flexbox或Grid）来控制元素的排列方式。此外，还可以使用伪类（如`:hover`, `:focus`, `:active`）来改变鼠标悬停、元素获取焦点或被点击时的样式。 3. **JavaScript交互**：为了实现动态功能和验证，JavaScript在表单设计中扮演重要角色。它可以监听表单事件（如`submit`, `change`, `focus`, `blur`等），在用户操作时执行相应的逻辑。例如，使用`addEventListener`方法添加事件监听器，用`event.preventDefault()`阻止默认的表单提交行为，或者使用正则表达式验证用户输入的数据。 4. **AJAX异步提交**：而不是传统的表单提交方式，使用AJAX（Asynchronous JavaScript and XML）可以实现异步数据提交，即在不刷新整个页面的情况下与服务器交换数据并更新部分网页。`XMLHttpRequest`对象或更现代的`fetch` API可用于发送请求，处理响应，并在后台更新表单结果。 5. **1_files**可能包含的是基本的表单设计实例，涵盖了基础的HTML结构和CSS样式，供初学者理解和实践。 6. **2_files**可能涉及更高级的表单设计，可能包括JavaScript验证和AJAX提交，让学生了解如何实现交互性和实时反馈。 7. **电影网_files**可能是一个具体的项目案例，比如模拟一个在线电影数据库的搜索或预订表单。这涵盖了更复杂的表单结构，如多列布局、动态加载选项、日期选择器等，同时可能包含前后端交互的示例。通过以上知识点的学习和实践，开发者可以创建出功能强大、用户体验良好的Web表单，这对于任何Web应用来说都是至关重要的。

资源推荐

资源详情

资源评论

收起资源包目录

web第二次作业.zip （14个子文件）

2_files

2.html 2KB

livereload.js.下载 38KB

1_files

livereload.js.下载 38KB

1.html 2KB

电影网_files

2e2eb9389b504fc2d562e6fbec88f01190ef77c6c78a.jfif 791KB

b812c8fcc3cec3fdfc03ced480dac33f8794a4c2894a.jfif 1.46MB

fc40d052c587dfc6a11fa51c2bb9c4f5.png 828KB

OIP-C.jfif 23KB

R-C (4).jfif 61KB

5171e9ae6d07ce6e9b4c741ef0dbf739.png 3.14MB

R-C (5).jfif 83KB

livereload.js.下载 38KB

电影网.html 2KB

7acb0a46f21fbe096b63c741902a1b338744ebf80719.jfif 97KB

<!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style> table{text-align: center;width: 800px;height:400px ;} </style> </head> <body> <form> <h1>工商银行电子汇款单</h1> <table border="1px"> <tbody><tr> <td colspan="2">回单类型</td> <td>网上转账汇款</td> <td colspan="2">指令序号</td> <td>HQH00000000000000000013878172</td> </tr> <tr> <td rowspan="4">收款人</td> <td>户名</td> <td>老牟</td> <td rowspan="4">付款人</td> <td>户名</td> <td>老刘</td> </tr> <tr> <td>卡号</td> <td>00000000000001</td> <td>卡号</td> <td>00000000000002</td> </tr> <tr> <td>地区</td> <td>南京</td> <td>地区</td> <td>杭州</td> </tr> <tr> <td>网点</td> <td>工商江苏南京业务处理中心</td> <td>网点</td> <td>江苏徐州业务中心</td> </tr> <tr> <td colspan="2">币种</td> <td>人民币</td> <td colspan="2">钞汇标志</td> <td>钞票</td> </tr> <tr> <td colspan="2">金融</td> <td>1.00元</td> <td colspan="2">手续费</td> <td>0.57元</td> </tr> <tr> <td colspan="2">合计</td> <td colspan="4">人民币(大写):壹元整</td> </tr> <tr> <td colspan="2">交易时间</td> <td>2017年6月1日</td> <td colspan="2">时间戳</td> <td>2017-06-01-13:00:00,00000</td> </tr> </tbody></table> </form> <p>票据打印时间:2017-06-01 15:00:12</p> <p><del>票据打印单位:江苏徐州业务中心</del></p> <p>操作员:大曾</p> <script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script src="./1_files/livereload.js.下载"></script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script> </body></html>

评论收藏

内容反馈