玩转web表单网页快速开发(❤建议收藏❤)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站前言 – 床长人工智能教程正在上传…重新上传取消https://www.cbedai.net/gkbskchttps://www.cbedai.net/gkbskc
一、前言
前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看
上篇,之后在食用这篇。
二、正文部分
如图示:点击webapp上面的小三角形点到直到看到jsp位置
我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行
后端数据处理和接收。
第一步:我们先在这输入一些东西如图:其中<h1>内容</h1>这是格式,说明中间的内容是
一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大
要先点击这个运行之后,我们要去百度搜索localhost:8080 我们来看看效果
感觉挺大的,所以我们一般用<h2>内容</h2>
第二步:我们输入以下圈起来的内容,<input type=" ">是格式,"txt"表示后面是一个框
点击运行之后再到百度将刚才的内容刷新就可以得到新内容了如图:
但是我们感觉这样在一行不太好看,所以我们只需要加个换行的<br>即可
点击运行之后就可以在百度上刷新就可以得到了
那我们来输入试试:
我们发现,密码可以看到,没有任何加密,所以我们只需要把txt改成password即可
点击运行后 在百度刷新查看:
该成之后如图:
就可以通过小眼睛标识来控制是否可见
第三步:我们只需要加入name和id,其中,冒号下的表示一个类似标识符的东西,
id所对应的是在前段显示,name而是在后端传输数据的时候起作用
我们发现输完账号密码之后没法提交,这就需要设置一个按钮,如图,输入划线的部分
<input type=" ">是一种格式,submit是一个提交按钮
但是你会发现,点了提交没反应,这时我们就要加入<form></form>将整个包起来
<form></form>相当于一个问卷,有了问卷,就可以提交了。
点击运行之后呢,就可以如图:
点击提交后,会在网页上显示出来,这时name的作用就体现出来了。
第四步:既然这是段位提交,那显然少不了段位选择,本来应该是<option>内容</option>
但是如果手抖写成<option>内容<option>,少了/,会怎么样呢
就会多出许多空格,且这些空格是可以选择的
这就很难受的,所以还是变成在idea代码中加上/,如图:
之后点击运行在百度上刷新就可以了
也可以设置不同的提交按钮,只需要一个value='' ''即可里面就可设置内容了
如图:
我们还可以设置单选多选,那又是怎么实现呢
单选:单选的关键词是"radio",我们前面知道了设置一个功能的格式是<input type=" ">,
所以如图:
结果是:
我们发现三个都能选,所以我们必须加上name修饰,用相同的指向,表示只能选择一个
这次如图就可以了
我们要想给这个加上一个默认值,默认选的那个,只需要加上checked即可如
之后:
多选:多选和单选的区别在于把radio改为checkbox
运行后如图:
就可以了,离得太近,我们有时候点不到框框,点汉字却没反应无法选中,所以我们可以
设置成点汉字也可以选择直接加<label>内容</label>,如图
就可以实现点文字也能选上了:
有时候我们写错太多,不想一个一个删除,这时我们就可以用一个重置按钮reset英文理解为
再设置,就是重置了,我们把上次的按钮改成提交按钮。
如图:
点击重置就可以清除了所有了。
上次写了个粗略版本
还有其他的我们之后去了解。
你想要找的在这:❤三种方式俯瞰后端数据接收❤(建议收藏)_执久呀的博客-CSDN博客
还有这里:直通大厂web入门级网页快速开发(❤建议收藏❤)_执久呀的博客-CSDN博客
玩转web表单网页快速开发(❤建议收藏❤)相关推荐
- 直通大厂web入门级网页快速开发(建议收藏)
第三篇:❤三种方式俯瞰后端数据接收❤(建议收藏)_执久呀的博客-CSDN博客 第二篇:玩转web表单网页快速开发(❤建议收藏❤)_执久呀的博客-CSDN博客 一.前言 前些天发现了一个巨牛的人工智能 ...
- antd提交表单_antd快速开发(Form篇)
前言 由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form的快捷方法.希望能对大家有用. 传统Form ...
- Antd Vue 表单生成快速开发指南,内附强大的表单设计器
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...
- Flask开发系列之Web表单
Flask开发系列之Web表单 简单示例 from flask import Flask, request, render_templateapp = Flask(__name__) @app.rou ...
- 用php实现一个简易的web表单生成器,PHP—Web表单生成器
1.实例: 2. 需求分析 在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. 因此,可以利用PHP实现一个Web表单生成器,使其可以根据具体的需求定制 ...
- Flask Web表单
title: flask学习笔记 subtitle: 3. flask Web表单 date: 2018-12-14 10:17:28 --- Web表单 HTML表单是用户和web站点或应用程序之间 ...
- 用php实现一个简易的web表单生成器,网络编程PHP Web表单生成器案例分析
本文实例讲述了PHP Web表单生成器.分享给大家供大家参考,具体如下: 1.实例: 2. 需求分析 在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. ...
- python-flask(二)集成bootstrap、集成web表单、集成邮件发送
文章目录 一.flask集成bootstrap 1. 什么是Bootstrap? 2. Flask中如何集成Bootstrap? 3. Flask-Bootstrap实现了什么? 二.Flask中集成 ...
- 要想工作流程更简便,试试开源web表单设计器
繁杂的工作流程,让您头疼不已?传统的表单制作效率低?内部数据迟迟得不到有效管理?-作为职场人的你,是否经常遇到上述问题.别着急,在如今的快节奏发展时代,传统的表单制作已经满足不了行业和市场的需求了,想 ...
- 【Web安全】PHP与Web表单交互-POST方法与GET方法(看不懂你来打我)
PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为 ...
最新文章
- linux支持hd610显卡吗,HD610相当于什么显卡 HD610和HD630的区别 (全文)
- Centos下Yum安装PHP5.5,5.6
- 常用的linux命令与示例,linux常用命令及用法示例
- [CODEVS] 2189 数字三角形W
- Spring Web Application Security
- UML类图关系(泛化 、继承、实现、依赖、关联、聚合、组合)
- mysql 主从复制优化、并行复制
- 全国计算机等级考试题库二级C操作题100套(第21套)
- PROTEUS元件库元件称呼 .
- 【Java】Java 对象头 真的是 32位 吗?
- 微html5游戏,最好玩的Html5游戏社区:微游畅玩 惊艳上线
- 【Linux】部署memcache
- python中tolist()功能
- Hugging Face Course-Diving in 抱抱脸 Tokenizers library (Introduction BPE)
- python修改mac地址_python中的MAC地址生成器
- 基于飞桨实现BigGAN生成动漫图像——为艺术创作赋能
- 老人疯狂裂变引流视频推广微信小程序源码支持定时流量主
- c语言 愚人节题目,愚人节整人题目大全,耍的就是你!
- 海内外弟子追思百岁国医大师邓铁涛
- 【困难】数字迷宫,找到迷宫中的单词。
热门文章
- 无线路由器通过有线扩展信号覆盖范围(非桥接方式),实现无缝漫游
- 国猪555555555
- java 文字水印 旋转_java实现倾斜水印铺满整张图
- Matlab200以内所有质数,用matlab编写一个程序:求出200以内的质数,求!!!!急!!!!!...
- mysql查询各科成绩前三名_No.03 数据库经典面试之如何取出每科成绩的前三名
- java appkey_Java全栈工程师 风袖 appkey
- vue网易云二维码登录
- Android系统中的常用时间戳及时间单位
- 小班同学学习经历分享(一)游戏程序员成长札记
- Saving Tang Monk II(bfs+优先队列)