表单是什么？表单是前端和服务器做交互的一种机制，表单收集用户输入信息，之后发送或者提交给服务器。用户在输入的信息称之为内容，内容的文本分为普通和密码型，用户通过单选框、复选框、下拉框（也就是下拉菜单）完成内容信息输入，最后通过提交按钮发送给服务器！这里要讲到浏览器怎么发送给服务器？涉及到http协议，也就是超文本传输协议，它是浏览器和服务器通讯的一种机制。模式为：请求——应答，浏览器发送请求=>服务器接收=>自身处理=>结果返回浏览器=>浏览器根据结果展示页面给用户，请求分为GET和POST。下面用代码依次展示说明：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>html基本标签表单实现交互原理，单选框，复选框，下拉框介绍</title>

 </head>

 <body>

     <form action="" method="POST">

         <!-- <input type="text">  --><!--如果没有name值，提交不成功，导航网址会显示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?-->

         用户：<input type="text" name="ueser"><!--文本输入类型text-->

         <!--添加name值，提交后，导航网址会显示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=111-->

         <br>

         密码：<input type="password" name="password"><!--密码是password--><!--如果输入用户是11，密码是abc展示为这样file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=11&password=abc-->

         <p>这里涉及到加密问题，浏览器传输服务器加密的密文用JS操作处理，后面学习中会聊到的</p>

         <br>

         性别：<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="womnen">女<input type="radio" name="sex" value="weizhi">中性

         <!--radio是单选框,这里的name值都是一样的，如果是不一样的，选择就是多个了-->

         <!-- 性别: <input type="radio" name="sex1">男<input type="radio" name="sex">女<input type="radio" name="sex">中性 -->

         <br>

         <!-- <input type="checkbox">是这个复选框,可以选择多个 -->

         爱好：<input type="checkbox" name="like" value="meinv">美女<input type="checkbox" name="like" value="car">汽车<input type="checkbox" name="like" value="power">权利

         <br>

         <!-- 下拉框select 里面有选项是option -->

         城市:

         <select name="city">

             <option name="beijing" value="bj">北京</option>

             <option name="shanghai" value="sh">上海</option>

             <option name="guangzhou" value="gz">广州</option>

             <option name="shenzhen" value="sz">深圳</option>

         </select>

         <br>

         <input type="submit"><!--文本提交按钮submit-->

         <!--如果这样就点击提交，导航栏会出现file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=1&sex=on&like=on&city=%E5%8C%97%E4%BA%AC-->

     </form>

 </body>

 </html>

然后你会惊讶的发现你的爱好和性别展示都是on，没出来，这是什么原因了？因为前端浏览器给用户看，会涉及到一个默认值，用value表示,就是说只要和选择相关就需要有默认值提交给服务器,这样我们添加下value值，之前是没有的，现在在重新输入下:
浏览器的窗口网址就会展示如下：file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=abc&sex=boy&like=meinv&city=bj

当然这样你提交的内容，服务器还是没办法接收到，那怎么办了?在<form action="">中action=""是一个提交动作，填写你提交的地址，比方说http://www.dhnblog.com/，注意了这里需要用到method=""，我们的请求分为GET和POST，只需要修改form表单开始标签

<form action="" method="GET">GET请求<form action="" method="POST">POST请求,它们的区别是GET请求内容展示在导航栏网址中，POST请求在控制台里面，如下图所示：

