Input的多种场景用法整理

1、 定义和用法
标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式，和不同的表达方法（来自w3c）
比如：
,文本框 ,密码框 ,提交按扭 ,复选框,单选框 ,隐藏域
,按扭 ,浏览文件

提示：input 元素是空的，它只包含属性
那么一般都是把放在元素中，就比如：

格式一般都是这样子的，input是包含在form元素中，你想要的效果，通常是改变type的值就能做到。 这些都是比较常见的标签用法，接下来会举例子演示

1. ,文本框
   这个大家都不陌生，在有登陆 注册的页面上都会有它的存在，还有在搜索框中也需要用到文本框，那么就看下
   如图：
   

效果图：

2. ,提交按扭
   在form表单中，submit是默认为提交按钮，所以来看下效果
   如图：
   
   效果图：
   
   点了提交就会自动跳转到百度去
   3）,按扭
   既然说到了提交按钮那就继续说一下按钮，
   就是submit跟 button, 提交按钮出来就是会跳转到其它页面去，而button按钮则需要通过 ononclick 方法来跳转，内容也是要通过value值来实现，现在看下代码;
   图：

效果图：

这个是点了然后跳转的了（没网^@）,其实也就是多了句onclick。
继续下个
4）,单选框
单选框在登录或注册中有时要用到，也是个常用到的元素，如果你的名字相同就不能多选，就比如：

如果需要用到多选也可以通过把名字改变就可以多选了，不多说
发图：

再附上效果图：

              [在这里插入图片描述](https://img-blog.csdnimg.cn/20190120200625891.PNG)

• 1

5）,复选框
写完了单选框，但在form元素里还有个直接实用的多选框，一般是拿来注册时选择爱好、性格等
如图：

效果图：

那现在也写完了复选框。
6）,密码框
这个英文很容易就能看出这是个密码框，其实跟text差别不大，最主要的区别就是在密码框里输入的子体都是字符状态，直接给大家看代码
如图：

效果图：

这个也是很容易的啦
7）,浏览文件
这个主要是为你上传文件时提供一个文件目录输出平台，也比较简单，就是一句代码就能搞定的
如图：

效果图：

只要点击了后就会弹出一个选择文件目录的一个平台，然后最后说的就是隐藏域了
8）,隐藏域
为什么要最后说呢？是因为要打的内容比其它的要多。。。。
好吧，这个隐藏域呢一般拿来是，比如吧一个信息需要被提交到下一页，但又不能或者无法看到时。通俗点就是你在页面中是看不到hidden在哪里。最有用的是hidden的值。还需要用到javascript来进行显示，所以就放到了最后。
效果图：

就是这样的一个效果。

这篇共写了8种用法，但input用法不止这八种，还有更多的方法，但在这里我就只写8种，剩下的你們可以打出来看效果，好了，结束。
原文链接：https://blog.csdn.net/weixin_44556271/article/details/86565366