🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 文本输入框 Text inputs 文本输入框和文本输入域使用标准的html标记的,然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用 要使用输入标准文字的输入框,给input增加type="text"属性。注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性 **HTML 代码:** ``` <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> ``` **文本输入?Text Input:** ![](images/form%20element/text.png) ## 密码输入框 Password inputs 给input设置type="password"属性,可以设置为密码框,注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性 **HTML 代码:** ``` <div data-role="fieldcontain"> <label for="password">Password Input:</label> <input type="password" name="password" id="password" value="" /> </div> ``` **密码输入框 Password inputs** ![](images/form%20element/pw.png) ## 其他的标准的HTML5输入框类型 More standard HTML5 input types 在Jquery Mobile中,你可以使用新的HTML5输入框类型,比如email, tel, number。Jquery Mobile会把某些类型的输入框降级为普通的文字输入框(目前?range和search)。你可以在页面的插件选项里设置,把需要的input类型降级为普通的文字输入框 ## 文本域 Textareas 对于多行输入可以使用textarea元素。Jquery Mobile框架会自动加大文本域的高度防止出现在移动设备中很难使用的滚动条的出现 注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性 **HTML 代码:** ``` <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> ``` **文本域 Textareas** ![](images/form%20element/area.png)