html基本标签表单实现交互原理，单选框，复选框，下拉框介绍的更多相关文章

  1. html-4, form 表单 输入、传文件、单选、多选、下拉菜单、文本描述、重置、submit、按钮限制输入

    <!-- form HTTP协议 action:提交的服务器网址 method:get(默认)| post(应用:登录注册.上传文件) 页面中的a img link 默认是get请求 input ...

  2. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  3. spring mvc：常用标签库(文本框，密码框，文本域，复选框，单选按钮，下拉框隐藏于，上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  4. label 标签的用法,点label选中单选、复选框或文本框

    <label>拥有的权限</label> <label class="checkbox" id="privilege_id" st ...

  5. 大型情感剧集Selenium：4_老中医教你(单/多/下拉框)选项定位 #华为云·寻找黑马程序员#

    今天讲什么 讲什么标题说了,讲selenium的单选.多选.下拉框选项定位.但其实这东西,没什么太多说的,又比较枯燥,那该怎么让这一集selenium的课程变得有趣呢?有请老中医,哈哈- 怎么样,这个 ...

  6. 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  7. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  8. select下拉框的探索（<option></option>标签中能嵌套使用其它标签吗）

      select标签大家应该经常用到,有个问题可能没怎么注意过, select标签里面的option标签可以嵌套其它标签吗,比如i,span标签等? 经本人测试,答案是:可以嵌套其它标签,但审查元素会 ...

  9. 基于element-ui的多选下拉框和tag标签的二次封装

    前言: 今年这大半年我主要负责公司的后台教务管理的开发,这个管理系统目前主要是给公司的内部人员去配置公司的核心项目(例如:熊猫小课)的所有数据,例如课程的配置.课程期数的配置.课程版本的配置.活动的配 ...

随机推荐

  1. HTML中CSS引用——选择器的使用

    一.元素选择器     1.书写格式:标记名{/*生命块*/}     2.所有与该标记匹配的元素,都将应用声明块中的规则 二.类选择器     1.书写格式:.类名{/*声明块*/}         ...

  2. ios--->cell里面 self 和self.contentview的区别

    一般我们向cell中添加子视图,有两种方式 [cell addSubview:] [cell.contentView addSubview:] 区别在于进行cell编辑时,比如cell内容向左移或者右 ...

  3. Navicat premium 12 for mac 无限试用

    Mac 终端输入 sudo rm -Rf ~/Library/Application\ Support/PremiumSoft\ CyberTech 重启电脑 成功

  4. 云原生 - Why is istio(二)

    出处:https://cizixs.com/2018/08/26/what-is-istio 创作不易,在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处. 前言 随着微服务架构的流行, ...

  5. Git详解之分布式应用

    前言 为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git ...

  6. 脚本在Shell可以执行成功，放到crontab里执行失败

    一.背景 自己写了个监控MGR状态的脚本,直接在Linux的Shell环境下可以执行成功,但是只要放到crontab里执行,就失败,脚本内容如下 #!/bin/bash MAIL_ADDR=`cat ...

  7. 使用Python通过SMTP发送邮件

    有些业务可能由于各种各样的原因并不适用于Zabbix监控,这时如果要做到系统出问题能立即发送邮件,就需要自己来写监控脚本了,出问题要实时通过邮件报警,以下案例使用Python脚本实现通过SMTP协议发 ...

  8. CUDA学习（六）之使用共享内存（shared memory）进行归约求和（M个包含N个线程的线程块）

    在https://www.cnblogs.com/xiaoxiaoyibu/p/11402607.html中介绍了使用一个包含N个线程的线程块和共享内存进行数组归约求和, 基本思路: 定义M个包含N个 ...

  9. 谈下程序设计算法的准备心得与体会-nCov隔离也许帮你提升能力

    最近武汉的n-Cov使得大家只能在家办公了. 在家里的感受是什么样的呢? 1.上班的时候一直在奔跑,现在总算可以有集中的时间来思考一些之前一直没能好好整理的内容 2.时间变得自己可以掌控,优先级有自己 ...

  10. ROS与激光雷达入门-ROS中使用激光雷达(RPLIDAR)

    激光雷达(RPLIDAR) 我这里用的是思岚(rplidar)A1,通过ros系统去驱动激光雷达,现在做了一个基本的入门. RPLIDAR是低成本的二维雷达解决方案,由SlamTec公司的RoboPe ...