在html语言中,input表单具有很重要的作用。
今天跟着小编一起来看一下input表单的使用方法和效果。
首先我们来了解一下input表单是什么,在哪能用到呢?
咱们先来看个东西
这个想必大家很熟悉了,那么回归到上面的问题,什么是input表单呢?这里的搜索框和“百度一下”按钮就是input表单其中的两种啦。
当网页中需要放置这些东西的时候就能用到它了。
下面咱们来看一下input表单都有哪些:
1、普通按钮
<input type="button" >
它长这样
咱们可以看到现在这个按钮里啥都没有,怎么去给它里面加内容呢?
给标签里一个value值就可以;
<input type="button" value="按钮" >
现在它是这样的
2、重置按钮
<input type="reset">
我们可以看到他们的区别,按钮中内容不一样,不给它value值,按钮内默认为重置,为重置功能的一个按钮。同样的还有一个提交按钮,如下:
3、提交按钮
<input type="submit">
长这样
它是一个功能默认为提交的按钮。
当然上述按钮均可通过给value赋值改变按钮内字样。
4、复选框
<input type="checkbox">苹果<input type="checkbox">橘子
显示结果是这样的
点击可以选中。
说到多选框肯定就少不了单选框啦!咱们下面来看一下单选框。
5、单选框
<input type="radio">北京
长这样
当然点击也可以选中。
这两个选择框,当给它写上一个checked时,它的默认状态就变为选中状态了
<input type="radio" checked>北京
是这样的
那么问题来了,现在我们只有点击选择框才能选中,选择框很小,这样操作起来不是很方便,有什么方法可以当我们选中想选择的内容时,让它就可以被选中呢?那就不得不提label标签了,它有什么功能呢?
它的作用就是与表单元素建立联系,使之点击label内容则聚焦到相关的表单元素上,咱们来看看应该怎么写:
input type="radio" name="" id="place">
<label for="place">江苏</label>
显示上没有差异
当给表单元素的id和label标签中的for赋同样一个值(取同样的名字)时,它们就有所关联了,点击需要选择的内容就能选中了。
6、文件上传
<input type="file">
顾名思义就是上传文件的一个表单
7、隐藏字段
<input type="hidden" value="中国">
没有任何显示,用来隐藏value值,这里中国就被隐藏了,不作任何显示,没有什么实际功能,基本也是用不到,小编暂时还没有用到过,它的功能还有待小编去探索。
8、图片
<input type="image" src="../images/美图一张.jpg">
src是引入图片的路径
具有提交功能的图片,点击图片可提交,类似于提交按钮。
9、密码框
<input type="password">
一般在需要输入密码时使用
它长这样
在输入内容时,它是啥样呢?相信大家都能猜到啦,在这就不卖关子啦,快随小编一起来看看吧:
10、单行文本框
<input type="text">
它是个啥样子呢,我们来看一下:
我们可以看到在不输入内容时它和密码框效果一致,区别在密码框在输入内容时会被隐藏,而单行文本框则不会,它是这样的:
说到单行文本框,那多行文本框该如何实现呢,这就要用到文本域了,随小编一起来看一下是怎么实现的吧。
11、文本域
<textarea name="" id="" cols="30" rows="10" maxlength="100"></textarea>
这里cols=“30”表示文本框列长为30,rows=“10”表示行高为10,maxlength="100"表示最多输入字数为100。
(更全更具体属性会在后续中更新)
它显示为:
一般用来写评论之类的。
今天暂时就分享到这。
小编作为初学者,多有不足和不对的地方,望各位大咖指出,不胜感激!
未完待续。。。。。。