HTML5-定制input元素的代码实例详解

input元素可以生成一个供用户输入数据的简单文本框。其缺点在于用户在其中输入什么值都可以，可以配置type类型来获取额外的属性。其中type属性有23个不同的值，而input元素共有30个属性，其中许多属性只能与特定的type属性值搭配使用。

一、用input元素输入文字

type属性设置为text的input元素在浏览器中显示为一个单行文本框。

1. 设定元素大小

maxlength属性设定用户能够输入的字符的最大数目；
size属性设定文本框能够显示的字符数目。

2. 设置初始值和占位式提示

value属性设定默认值；
placeholder属性设置一段提示文字，告知用户输入什么类型的数据。

3. 使用数据列表

可以将input元素的list属性设置为一个datalist元素的id属性值，这样用户在文本框中输入数据时只需从后一元素提供的一批选项中选择就行了。

立即学习“前端免费学习笔记（深入）”；

图 chrome下展示

图 firefox下展示
注意：在不同浏览器下表现会有所不同
（1）datalist元素中的每一个option元素都代表一个供用户选择的值，其value属性值在该元素代表的选项被选中时就是input元素所用的数据值；
（2）说明信息，可以通过label属性设置，也可以作为option元素的内容设置。

4. 生成只读或被禁用的文本框

readonly和disabled属性都可以用来生成用户不能编辑的文本框，其结果的外观不同。

注意：设置了disabled属性的input元素的数据不能被提交到服务器；readonly属性的input元素的数据可以被提交到服务器；
建议：readonly属性需要谨慎使用（无视觉信号告知用户禁止编辑，用户不能输入，让用户困惑），应该考虑使用hidden类型的input元素；

二、用input元素为输入数据把关

1. 用input元素获取数值

type属性设置为number的input元素生成的输入框只允许接受数值。

• min设定可接受的最小值；

• max设定可接受的最大值；

• step指定上下调节数值的步长。

  

  移动端UI&微信UI YDUI Touch

  YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

  下载

    
number
    分数:
    

2. 用input元素获取指定范围内的数值

range型input元素可以事先规定一个数值范围供用户选择。

    
range
    价格:
    1
    
    100

3. 用input元素获取布尔型输入

checkbox型input会生成供用户选择是或否的复选框。

    
checkbox
    
    同意条款

注意：提交表单时，只有处于勾选状态的复选框的数据值会发送给服务器（checkbox型input元素的数据项如果不存在于提交项中，则表明用户未勾选）。

4. 用input元素生成一组固定选项

radio型input元素用来生成一组单选按钮，供用户从一批固定的选项中作出选择。它适合于可用有效数据不多的情况。要生成一组互斥的选项，只需将所有相关input元素的name属性设置为同一个值即可。

    
选出你最喜欢的水果:
    
        
        Oranges    
    
        
        Apples    

5. 用input元素获取有规定格式的字符串

type属性设置为email、tel、url的input元素能够接受的输入数据分别为有效的电子邮箱地址、电话号码和URL。

    
规定格式的字符串
    

        
            邮箱:
        
    
    

        
            密码:
        
    
    

        
            电话:
        
    
    

        
            URL:
        
    

注意：上述类型input元素，只有在提交表单的时候才会检测用户输入的数据，且检查效果各不相同。

6. 用input元素获取时间和日期

    
日期&时间
    

        
            日期时间:
        
    
    

        
            时间:
        
    
    

        
            日期:
        
    
    

        
            月份:
        
    
    

        
            周:
        
    

7. 用input元素获取颜色值

color型input元素只能用来选择颜色，提交到服务器的7个字符，如”#011993”。

    
颜色
    
        颜色:
    

8. 用input元素生成图像按钮和分区响应图

image型input元素生成的按钮显示为一幅图像，点击它可以提交表单。

注意：在发送的数据中包括来自那个image型input元素的两个数据项，它们分别代表用户点击位置相对于图像左上角的x坐标和y坐标。

9. 用input元素上传文件

input元素类型是file型，它可以在提交表单时将文件上传到服务器。

    请选择文件:
    
    提交

注意：表单编码类型为multipart/form-data的时候才能上传文件。