HTML标签之——<input>

<input>是HTML众多标签中最豪华的标签,拥有30多种属性,最常见的应用是在<form>标签中
常用的type以及属性
属性:
     type                 input的类型(或则说输入域的显示形式)
     maxlength       最多输入夫人字符数
     size                  输入域的长度(测试不好用)
     value               输入域的值
     placeholder     默认提示
     readonly         只读
     patten            输入验证的正则
     checked         (复选框或则单选框)以及被选中
     disabled         input框无法获得焦点
     tabindex        输入域TAB的遍历顺序
     name             非常非常重要  
type:
     text             ----文本框
     password     ----密码
     checkbox     ----复选框
     radio            ----单选框
     submit         ----提交
     image          ----图片(表单中点击可以用来提交表单)
     file               ----选择文件选项
     hidden         ----隐藏(网页中不可见,但是表单提交的时候还是会被提交)
     reset            ----重置
     button         ----按钮    
1.type = "text" input标签中最常见的一种(包含placeholder,tabindex,maxlength,list用法)
<input type="text" mame ="apple" maxlength="10" placeholder = "请输入" list ="listdata">
<datalist id="listdata">
      <option laber="en">red</option>
      <option>yollow</option>
</datalist>



type="text"                input框中可以输入文本
maxlength="10"        只能输入10个字符,多余10的将不显示
list ="listdata"            配合<datalist>标签,构建input框的下拉选择和提示,自动补全(H5新增的比较不错的一个属性,只用于text属性)
<datalist>                  <datalist>中是构建选择(提示的内容),<option>还可以使用laber属性为option提供说明



2.type ="password" 密码输入

<input type="password"  placeholder = "请输入密码qqqqqqqqqqqqqq" name="" maxlength="10" 


这个大家登陆注册什么的时候都有用到,都很熟
   额外加了maxlength  和list(正常的输入密码的input框是用不到的)
   只为说明placeholder不受type类型 和maxlength影响



 3.submit  reset  button
这三个一起讲的原因是它们最后生成的都是按钮的样式
 
 <form>
       <input type="text" mame ="apple" maxlength="10" placeholder = "请输入" list ="listdata">
        <datalist id="listdata">
            <option label="en">red</option>
            <option>yollow</option>
        </datalist>
        <p>
        <input type="password"  placeholder = "请输入密码" name="pwd"   >
        <p>
        <input type="submit" name="" value="提交" formaction="http://www.baidu.com" formmethod="POST" >
        <input type="reset" name="" value="重置内">
        <input type = "button" value = "按钮">
    </form>
        <input type="reset" name="" value="重置外">
 
这边需要说明几点
(1)submit是用来提交的,在type=“submit”之后还可以使用formaction formmethod formtarge                                              formnovalidate分别重写form表单中的action method  target novalidate属性 
(2)type=“reset”只能在表单中重置表单内容,在表单外没有作用
(3)type = “button“生成的只是普通按钮



4.type = “hidden”

 <input type="hidden" name="name" value = "1">
这个在页面上说明也看不到,但是有一点非常重要:就是在表单提交的时候hidden的内容也会被提交(可以用来把药提交的数据放置在表单的hidden input框中,提交的时候一起提交到后台服务器)



5.type =“checkbox”

复选框:<input type="checkbox" name="vigg" checked >

(1)给复选框框设置checked属性就会默认选中
(2)复选框在没有勾选提交表单的时候不会提交,只有在被勾选的时候才会被提交(默认为on)



6.type = “radio”

 单选框:<input type="radio" name="select">apple
       <input type="radio" name="select" checked >orange
       <input type="radio" name="select">yellow


单选框和复选框的用法差不多,暂不多说

7.type = “date”

<input type="date" name="time">


用在需要用户输入日期的时候,效果不错;

8.type =“color”

 <input type="color" name="color">


点击能显示出一个颜色选择器,虽然用到的地方不多,但是效果还是不错的

9.type =“file”

  <input type="file" name="file" multiple >



这是一个让人有爱有恨的功能,它很好解决了PC端上传文件到服务器,但是可恨的是在移动端,苹果手机支持还可以,Android在这方面就是个大坑啊,之前做过一个在微信端需要上传的功能,各种Android支持不一同,有的打不开文件选择,有的不支持multiple多选属性,最后只能用微信自己的接口(js-sdk)实现

10.type = “image” + 分区响应

<input type="image" src="xxxxxxxxxxxx" height="xxxxxxx" formaction = "xxx" formmethod="xxx" ... >
image的用法和submit有点像,就是多了src和height属性,其他formeacton 属性用法都一样
但是image还有一个特性,点击image的时候不止会提交表单信息,还会提交点击相对于图片左上角的坐标位置,这样就可以来做分区响应了,点击不同区域进行不同的操作。


11.number range
这两个都是针对数字的

<input type="number" name="number" min="0" max="100" step="5" >
<input type="range" name="a" min="0" max="100" step="1" >

min max是设置最小最大的,step是设置步长的



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值