JavaScript一文带你玩转web表单网页

一、前言

前面我们介绍了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英文理解为

再设置，就是重置了，我们把上次的按钮改成提交按钮。

如图：

点击重置就可以清除了所有了。

上次写了个粗略版本

还有其他的我们之后去了解。

你想要找的在这：❤三种方式俯瞰后端数据接收❤(建议收藏)

还有这里：直通大厂web入门级网页快速开发(❤建议收藏❤)

到此这篇关于JavaScript一文带你玩转web表单网页的文章就介绍到这了,更多相关JavaScript web表单网页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js实现web留言板功能

    js实现web留言板功能

    本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input type="text" id="mood"/><br/> 笔记:<br/> <textarea id="network"></textarea><br/> <button id="send&q

  • 浅谈Webpack4 plugins 实现原理

    目录 前言 认识 实践出真知 前言 在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听这些事件并通过 webpack Api 对输出文件做对应的处理, 如 hmlt-webpack-plugin 就是对模板魔剑 index.html 进行拷贝到 dist 目录的 认识 先来通过源码来认识一下 plugins 的基本结构 https://github.com/webpack/webpack/blo

  • web开发跨域原因的多种解决方案

    web开发跨域原因的多种解决方案

    目录 跨域原因 JSONP Nginx解决 后端解决 跨域原因 是由于浏览器的同源策略限制; 跨域指: 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 JSONP 这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇. 核心思想: 网页通过添加一个<script>标签的src属性,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来. 缺点: 需要后端配合才能完成只能发送

  • web项目开发之JS函数防抖与节流示例代码

    web项目开发之JS函数防抖与节流示例代码

    目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上

  • web开发js字符串拼接占位符及conlose对象Api详解

    web开发js字符串拼接占位符及conlose对象Api详解

    目录 占位符替换 控制台打印 table() log.info.warn.error group(),groupCollapsed(),groupend() 占位符替换 控制台打印(conlose.log())或者拼接字符换, 可以借助占位符解决 %s    字符串 %d  / %i    整数 %f    小数(整数.小数都可以, 推荐) %o    对象 %c    后面字符串的样式 示例代码: // %s示例 let s1 = '爱' let s2 = '祖国' console.log('

  • JavaScript一文带你玩转web表单网页

    JavaScript一文带你玩转web表单网页

    一.前言 前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看 上篇,之后在食用这篇. 二.正文部分 如图示:点击webapp上面的小三角形点到直到看到jsp位置 我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行 后端数据处理和接收. 第一步:我们先在这输入一些东西如图:其中<h1>内容</h1>这是格式,说明中间的内容是 一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大 要先点击这个运

  • 一文带你玩转JavaScript的箭头函数

    一文带你玩转JavaScript的箭头函数

    目录 箭头函数 语法规则 简写规则 常见应用 map filter reduce 箭头函数中的this使用 concat this的查找规则 箭头函数 在ES6中新增了函数的简写方式----箭头函数,箭头函数的出现不仅简化了大量代码,也让代码看起来更加优雅,同时也解决了this指向问题,下面我们就来详细讲解如何玩转箭头函数. 语法规则 1.之前的方法 function foo1(){} var foo2 = function(name,age){ console.log("函数体代码"

  • 一文带你玩转Java异常处理

    一文带你玩转Java异常处理

    目录 1.前言 2. Exception 类的层次 2.1 Exception 类的层次简介 3. Java 内置异常类 3.1 Java 内置异常类简介 3.2 非检查异常类举例 3.3 检查性异常类表 4. 异常方法 4.1 Throwable 类的主要方法 5. 捕获异常 5.1 捕获异常简介 5.2 try/catch语法如下 5.3 多重捕获块语法说明 6. throws/throw 关键字 6.1 throws/throw 关键字简介 6.2 代码实例 7. finally关键字 7

  • 在Python的Flask框架中构建Web表单的教程

    在Python的Flask框架中构建Web表单的教程

    尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复.表单的HTML代码生成和验证提交的表单数据就是两个很好的例子. Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ pip install flask-wtf 1.跨站请求伪造(CSRF)保护 默认情况下,Flask-WTF保护各种形式对跨站请求伪造(CS

  • Web表单提交之disabled问题js解决方法

    本文实例讲述了Web表单提交之disabled问题js解决方法.分享给大家供大家参考.具体分析如下: 例如,有如下表单 复制代码 代码如下: <form id="inputForm" action="shorttermrental.action" method="post">      <input name="pname" type="text" id="pname"

  • Python的Flask框架中web表单的教程

    Python的Flask框架中web表单的教程

     概要 在前面章节我们为主页定义了一个简单的模板,部分尚未实现的模块如用户或帖子等使用模拟的对象作为临时占位. 本章我们将看到如何利用web表单填补这些空白. web表单是web应用中最基本的构建要素,我们将通过表单来实现用户发帖和应用登录功能. 完成本章内容你需要基于前面章节完成的微博应用代码,请确认这些代码已安装并能正常运行. 配置 Flask-WTF是WTForms项目的Flask框架扩展,我们将用他来帮助我们处理web表单. 大部分Flask扩展都需要定义相关配置项,所以我们先来在应用根

  • Ajax方式提交带文件上传的表单及隐藏iframe应用

    一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数据提交成功之后的回调函数中,通过form单独提交文件,而这个提交文件的form的target就指向前述隐藏的iframe. html 代码 复制代码 代码如下: <html> <body> <form action="upload.jsp" id="form1" name=

  • JAVA防止重复提交Web表单的方法

    本文实例讲述了JAVA防止重复提交Web表单的方法.分享给大家供大家参考,具体如下: package cn.com.form; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.Random; import javax.servlet.ServletException; import java

  • 推荐10款扩展Web表单的JS插件

    推荐10款扩展Web表单的JS插件

    在网站建设中,你可以使用java开发大量酷炫的特效放到你网站上,但我们知道,互联网上也有很多开源的js库和插件可供选择.如果你正在设计用户注册/登录,访客留言或活动报名等自定义表单,那么下面这些插件,可以让你的表单获得更好的用户体验. JCF Forms 我最喜欢的一款js表单插件是 PSD2HTML 上的 JCF Forms.其名称 JCF 是 Java Custom Forms 的缩写,意思是"Java 自定义表单". 使用这款插件,你可以自定义下拉列表.范围滑块.单选/复选按钮.

  • Flask处理Web表单的实现方法

    web表单是web应用程序的基本功能. 它是HTML页面中负责数据采集的部件.表单有三个部分组成:表单标签.表单域.表单按钮.表单允许用户输入数据,负责HTML页面数据采集,通过表单将用户输入的数据提交给服务器. 在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能. WTForms支持的HTML标准字段 字段对象 说明 字段对象 说明 StringField 文本字段 TextAreaField 多行文本字段 Passwor

随机推荐