前端入门，input表单杂谈（上）

在html语言中，input表单具有很重要的作用。
今天跟着小编一起来看一下input表单的使用方法和效果。

首先我们来了解一下input表单是什么，在哪能用到呢？

咱们先来看个东西

百度.png

这个想必大家很熟悉了，那么回归到上面的问题，什么是input表单呢？这里的搜索框和“百度一下”按钮就是input表单其中的两种啦。

当网页中需要放置这些东西的时候就能用到它了。

下面咱们来看一下input表单都有哪些：

1、普通按钮

<input type="button" >

它长这样

普通按钮1.png

咱们可以看到现在这个按钮里啥都没有，怎么去给它里面加内容呢？
给标签里一个value值就可以;

  <input type="button" value="按钮" >

现在它是这样的

普通按钮2.png

2、重置按钮

<input type="reset">

重置按钮1.png
我们可以看到他们的区别，按钮中内容不一样，不给它value值，按钮内默认为重置，为重置功能的一个按钮。同样的还有一个提交按钮，如下：

3、提交按钮

<input type="submit">

长这样

提交按钮1.png
它是一个功能默认为提交的按钮。
当然上述按钮均可通过给value赋值改变按钮内字样。

4、复选框

<input type="checkbox">苹果<input type="checkbox">橘子

显示结果是这样的

复选框1.png
点击可以选中。

说到多选框肯定就少不了单选框啦！咱们下面来看一下单选框。

5、单选框

<input type="radio">北京

长这样

单选框1.png
当然点击也可以选中。
这两个选择框，当给它写上一个checked时，它的默认状态就变为选中状态了

<input type="radio" checked>北京

是这样的

单选框2.png

那么问题来了，现在我们只有点击选择框才能选中，选择框很小，这样操作起来不是很方便，有什么方法可以当我们选中想选择的内容时，让它就可以被选中呢？那就不得不提label标签了，它有什么功能呢？
它的作用就是与表单元素建立联系，使之点击label内容则聚焦到相关的表单元素上，咱们来看看应该怎么写：

input type="radio" name="" id="place">
<label for="place">江苏</label>

显示上没有差异

label标签1.png

当给表单元素的id和label标签中的for赋同样一个值（取同样的名字）时，它们就有所关联了，点击需要选择的内容就能选中了。

6、文件上传

<input type="file">

顾名思义就是上传文件的一个表单

文件上传1.png

7、隐藏字段

<input type="hidden" value="中国">

没有任何显示，用来隐藏value值，这里中国就被隐藏了，不作任何显示，没有什么实际功能，基本也是用不到，小编暂时还没有用到过，它的功能还有待小编去探索。

8、图片

<input type="image" src="../images/美图一张.jpg">

src是引入图片的路径
具有提交功能的图片，点击图片可提交，类似于提交按钮。

美图一张.jpg

9、密码框

<input type="password">

一般在需要输入密码时使用
它长这样

密码框1.png

在输入内容时，它是啥样呢？相信大家都能猜到啦，在这就不卖关子啦，快随小编一起来看看吧：

密码框2.png

10、单行文本框

<input type="text">

它是个啥样子呢，我们来看一下：

单行文本框1.png
我们可以看到在不输入内容时它和密码框效果一致，区别在密码框在输入内容时会被隐藏，而单行文本框则不会，它是这样的：
单行文本框2.png

说到单行文本框，那多行文本框该如何实现呢，这就要用到文本域了，随小编一起来看一下是怎么实现的吧。

11、文本域

<textarea name="" id="" cols="30" rows="10" maxlength="100"></textarea>

这里cols=“30”表示文本框列长为30，rows=“10”表示行高为10，maxlength="100"表示最多输入字数为100。
（更全更具体属性会在后续中更新）
它显示为：

文本域1.png
一般用来写评论之类的。

今天暂时就分享到这。
小编作为初学者，多有不足和不对的地方，望各位大咖指出，不胜感激！
未完待续。。。。。。