表单是什么？表单是前端和服务器做交互的一种机制，表单收集用户输入信息，之后发送或者提交给服务器。用户在输入的信息称之为内容，内容的文本分为普通和密码型，用户通过单选框、复选框、下拉框（也就是下拉菜单）完成内容信息输入，最后通过提交按钮发送给服务器！这里要讲到浏览器怎么发送给服务器？涉及到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. python数据类型之字典操作

    Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型.一.创建字典字典由key和value成对组成.基本语法如下: infos = {"name&q ...

  2. 【阿K学Python系列】一Python基础语法(二)

    前言 通过上一章的学习[阿k学Python]一Python入门(一),我们已经初步了解到Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,当然也是一门脚本语言,像前端需要学习的Jav ...

  3. K8S生产环境中实践高可靠的配置和技巧都有哪些？

    K8S环境中实践高可靠的配置和技巧都有哪些? 磁盘类型及大小 磁盘类型: 推荐使用ssd 磁盘 对于worker节点,创建集群时推荐使用挂载数据盘.这个盘是专门给/var/lib/docker 存放本 ...

  4. oracle问题之死锁 （一）

    [前言] 遇到 oracle 异常 和 解决实践 系列文章 整理分享 杂症一.oracle死锁 一.症状: 执行SQL或程序时,程序没有响应或SQL执行一直处于执行状态,没有成功,也没有报错. 二.病 ...

  5. Matlab 与 c++对txt 文档的读写格式

    学习g++能够读取什么格式的txt文件. 读基本指令: >sprintf(filename, "doc_%d.txt", d); >fileptr = fopen(fi ...

  6. Java基础知识之设计模式--单例模式

    Java设计模式--单例模式 声明:本文根据慕课网汤小洋老师的精品课程整理来的:慕课网 什么是设计模式(Design Pattern)? 设计模式是一套被反复使用,多数人知晓的,经过分类编目的,代码设 ...

  7. 05讲基础篇：某个应用的CPU使用率居然达到100%，我该怎么办

    小结 CPU 使用率是最直观和最常用的系统性能指标,更是我们在排查性能问题时,通常会关注的第一个指标.所以我们更要熟悉它的含义,尤其要弄清楚用户(%user).Nice(%nice).系统(%syst ...

  8. 如何利用开源解码项目开发js视频解码的web应用 系列

    介绍web上开发视频业务相关程序的技术演变历程 https://www.cnblogs.com/maoliangwu/articles/12046495.html 介绍ffmpeg asm.js we ...

  9. Centos 7 x64 系统初始化

    前言 Hi,小伙伴们,系统初始化是运维工作中重要的一环,它能有效的提升工作效率,并且是标准化规范化的前提:它能省去要用时再去下载的麻烦,另外,还可以避免因未初始化引起的一些故障问题,可谓好处多多.系统 ...

  10. Java并发编程-扩展可回调的Future

    前提 最近在看JUC线程池java.util.concurrent.ThreadPoolExecutor的源码实现,其中了解到java.util.concurrent.Future的实现原理.从目前j ...