html5中单选框被选中把值传给后台_HTML5的表单设计

0f9e1d5b46ee2f9554beb009d7259ac8.png

使用过Delphi的程序员,对Form这个词应该比较熟悉。在Delphi中,Form被翻译为“界面、窗口”,作用是:为用户提供界面,供用户输入信息,向用户展示处理结果。

HTML5中也有Form,功能与Delphi中的Form差不多,用于接收用户输入,和服务器进行交互。不过HTML5中的Form,中文一般译为“表单”。

1、Web前端与Web后端的交互

Web前端,指浏览器上展示的HTML文件,以及HTML文件使用的CSS文件及JavaScript脚本。

Web后端,指运行在服务器上的,为Web前端提供服务的软件,Web后端也常常被称为Web服务器。

在HTML5中,Web前端与Web后端交互的流程一般如下:

(1)Web前端向Web后端发起HTTP请求;

(2)Web后端收到HTTP请求后,进行业务处理;

(3)Web后端向Web前端返回HTTP响应。

到目前为止,我们在HTML5中碰到的Web前端发起HTTP请求的方式有两种:

第1种:HTML页面通过元素向用户提供超级链接,用户点击该链接时,会向服务器发起请求;

第2种:HTML页面通过表单为用户提供输入界面,用户提交表单时,会向服务器发起请求。

2、GET请求和POST请求

HTTP请求有八种,对Web前端开发者来说,最常用的是GET请求和POST请求。

GET请求:向Web后端请求指定的页面;GET请求携带的数据,以URL参数的形式提供;

POST请求:向Web后端提交数据,请求Web后端对数据进行处理;POST请求携带的数据,在请求消息体中提供。

在HTML5中,用户点击链接地址,Web前端向后端发起GET请求;

在HTML5中,用户提交表单,Web前端可以向后端发起GET请求,也可以发起POST请求。

说明:由于目前没有和后端服务器对接,为了便于对表单设计进行展示,下面的例子HTML文档,都是用GET请求来提交数据。

3、表单的主要元素

元素:表示表单;

元素:表单中的输入控件,输入控件可以是文本框、单选框、复选框、按钮等等;

元素:表单中的标签控件;

元素:表单中的按钮控件;

与元素:用于实现列表框和下拉菜单;

元素:多行文本控件。

4、表单提交文本框的输入

下面是一个可以提交文本框输入的HTML文档:

            form001            请输入您的姓名:                

在浏览器中打开该HTML文档时,展示效果如下:

54b9fe107b3bbf825f56720ddf0401ae.png

我们可以在文本框中输入信息,例如输入tom:

873ba1125ab834ac023ec5239b6c32aa.png

当我们点击“提交”按钮后,浏览器显示信息如下;

e2d2e3c2b98ff707d329fc5e17c50674.png

可以看到,数据被提交给process.html页面,并且附带了一个参数name,且值为我们输入的tom。

5、表单提交用户对单选框的选择

下面是一个可以提交单选框被选信息的HTML文档:

            form002            性别:            
男: 女:国籍:
中国:
美国:
日本:
英国:
其它:

在浏览器中打开该HTML文档时,显示效果如下:

833b8661f3caccc1064d0b95006526d9.png

我们可以选择性别和国籍,例如我们选择“男”和“中国”:

1869fd7d9898a3c2e67e74e0c3df8e1c.png

当我们点击“提交”按钮后,浏览器显示信息如下:

e22d26e62f449b70291d85839719fded.png

可以看到,我们选择的信息被提交给process.html文件,并且附带了gender参数的值为male,nationality参数的值为Chinese。

6、表单提交用户对复选框的选择

下面是一个可以提交复选框被选信息的HTML文档;

            form003            请选择您的业余爱好:            
美术:
足球:
唱歌:
厨艺:
其它:

在浏览器中打开该HTML文档时,显示效果如下:

6c8e5bf22aee3326e17f45997ce2e965.png

我们可以选择自己的业余爱好,例如我们选择足球、唱歌、厨艺:

c34a62da839b437d4488a5385178f6a6.png

