HTML5 APP开发之Input输入框

Input输入框控件,应该说无论是B/S模式开发,还是C/S模式开发,还是APP开发,都是常用的控件。那么,对于HTML5 APP开发而言,Input输入框控件,又有多少种形状呢,下面将详细介绍。

掌握Input输入框技能,将会提升开发效率。同时,也对开发时,应该选择哪种类型,可以给出最佳方案。

工具/原料

HBuilder6.6

MUI2.5

方法/步骤

空白的Input输入框控件。

代码如下:<input id="test" value=""/>

这是最常见,也是最常用的写法。

HTML5 APP开发之Input输入框

带提示文件的Input输入框控件。

代码如下:<input id="test" value="" placeholder="提示内容"/>

多了一个placeholder元素,该元素的意思是:当点击输入框时,提示的内容会消失。

HTML5 APP开发之Input输入框

带图标的Input输入框控件。

代码如下:

<div class="mui-card">

<div class="mui-input-row mui-icon mui-icon-person mui-left" style="padding: 5px;">

<input type="person" class="mui-input-clear mui-input" id="test" name="test" style="border: none;">

</div>

</div>

效果比带文字的输入框更丰富了。

HTML5 APP开发之Input输入框

带图标+文字的Input输入框控件。

代码如下:

<div class="mui-input-row mui-search">

<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">

</div>

效果是不是很酷。

HTML5 APP开发之Input输入框

Lable+图标+文字的Input输入框控件。

代码如下:

<form class="mui-input-group">

<div class="mui-input-row"> <label>Input</label> <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入"> </div></form>

HTML5 APP开发之Input输入框

最后,我们一起看看所有Input形状的输入框对比效果是怎样的。以便在选择时,可以做到心中有数。

HTML5 APP开发之Input输入框

相关文章

  1. HTML5 APP开发之Button按钮

    之前介绍了Input输入框,在HTML5 APP开发下的各种形状是怎样的.那么,对于同样重要的控件:Button按钮,又有怎样的形状,以及使用Button按钮时,又应该注意哪些事项呢. 下面将逐一介绍: 0 HTML5 APP开发之Input输入框 工具/原料 HBuilder6.6 MUI2.5 ...

  2. hbuilder app开发之列表

    列表,是HTML开发的常见功能.对于HTML5 APP开发而言,列表的重要性,就更加突出了.那么,列表在HTML5 APP开发中的形状有多少种呢.以及列表在APP下,又是如何实现分页处理的呢. 下面将逐一介绍(想了解hbuilder app开发Input功能,hbuilder app开发 Butto ...

  3. HTML5新手基础教程

    HTML5教程 什么是HTML5? 在这里我不说一些特别难懂的语言,我这里简单的解释一下,如果你学过HTML,那么就是HTML4,HTML5是针对现有的版本进行了一些丰富,把一些原先常用的标签进行了统一,还添加了一些以前没有的新标签来满足更复杂的功能,像原先网页上面的音乐播放器,现在都不需要通过fl ...

  4. web app开发中 iPhone.iPad默认按钮样式问题

    工具/原料 html5 css3 iphone手机 Android手机 iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input[type="su ...

  5. HTML5代码学习:值得收藏的HTML5代码片段

    网页制作Webjx文章简介:绝对应当收藏的10个实用HTML5代码片段. HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢! HTML5的最 ...

  6. HTML5 APP开发之创建APP项目

    越来越多的人开始使用HTML5来开发APP软件.因为HTML5掌握的成本低,主要的是IOS和安桌操作系统下,都可以运行,节省了开发成本. 那么,应该如何创建一个HTML5 APP项目呢.请按如下步骤,将可轻松实现. 方法/步骤 打开HBuilder软件,点击"文件"-" ...

  7. html5中下拉列表datalist 标签的使用方法

    随着html5的出来,有很多爱好网页开发的朋友们纷纷地开始学习html5了,我也是其中一个哈哈,有兴趣的朋友可以加我好友一起学习知识.下面来看看html5中的下拉列表datalist 的使用方法和技巧. 工具/原料 html开发工具 方法/步骤 直接进入正题,新建一个网页文件,我使用的是editpl ...

  8. HTML5表单验证

    HTML5已被更多的应用程序所使用,特别是内部应用程序,而HTML5的验证功能,无疑是其中最常用的功能,本文作者(jawidx)将根据自己的使用经验对其进行简单介绍. 工具/原料 Internet Explorer HTML5验证 HTML5加强了表单验证功能,可验证是否可空及输入内容的类型及格式, ...

  9. HTML5 APP开发之自动登录

    之前的章节已介绍了如何创建APP项目.如何调试APP页面.如何打包.如何发布,如何全量升级,以及如何用户登录功能. 本章节,将在用户登录功能的基础上,做进一步的提练---自动登录功能. 0 HTML5 APP开发之用户登录 工具/原料 HBuilder6.6 MUI2.5 方法/步骤 首先,在登录页 ...