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

    在1.0版本上,利用数组进行用户的创建,通过调用数组下标,进行密码.余额的使用.新增了切换账户.修改密码的功能 以下为数组版代码. 创建模拟账户 个账户: let user = ["xiao ...

  2. 深入理解ClassLoader

    深入理解ClassLoader ClassLoader 作用 负责将 Class 加载到 JVM 中 ClassLoader主要对类的请求提供服务,当JVM需要某类时,它根据名称向ClassLoade ...

  3. RoBERTa模型总结

    RoBERTa模型总结 前言 ​ RoBERTa是在论文<RoBERTa: A Robustly Optimized BERT Pretraining Approach>中被提出的.此方法 ...

  4. Centos 7 最小化部署svn版本控制(svn协议)

    1.关闭selinux sh-4.2# sed -i 's/enforcing/disabled/' /etc/selinux/config sh-4.2# reboot 2.卸载防火墙 sh-4.2 ...

  5. C++ 类模板详解(一)：概念和基本使用方式

    与函数模板类似地(C++函数模板详解(一):概念和特性) ,类也可以被一种或多种类型参数化.例如,容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,我们就可以实 ...

  6. RestTemplate远程调用方法

    概述: spring框架提供的RestTemplate类可用于在应用中调用rest服务,它简化了与http服务的通信方式,统一了RESTful的标准,封装了http链接, 我们只需要传入url及返回值 ...

  7. mysql常用语句及实题训练

    基本语句操作 创建数据库: create database database-name 1 删除数据库: drop database database-name 1 修改数据名: RENAME DAT ...

  8. sqlserver backup and restore -- partital restore

    Like a tratitional database, sqlserver not only could resotre full database but also do restore one ...

  9. CentOS8 上安装Docker

    从 2017 年 3 月开始 docker 在原来的基础上分为两个分支版本: Docker CE 和 Docker EE.Docker CE 即社区免费版,Docker EE 即企业版,强调安全,但需 ...

  10. 这个 Spring 循环依赖的坑，90% 以上的人都不知道

    1. 前言 这两天工作遇到了一个挺有意思的Spring循环依赖的问题,但是这个和以往遇到的循环依赖问题都不太一样,隐藏的相当隐蔽,网络上也很少看到有其他人遇到类似的问题.这里权且称他非典型Spring ...