玩转web表单网页快速开发(❤建议收藏❤)(上)

简介: 玩转web表单网页快速开发(❤建议收藏❤)(上)

一、前言


前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看


上篇,之后在食用这篇。


二、正文部分


如图示:点击webapp上面的小三角形点到直到看到jsp位置


我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行


后端数据处理和接收。


微信图片_20220105172638.png


第一步:我们先在这输入一些东西如图:其中<h1>内容</h1>这是格式,说明中间的内容是一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大


微信图片_20220105172642.png


要先点击这个运行之后,我们要去百度搜索localhost:8080 我们来看看效果


微信图片_20220105173243.png


微信图片_20220105173256.png


感觉挺大的,所以我们一般用<h2>内容</h2>


第二步:我们输入以下圈起来的内容,<input type=" ">是格式,"txt"表示后面是一个框


微信图片_20220105173315.png

点击运行之后再到百度将刚才的内容刷新就可以得到新内容了如图:


微信图片_20220105173319.png


但是我们感觉这样在一行不太好看,所以我们只需要加个换行的<br>即可


微信图片_20220105173350.png


点击运行之后就可以在百度上刷新就可以得到了


微信图片_20220105173417.png

那我们来输入试试:


微信图片_20220105173432.png


我们发现,密码可以看到,没有任何加密,所以我们只需要把txt改成password即可




点击运行后 在百度刷新查看:微信图片_20220105173448.png

该成之后如图:


微信图片_20220105173504.png


就可以通过小眼睛标识来控制是否可见


微信图片_20220105173531.png


第三步:我们只需要加入name和id,其中,冒号下的表示一个类似标识符的东西,


id所对应的是在前段显示,name而是在后端传输数据的时候起作用


微信图片_20220105173555.png


我们发现输完账号密码之后没法提交,这就需要设置一个按钮,如图,输入划线的部分


微信图片_20220105173612.png


<input type=" ">是一种格式,submit是一个提交按钮


微信图片_20220105173618.png


但是你会发现,点了提交没反应,这时我们就要加入<form></form>将整个包起来


<form></form>相当于一个问卷,有了问卷,就可以提交了。


微信图片_20220105173640.png


点击运行之后呢,就可以如图:


微信图片_20220105173704.png


点击提交后,会在网页上显示出来,这时name的作用就体现出来了。


第四步:既然这是段位提交,那显然少不了段位选择,本来应该是<option>内容</option>


但是如果手抖写成<option>内容<option>,少了/,会怎么样呢


微信图片_20220105173726.png


就会多出许多空格,且这些空格是可以选择的


微信图片_20220105173742.png

这就很难受的,所以还是变成在idea代码中加上/,如图:


微信图片_20220105173900.png 之后点击运行在百度上刷新就可以了


微信图片_20220105173922.png


目录
相关文章
|
15天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
102 44
|
11天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
26 1
|
14天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
16天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
29 2
|
22天前
|
JavaScript API 开发工具
(H5-Web3D-ThreeJS)在网页三维CAD中绘制窗户模型
本文介绍了如何使用mxcad3d在网页中创建一个简单的三维窗户模型。通过官方教程搭建环境,编写绘制窗户模型的代码,并在点击按钮后展示模型效果。最终模型包括窗框和玻璃部分,具备丰富的三维建模功能和便捷的API支持。
WK
|
16天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
19 0
|
18天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
15 0
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
100 3
|
1月前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
37 2
|
1月前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
43 3

热门文章

最新文章