当我们点击“提交”按钮后,浏览器显示信息如下:

1cffca1cc92a739448cd08dce8921923.png

可以看到,我们选择的信息被提交给process.html文件,并且附带了三个hobby参数,其值分别为Football,Singing和Cook。

7、表单提交用户对下拉菜单的选择

下面是一个可以提交下拉菜单被选信息的HTML文档;

            form004            请选择您的学历:            小学初中高中大学请选择您的兴趣爱好:            美术足球唱歌厨艺其它    

在浏览器中打开该HTML文档时,显示效果如下:

8b407a84f761a2f3243d9c4fe0950a97.png

我们可以单选我们的学历,也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历,选择“美术”和“厨艺”两项爱好:

a2cd8d4e54bef6346b98d8b481f2bff7.png

当我们点击“提交”按钮后,浏览器显示信息如下:

399ad17727dfc0be20296252ca6b50e9.png

可以看到,我们选择的信息被提交给process.html文件,并且附带了education参数和两个hobby参数,education的值为junior_high_school,hobby的值为Art和Cook。

上面列举了几种控件的HTML5表单设计方法,其它的控件也大概差不多,把多个控件组合在同一个

元素中的方法也是相同的,这里就不再赘述了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python科赫曲线绘制正方形_Python数据处理从零开始----第四章(可视化)(14)使用seaborn绘制热图...

目录 Python数据处理从零开始----第四章(可视化)①③多变量绘图 Python数据处理从零开始----第四章(可视化)(14)使用seaborn绘制热图 seaborn.heatmapHeat maps显示数字表格数据,其中单元格根据…

Hive的系统架构

一、架构图 二、各组件 用户接口:包括 CLI(控制台命令),JDBC/ODBC,WebUI。 CLI,即Shell命令行 JDBC/ODBC 是 Hive 的Java,与使用传统数据库JDBC的方式类似 WebGUI是通过浏览器访问 Hive --…

坐标不显示_Simpack不显示坐标轴方向的解决方法

经常有用户咨询Simpack软件打开模型时,不能显示坐标轴的x、y、z方向,这个问题对建模有很大的影响。本文是兰州交通大学陈龙同学提供的解决方法,供大家参考。使用Simpack软件建模时,会遇到这种情况:比如要创建标记点时&…

th:text为null报错_为vue3.0的学习TS解读高级类型

知识点摘要本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer)自动类型推断(不用你标类型了,ts自己猜)大家现在写ts的时候一定会在每个变量后面都加上类型吧? 但是?现在告诉大家有些情况下你…

Hive与Hadoop的调用关系

一、调用图 二、步骤解析 1、提交sql 交给驱动 2、驱动编译:解析相关的字段表信息 3、去metastore查询相关的信息 返回字段表信息 4、编译返回信息 发给驱动 5、驱动发送一个执行计划 交给执行引擎 6、执行计划 6.1、DDLs 对数据库表的操作的 直接和metastore交互 …

简述计算机文件的命名办法,如何进行文件命名-如何进行文件管理

如何进行文件命名-如何进行文件管理电脑的管理事实上就是文件和文件夹的管理。想要我们的电脑干净整齐,就需要我们正确的进行文件管理。我们知道了文件和文件夹的概念之后,现在我们再来看看单独的文件,认识一下文件的构成以及文件命名和命名规…

网页加载出现没有合适的负载均衡器_分布式必知必会-七层负载和四层负载到底是什么?...

背景我们在使用负载均衡器的时候,往往会听到七层负载或四层负载这两个名词,许多负载均衡软件提供的方式也不同,那么七层和四层区别在哪呢?为什么有的支持有的不支持呢?负载均衡简介负载均衡建立在现有网络结构之上&…

博弈论 斯坦福game theory stanford week 3.2_

title: 博弈论 斯坦福game theory stanford week 3-1 tags: note notebook: 6- 英文课程-15-game theory --- 博弈论 斯坦福game theory stanford week 3-1 习题 第 1 个问题 We say that a game is dominance solvable, if iterative deletion of strictly dominated strategi…

nestjs swagger文档调用需要鉴权的接口

