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 --…

8266获取网络时间

8266获取网络时间 今天第一次用阿里的博客写点东西感受一下....sntp.sync("ntp1.aliyun.com",function()print("sync succeeded")end,function(index)print("failed : "..index)end)用的SNTP 然后打印时间 time rtctime.epoch2cal(rtctime.get(…

重庆高考计算机分数线,重庆高考历年分数线

2019年一、普通文理类(一) 文史类本科第一批 545分本科第二批 458分高职专科批 180分(二) 理工类本科第一批 525分本科第二批 435分高职专科批 180分二、艺术类(一)本科批1.美术类 336分2.音乐类(1)音乐学 359分(2)音乐表演(声乐、钢琴、器乐) 275分3.编导类 430分4.影视类(1)表…

坐标不显示_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交互 …

shell发送邮件函数

#发送邮件函数function send_mail(){ #定义邮件发送列表 maillist( zhengwei.liuxxx xiaogang.yangxxx sundy.shexxx ) #根据不同的函数参数,发送不同的邮件 if [ "$1" "gateway" ];thenfor mail in ${maillist[*]};doecho "无法ping通网…

列主元消去法例题详解_高斯列主元消元法解方程组的步骤

高斯列主元消元法求解线性方程组AXb的简要步骤nnnnnnnnbbbxxxaaaaaaaaa2121212222111211方法说明(以4阶为例):第1步消元——在增广矩阵(A,b)第一列中…

Hive的使用之控制台

启动方式 1、如果将hive的bin(/home/hive2.1/bin)配置了环境变量,则输入:hive。 2、 #hive --service cli 启动 退出方式 1、hive>quit; 2、ctrlc 实例 ---------hivesql兼容大部分sql------- hive>show tables; hiv…

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

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

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

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

博弈论 斯坦福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…

redis 值字符串前面部分乱码_redis key乱码

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":9,"count":9}]},"card":[{"des":"兼容Redis协议标准的、提供持久化的内存数据…

Hive的使用之脚本文件

好处 在实际开发中,遇到复杂的hivesql,在文件里先写好再执行,比直接在控制台写更高效,纠错,修改更方便,也易于后期维护。 [hadoophello110 ~]$ 模式 在hive没有启动的时候,非hive内&#xff0c…

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

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

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

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

面向对象、继承、抽象方法重载知识点整理

面向过程、面向对象 面向过程:从开始到结束自己独立完成 面向对象:将一个事物划分为单体来各自实现区域性的功能,最后通过调用组合完成 类、对象 类:某一些具有共同特征的物体 对象:指某一种具体的物体,属于…

python for循环n次_Python入门10 —— for循环

1.字符串依次取值 students [egon, lxx, alex] i 0 while i < 3: print(students[i]) i 1 2.针对循环取值操作&#xff0c;while循环并不擅长&#xff0c;于是python提供一个专门循环取值操作&#xff1a;for循环 students [egon, lxx, alex] for x in students: # 有几…

hive与依赖环境的交互

与linux交互命令 格式 在linux的命令前加上!&#xff08;英文感叹号&#xff09;&#xff0c;以;&#xff08;英文分号结尾&#xff09; 操作实例 !ls; !pwd; hive> !ls; app derby.log hadoop-2.7.2.tar.gz jdk-8u73-linux-x64.tar.gz metastore_db t.sql hive> !pw…