html5中单选框被选中把值传给后台_HTML5的表单设计
使用过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文档时,展示效果如下:
我们可以在文本框中输入信息,例如输入tom:
当我们点击“提交”按钮后,浏览器显示信息如下;
可以看到,数据被提交给process.html页面,并且附带了一个参数name,且值为我们输入的tom。
5、表单提交用户对单选框的选择
下面是一个可以提交单选框被选信息的HTML文档:
form002 性别: 男: 女:国籍: 中国: 美国: 日本: 英国: 其它:
在浏览器中打开该HTML文档时,显示效果如下:
我们可以选择性别和国籍,例如我们选择“男”和“中国”:
当我们点击“提交”按钮后,浏览器显示信息如下:
可以看到,我们选择的信息被提交给process.html文件,并且附带了gender参数的值为male,nationality参数的值为Chinese。
6、表单提交用户对复选框的选择
下面是一个可以提交复选框被选信息的HTML文档;
form003 请选择您的业余爱好: 美术: 足球: 唱歌: 厨艺: 其它:
在浏览器中打开该HTML文档时,显示效果如下:
我们可以选择自己的业余爱好,例如我们选择足球、唱歌、厨艺:
当我们点击“提交”按钮后,浏览器显示信息如下:
可以看到,我们选择的信息被提交给process.html文件,并且附带了三个hobby参数,其值分别为Football,Singing和Cook。
7、表单提交用户对下拉菜单的选择
下面是一个可以提交下拉菜单被选信息的HTML文档;
form004 请选择您的学历: 小学初中高中大学请选择您的兴趣爱好: 美术足球唱歌厨艺其它
在浏览器中打开该HTML文档时,显示效果如下:
我们可以单选我们的学历,也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历,选择“美术”和“厨艺”两项爱好:
当我们点击“提交”按钮后,浏览器显示信息如下:
可以看到,我们选择的信息被提交给process.html文件,并且附带了education参数和两个hobby参数,education的值为junior_high_school,hobby的值为Art和Cook。
上面列举了几种控件的HTML5表单设计方法,其它的控件也大概差不多,把多个控件组合在同一个
元素中的方法也是相同的,这里就不再赘述了。
html5中单选框被选中把值传给后台_HTML5的表单设计相关推荐
- vue中单选框设置默认选中值
vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) ...
- java判断单选按钮_java中如何判断是哪个单选框被选中了?
java中如何判断是哪个单选框被选中了? 來源:互聯網 2010-08-12 22:14:48 評論 分類: 電腦/網絡 >> 程序設計 >> 其他編程語言 問題描述: 我 ...
- 前端radio单选框默认选中_开发记录篇前端内容1
有段时间没有更新文章了,因为是用的公司电脑,没有虚拟机,所以就没法演示hadoop相关的东西了,而且大数据篇的东西需要花费一些时间和精力去收集整理内容,那大数据篇就先暂停一下.最近这段时间的话我可能会 ...
- php判断单选框是否被选中,JQuery form验证单选框是否选中经验总结
这篇文章主要介绍了JQuery form表单提交前验证单选框是否选中.删除记录时验证经验总结,非常不错,具有参考借鉴价值,需要的朋友参考下吧 先上三张效果图: 这些功能在Java Web开发中可能是经 ...
- html单选框怎么用js实现选中状态,怎么用js代码改变单选框的选中状态
今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...
- html改变单选形状,用css实现html中单选框样式改变
我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先,让 ...
- java过去单选框选择的内容_java单选框默认选中
; { } 运行程序后,输出结果为: 3.以下程序段是图形界面设计中在一个框架上放置两个单选框,其中两个选项 为"男"和"女" ,缺省情况下"男&qu ...
- iView单选框默认选中问题
首先看一下iView中单选框的事例: <template><RadioGroup v-model="phone"><Radio label=" ...
- angular 循环单选框默认选中无效的解决办法 ng-model 和ng-checked
最近做项目遇到一个问题,模态框弹出查询条件,里面循环几个单选框默认选中,然后有一个清空按钮,窗口样式如下. 但是这个单选框默认选中和清空这里我搞了一天,尝试了多种办法,用ng-model和ng-che ...
最新文章
- (C#)如何利用Graphics画出一幅图表
- csharp: 百度语音合成
- git删除远程已经没有的分支
- Spring MVC源码解析
- 为什么银行存款不能按复利计息?
- 产品开发管理之流程和体系(总篇)
- Kafka中副本机制的设计和原理
- 让Salesforce用户管理变得更加容易的几种最佳实践
- 字典中文乱码怎么处理_CATIA教程技巧和二次开发宏:我的零件有很多的几何体,但是几何体的名称是乱的,还有乱码,影响我的后续操作,我该怎么处理?...
- 数据中心那些常见的问题
- LeetCode962. 最大宽度坡
- 解决精简版GhostXP或WIN7中木有超级终端及打开超级终端无图标的问题
- Python和Raspberry Pi物联网系统
- Windows和Linux平台Beyond Compare 4 注册码
- Qt2D游戏开发引擎QtGameEngine使用入门之类功能说明
- EXCEL 制作三维散点图
- 支持向量机是怎么画分类平面的?
- 华为:海思坚持研发尖端半导体,不会进行任何重组或裁员;百度网盘下线SVIP会员免第三方广告特权;一加宣布与OPPO合并...
- csp怎么给线条描边,插画师要失业了?还在纠结阴影怎么画?CSP软件能直接自动生成...
- 使用U盘+iso镜像文件安装windows10操作系统详细步骤
热门文章
- 类型全部为string_python小讲堂丨学了这么久的,这6种基本数据类型你真的理解了吗...
- 什么是代码调试(debugging)?进行代码调试的基本方法有哪些?
- 关于php的问题有哪些,关于PHP的报错问题?
- python如何复制oracle数据_Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法...
- 打不开磁盘配额linux,九度OJ 1455 珍惜现在,感恩生活 -- 动态规划(背包问题)...
- Qt图形界面编程入门(创建一个简单的程序)
- 拖链电缆 机器人电缆_干货!拖链电缆用途及安装注意事项
- 使用系统调用pipe建立一条管道线_使用Unixbench对服务器综合性能打分及测试结果...
- python列表生成器语法_python列表生产式和生成器
- java 建造者实际中的用法_java中j建造者模式详解和使用方法