目标 nestjs经常需要设置一些鉴权(登录后)才能访问的接口,但是生成的swagger文档可以发起接口请求,文档发起的请求默认是不携带登录token的,所以需要移除swagger文档发起请求的守卫拦截。 nestjs守卫拦截设置见另一篇…

ajax预加载html seo,前端性能优化 — JS预加载和懒加载

JS预加载需求:有时我们需要实现例如快速快速切换页面、图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多。核心:当一个图片在…

和平精英显示服务器人数太多,和平精英到底有多差 导致玩家纷纷国际服

原标题:和平精英到底有多差 导致玩家纷纷国际服和平精英上线以来争议不断,百分之九十九是对和平精英的各种不满,还有百分之一是喜欢和平精英,认为刺激战场已经免费给我们玩,让腾讯亏了很多钱,现在和平精英上…

python中的wx_配置 Python的wxWidgets可视开发环境 | 学步园

注:转载请注明出处 一、下载 Python 2.5.1 这一步是必须做的,下载 Python 语言的 SDK 下载地址(直接复制到迅雷):点击下载 下载完成后安装 Python 2.5.1,注意安装路径中不要有空格,不然会引起一些问题。 二、下载 wxPy…

的write方法有哪些参数_向子进程传递大量数据的方法

如何传递大型数据给子进程昨天的一篇文章中,我们说到如果想向一个子进程传输多于32767个字符的数据,我们需要寻找其他的方法(而不是命令行参数)来实现。我们能想到的第一个方法是:WM_COPYDATA。当子进程创建并进入消息循环后,我们…

厉害了!中关村软件园人工智能军团有料有看点

人工智能已成为当下全球科技界的新热点,中外竞相攀登这座划时代的科技高峰。上月,国务院印发《新一代人工智能发展规划》,明确将人工智能作为未来国家重要的发展战略。《规划》提出前瞻布局新一代人工智能重大科技项目,到2030年中…

Hive的使用之hwi

概述 hwi是hive开发的网页形式查看数据。方便非专业人士使用。 安装步骤 1、下载hive源码包 地址:http://apache.fayea.com/hive/ apache-hive-2.1.0-src.tar.gz 2、打包war 解压apache-hive-2.1.0-src.tar.gz源码包,进入到 C:\Users\zengmg\Deskto…

c 服务器传输大文件,cend.me:不须经过服务器,直接点对点的文件传输免费服务...

要传送文件给远程的手机、平板、电脑等设备,通常的做法就是先将文件上传到服务器存放,然后再从服务器下载,这样的做法看似合理,但如果上传的同时就由远程的设备来接收,不要经过服务器,这样就能更节省上、下…

Thrift源码学习二——Server层

Thrift 提供了如图五种模式:TSimpleServer、TNonblockingServer、THsHaServer、TThreadPoolServer、TThreadSelectorServer ​​ TSimpleServer、TThreadPoolServer 属于阻塞模型 TNonblockingServer、THsHaServer、TThreadedSelectorServer 属于非阻塞模型 TServer…

base64是哪个jar包的_涨知识 | 用maven轻松管理jar包

前言相信只要做过 Java 开发的童鞋们,对 Ant 想必都不陌生,我们往往使用 Ant 来构建项目,尤其是涉及到特别繁杂的工作量,一个 build.xml 能够完成编译、测试、打包、部署等很多任务,这在很大的程度上解放了程序员们的双…

JMS(Java消息服务)与消息队列ActiveMQ基本使用(一)

最近的项目中用到了mq,之前自己一直在码农一样的照葫芦画瓢。最近几天研究了下,把自己所有看下来的文档和了解总结一下。 一. 认识JMS 1.概述 对于JMS,百度百科,是这样介绍的:JMS即Java消息服务(Java Message Service&…

hive复合数据类型之struct

概述 STRUCT:STRUCT可以包含不同数据类型的元素。这些元素可以通过”点语法”的方式来得到所需要的元素,比如user是一个STRUCT类型,那么可以通过user.address得到这个用户的地址。 操作实例 1、创建表 create table student_test(id int,in…