# 文本输入框 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)
- 综述
- Jquery mobile介绍 Jquery Mobile Overview
- 关键特性: Key features:
- 可访问性 Accessibility
- a4版本支持的平台 Supported platforms in Alpha 4
- API
- 默认配置
- 事件
- 方法
- 有响应的布局助手
- 主题
- 组件
- 页面与对话框
- 页面
- 页面转场 Page transitions
- 创建对话框 Creating dialogs
- Jquery Mobile的导航模型 Jquery Mobile's navigation model
- 链接的格式 Link formats
- 给页面主题样式 Page Theming
- 工具栏
- 工具栏
- 头部栏
- 尾部栏
- 导航栏
- 固定定位的工具栏会在滚屏后重新出现 Fixed toolbars will re-appear after you scroll
- 全屏的固定的工具栏 Fullscreen fixed toolbar
- 持续的尾部栏 Persistent footer nav bar
- 给头部栏和尾部栏设置主题样式
- 按钮
- 按钮标记选项 Button markup options
- 给按钮添加图标 Adding Icons to Buttons
- 内联按钮 Inline buttons
- 组按钮 Grouped buttons
- 主题化按钮 Theming buttons
- 内容的格式化
- html格式化 HTML Formatting
- 布局网格 Layout grids
- 可折叠的内容 Collapsible content markup
- 给内容主题 Theming content
- 表单元素
- 表单元素 Form elements
- 表单元素示例 Form element gallery
- 文本输入框 Text inputs
- 搜索输入框 Search inputs
- 滑动条 Slider
- 开关 Flip toggle switches
- 复选按钮 Checkboxes
- 单选按钮组 Radio buttons
- 选择菜单 Select menus
- 表单的主题样式 Form themes
- ajax的表单提交 Ajax form submission
- 表单插件的方法 Form Plugin Methods
- Jquery UI 的移动版日期拾取器插件 Jquery UI's Datepicker Styled for mobile
- 列表
- 列表 List views
- 列表标记的规约List markup conventions