Input的多种用法

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

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

格式一般都是这样子的,input是包含在form元素中,你想要的效果,通常是改变type的值就能做到。 这些都是比较常见的标签用法,接下来会举例子演示
  1. ,文本框
    这个大家都不陌生,在有登陆 注册的页面上都会有它的存在,还有在搜索框中也需要用到文本框,那么就看下
    如图:
    在这里插入图片描述

效果图:

在这里插入图片描述

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

在这里插入图片描述
效果图:
在这里插入图片描述
这个是点了然后跳转的了(没网@),其实也就是多了句onclick。
继续下个
4),单选框
单选框在登录或注册中有时要用到,也是个常用到的元素,如果你的名字相同就不能多选,就比如:

如果需要用到多选也可以通过把名字改变就可以多选了,不多说
发图:
在这里插入图片描述
再附上效果图:

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

5),复选框
写完了单选框,但在form元素里还有个直接实用的多选框,一般是拿来注册时选择爱好、性格等
如图:
在这里插入图片描述

效果图:
在这里插入图片描述
那现在也写完了复选框。
6),密码框
这个英文很容易就能看出这是个密码框,其实跟text差别不大,最主要的区别就是在密码框里输入的子体都是字符状态,直接给大家看代码
如图:
在这里插入图片描述
效果图:
在这里插入图片描述
这个也是很容易的啦
7),浏览文件
这个主要是为你上传文件时提供一个文件目录输出平台,也比较简单,就是一句代码就能搞定的
如图:
在这里插入图片描述
效果图:
在这里插入图片描述
只要点击了后就会弹出一个选择文件目录的一个平台,然后最后说的就是隐藏域了
8),隐藏域
为什么要最后说呢?是因为要打的内容比其它的要多。。。。
好吧,这个隐藏域呢一般拿来是,比如吧一个信息需要被提交到下一页,但又不能或者无法看到时。通俗点就是你在页面中是看不到hidden在哪里。最有用的是hidden的值。还需要用到javascript来进行显示,所以就放到了最后。
效果图:
在这里插入图片描述
就是这样的一个效果。
在这里插入图片描述
这篇共写了8种用法,但input用法不止这八种,还有更多的方法,但在这里我就只写8种,剩下的你們可以打出来看效果,好了,结束。

  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值