diff --git a/src/components/form/index.scss b/src/components/form/index.scss
index 1c6de9d2c..85de6eb63 100644
--- a/src/components/form/index.scss
+++ b/src/components/form/index.scss
@@ -1,8 +1,10 @@
+@import '../../style/theme/default.scss';
+
 .at-form {
   display: block;
-  padding-left: 30px;
-  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
-  border-top: 1px solid #e5e5e5;
+  padding-left: $spacing-h-lg;
+  background-color: $color-bg;
+  border-bottom: $border;
+  border-top: $border;
   overflow: hidden;
 }
diff --git a/src/components/input/index.js b/src/components/input/index.js
index e7860a742..7ceb6a851 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -6,36 +6,25 @@ import './index.scss'
 /**
  * @author:chenzeji
  * @description 单行输入框
+ * @prop name {String} 输入框的唯一标识，传入点击title会聚焦输入框，小程序官方bug，暂时有问题
  * @prop value {String|Number} 输入框值
  * @prop placeholder {String} 提示字符
  * @prop title {String} 输入框左侧标题，若传入为空，则不显示标题
- * @prop maxlength {Number} 最大长度 default:200
- * @prop backgroundColor {String} 背景颜色 default:#fff
+ * @prop maxlength {Number} 最大长度 default:140
  * @prop disabled {Boolean} 是否禁止输入，禁止点击按钮 default: false
+ * @prop editable {Boolean} 是否可编辑 default: true
  * @prop error {Boolean} 是否出现错误, default: false
  * @prop clear {Boolean} 是否显示清除按钮, default: false
- * @prop type {String}  输入框类型,可选为 text,number,password,phone default: text
+ * @prop type {String}  输入框类型,可选为 text,number,password,phone,idcard,digit  default: text
  * @prop autoFocus {Boolean} 是否自动聚焦 default:false
  * @prop onChange {Function} 输入框值改变时触发的事件
  * @prop onFocus {Function} 输入框被选中时触发的事件
  * @prop onBlur {Function} 输入框失去焦点时触发的事件
- * @prop onClickErrorIcon {Function} 点击错误按钮触发的事件
+ * @prop onErrorClick {Function} 点击错误按钮触发的事件
  */
 class AtInput extends Taro.Component {
   handleInput (e) {
-    const { value } = e.target
-    const { type } = this.props
-    let newValue = value
-    if (type === 'phone') {
-      newValue = value.replace(/\D/g, '').substring(0, 11)
-      const valueLen = newValue.length
-      if (valueLen > 3 && valueLen < 8) {
-        newValue = `${newValue.substr(0, 3)} ${newValue.substr(3)}`
-      } else if (valueLen >= 8) {
-        newValue = `${newValue.substr(0, 3)} ${newValue.substr(3, 4)} ${newValue.substr(7)}`
-      }
-    }
-    this.props.onChange(newValue, ...arguments)
+    this.props.onChange(e.target.value, ...arguments)
   }
   handleFocus (e) {
     this.props.onFocus(e.target.value, ...arguments)
@@ -47,87 +36,96 @@ class AtInput extends Taro.Component {
     this.props.onChange('', ...arguments)
   }
   handleClickErrIcon () {
-    this.props.onClickErrorIcon(...arguments)
-  }
-  transferType (type) {
-    if (type === 'phone') {
-      return 'text'
-    }
-    return type
+    this.props.onErrorClick(...arguments)
   }
   render () {
-    const { title, disabled, error, clear, type, placeholder, maxlength, autoFocus, value, backgroundColor } = this.props
-    const rootStyle = `background-color: ${backgroundColor};`
-    const rootCls = ['at-input']
+    const { name, type, maxlength, disabled, title, editable, error, clear, placeholder, autoFocus, value } = this.props
+    let newMaxlength = maxlength
+    let newType = type
+    let newDisabled = disabled
+    const containerCls = ['at-input__container']
     if (error) {
-      rootCls.push('at-input--error')
+      containerCls.push('at-input--error')
     }
     if (disabled) {
-      rootCls.push('at-input--disabled')
+      containerCls.push('at-input--disabled')
+    }
+    if (type === 'phone') {
+      newMaxlength = 11
+      newType = 'number'
+    }
+    if (disabled === false && editable === false) {
+      newDisabled = true
     }
-    return <View className={rootCls} style={rootStyle} >
-      {
-        title
-          ? <Label className='at-input__title'>{title}</Label>
-          : null
-      }
-      <Input className='at-input__input'
-        type={this.transferType(type)}
-        placeholder={placeholder}
-        maxlength={maxlength}
-        autoFocus={autoFocus}
-        value={value}
-        disabled={disabled}
-        onInput={this.handleInput.bind(this)}
-        onChange={this.handleInput.bind(this)}
-        onFocus={this.handleFocus.bind(this)}
-        onBlur={this.handleBlur.bind(this)}
-      />
-      {
-        clear && value
-          ? <View className='at-input__icon' onClick={this.clearValue.bind(this)} >
-            <AtIcon value='close-circle' color='#ccc' size='15' />
-          </View>
-          : null
-      }
-      {
-        error
-          ? <View className='at-input__icon' onClick={this.handleClickErrIcon.bind(this)} >
-            <AtIcon value='warning_fill' color='#e93b3d' size='15' />
-          </View>
-          : null
-      }
-      <View className='at-input__children'>{this.props.children}</View>
+    return <View className='at-input'>
+      <View className={containerCls}>
+        {
+          title
+            ? <Label className='at-input__title' for={name}>{title}</Label>
+            : null
+        }
+        <Input className='at-input__input'
+          id={name}
+          type={newType}
+          placeholder={placeholder}
+          maxlength={newMaxlength}
+          autoFocus={autoFocus}
+          value={value}
+          disabled={newDisabled}
+          onInput={this.handleInput.bind(this)}
+          onChange={this.handleInput.bind(this)}
+          onFocus={this.handleFocus.bind(this)}
+          onBlur={this.handleBlur.bind(this)}
+        />
+        {
+          clear && value
+            ? <View className='at-input__icon' onClick={this.clearValue.bind(this)} >
+              <AtIcon value='close-circle' color='#ccc' size='15' />
+            </View>
+            : null
+        }
+        {
+          error
+            ? <View className='at-input__icon' onClick={this.handleClickErrIcon.bind(this)} >
+              <AtIcon value='warning_fill' color='#e93b3d' size='15' />
+            </View>
+            : null
+        }
+        <View className='at-input__children'>{this.props.children}</View>
+      </View>
     </View>
   }
 }
 const defaultFunc = () => {}
 AtInput.defaultProps = {
   value: '',
+  name: '',
   placeholder: '',
   title: '',
-  maxlength: 200,
+  maxlength: 140,
   type: 'text',
   disabled: false,
+  editable: true,
   error: false,
   clear: false,
-  backgroundColor: '#fff',
   autoFocus: false,
   onChange: defaultFunc,
   onFocus: defaultFunc,
   onBlur: defaultFunc,
-  onClickErrorIcon: defaultFunc
+  onErrorClick: defaultFunc
 }
 AtInput.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
   ]),
+  name: '',
   placeholder: PropTypes.string,
   title: PropTypes.string,
   maxlength: PropTypes.number,
   type: PropTypes.string,
   disabled: PropTypes.bool,
+  editable: PropTypes.bool,
   error: PropTypes.bool,
   clear: PropTypes.bool,
   backgroundColor: PropTypes.string,
@@ -135,6 +133,6 @@ AtInput.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  onClickErrorIcon: PropTypes.func,
+  onErrorClick: PropTypes.func,
 }
 export default AtInput
diff --git a/src/components/input/index.scss b/src/components/input/index.scss
index aff4b9a6f..ed4a88fb2 100644
--- a/src/components/input/index.scss
+++ b/src/components/input/index.scss
@@ -1,39 +1,47 @@
-@import '../../style/mixins/index.scss';
 @import '../../style/theme/default.scss';
 
 .at-input {
-  background-color: #fff;
-  padding: 22px 0;
-  display: flex;
-  align-items: center;
-  border-bottom: #e5e5e5 solid 1px;
+  background-color: $color-bg;
+  padding: $spacing-v-md 0;
+  border-bottom: $border;
+
+  &__container {
+    display: flex;
+    align-items: center;
+  }
 
   &__input {
     flex: 1;
-    font-size: 28px;
-    padding: 0 12px;
+    font-size: $font-size-base;
+    padding-right: $spacing-v-md;
     display: inline-block;
     vertical-align: middle;
   }
 
+  input {
+    height: auto !important;
+    min-height: auto !important;
+  }
+
   &__icon {
     display: inline-block;
-    padding: 0 6px;
+    padding: 0 $spacing-v-md;
     text-align: center;
-    font-size: 20px;
+    font-size: $font-size-base;
   }
 
   &__title {
     width: 150px;
-    margin-right: 20px;
-    font-size: 28px;
+    margin-right: $spacing-h-md;
+    font-size: $font-size-base;
+    line-height: $line-height-zh;
     vertical-align: middle;
     text-align: left;
   }
 
   &__children {
     display: inline-flex;
-    border-left: #e7e7e7 solid 1px;
+    border-left: $border;
 
     > view,
     div,
@@ -41,10 +49,11 @@
     text,
     image,
     .taro-img {
-      font-size: 28px;
+      font-size: $font-size-base;
       display: inline-block;
-      padding: 0 20px;
-      color: #78a4fa;
+      text-align: center;
+      padding: 0 $spacing-v-md;
+      color: $color-brand-dark;
     }
 
     > image,
@@ -58,7 +67,7 @@
   }
 
   &--error {
-    color: #e93b3d;
+    color: $color-error;
   }
 
   &--disabled {
diff --git a/src/pages/form/input/index.js b/src/pages/form/input/index.js
index 587827ab8..358bf3868 100644
--- a/src/pages/form/input/index.js
+++ b/src/pages/form/input/index.js
@@ -21,6 +21,13 @@ export default class Index extends Taro.Component {
       value5: '',
       value6: '',
       value7: '',
+      value8: '',
+      value9: '',
+      value10: '',
+      value12: '',
+      value13: '',
+      value14: '',
+      value15: '',
       disabled: false,
       second: 60
     }
@@ -44,7 +51,7 @@ export default class Index extends Taro.Component {
         // 使用setState 数值更新有延迟
         this.state.disabled = false
         this.setState({
-          second: this.props.second,
+          second: 60,
           disabled: false
         })
         clearInterval(timer)
@@ -75,25 +82,66 @@ export default class Index extends Taro.Component {
         {/* S Header */}
         <DocsHeader title='Input 输入框'></DocsHeader>
         {/* E Header */}
-
         {/* S Body */}
         <View className='doc-body'>
           <View className='panel'>
-            <View className='panel__title'>基础输入框</View>
+            <View className='panel__title'>输入框标题</View>
+            <View className='panel__content no-padding'>
+              <View className='component-item'>
+                <AtForm>
+                  <AtInput name='value1' title='标准五个字' type='text' placeholder='标准五个字' value={this.state.value1} onChange={this.handleInput.bind(this, 'value1')} />
+                  <AtInput title='标题实在特别长就换行' placeholder='其他列保持正常间距' value={this.state.value2} onChange={this.handleInput.bind(this, 'value2')} />
+                  <AtInput placeholder='无标题' value={this.state.value3} onChange={this.handleInput.bind(this, 'value3')} />
+                </AtForm>
+              </View>
+            </View>
+          </View>
+          <View className='panel'>
+            <View className='panel__title'>输入框类型</View>
+            <View className='panel__content no-padding'>
+              <View className='component-item'>
+                <AtForm>
+                  <AtInput title='文本' type='text' placeholder='单行文本' value={this.state.value4} onChange={this.handleInput.bind(this, 'value4')} />
+                  <AtInput title='数字' type='number' placeholder='请输入数字' value={this.state.value5} onChange={this.handleInput.bind(this, 'value5')} />
+                  <AtInput title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.value6} onChange={this.handleInput.bind(this, 'value6')} />
+                  <AtInput title='身份证' type='idcard' placeholder='身份证号码' value={this.state.value7} onChange={this.handleInput.bind(this, 'value7')} />
+                  <AtInput title='小数' type='digit' placeholder='请输入小数' value={this.state.value8} onChange={this.handleInput.bind(this, 'value8')} />
+                  <AtInput title='手机号码' type='phone' placeholder='手机号码' value={this.state.value9} onChange={this.handleInput.bind(this, 'value9')} />
+                </AtForm>
+              </View>
+            </View>
+          </View>
+          <View className='panel'>
+            <View className='panel__title'>状态</View>
+            <View className='panel__content no-padding'>
+              <View className='component-item'>
+                <AtForm>
+                  <AtInput disabled title='禁用' type='text' placeholder='禁止输入' value={this.state.value10} onChange={this.handleInput.bind(this, 'value10')} />
+                  <AtInput error title='出现错误' type='text' placeholder='点击按钮触发回调' value={this.state.value11} onChange={this.handleInput.bind(this, 'value11')} onErrorClick={this.onClickErrorIcon.bind(this)} />
+                  <AtInput editable={false} title='不可编辑' type='text' placeholder='不可编辑' value={this.state.value12} onChange={this.handleInput.bind(this, 'value12')} />
+                  <AtInput clear title='清除按钮' type='text' placeholder='点击清除按钮清空内容' value={this.state.value13} onChange={this.handleInput.bind(this, 'value13')} />
+                </AtForm>
+              </View>
+            </View>
+          </View>
+          <View className='panel'>
+            <View className='panel__title'>自定义右边栏</View>
             <View className='panel__content no-padding'>
               <View className='component-item'>
                 <AtForm>
-                  <AtInput title='标准五个字' type='text' clear placeholder='标准五个字' value={this.state.value1} onChange={this.handleInput.bind(this, 'value1')} />
-                  <AtInput type='number' placeholder='请输入数字' value={this.state.value2} onChange={this.handleInput.bind(this, 'value2')} />
-                  <AtInput title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.value3} onChange={this.handleInput.bind(this, 'value3')} />
-                  <AtInput title='标题实在特别长就换行' placeholder='其他列保持正常间距' value={this.state.value4} onChange={this.handleInput.bind(this, 'value4')} />
-                  <AtInput title='出现错误' clear error onClickErrorIcon={this.onClickErrorIcon.bind(this)} placeholder='其他列保持正常间距' value={this.state.value5} onChange={this.handleInput.bind(this, 'value5')} />
-                  <AtInput title='禁用' disabled placeholder='禁止输入' onChange={this.handleInput.bind(this)} />
-                  <AtInput title='验证码' type='text' maxlength='4' clear placeholder='验证码' value={this.state.value7} onChange={this.handleInput.bind(this, 'value7')}>
+                  <AtInput title='验证码' type='text' maxlength='4' clear placeholder='验证码' value={this.state.value14} onChange={this.handleInput.bind(this, 'value14')}>
                     <Image src={verificationCode} />
                   </AtInput>
-                  <AtInput type='phone' clear placeholder='请输入手机号码' value={this.state.value6} onChange={this.handleInput.bind(this, 'value6')}>
-                    <View style={this.state.disabled ? 'color:#e93b3d;' : ''} onClick={this.sendCode.bind(this)}>{this.showTipText()}</View>
+                  <AtInput type='phone' clear placeholder='请输入手机号码' value={this.state.value15} onChange={this.handleInput.bind(this, 'value15')}>
+                    <View
+                      style={{
+                        'color': this.state.disabled ? '#e93b3d' : '',
+                        'width': '90px'
+                      }}
+                      onClick={this.sendCode.bind(this)}
+                    >
+                      {this.showTipText()}
+                    </View>
                   </AtInput>
                 </AtForm>
               </View>
diff --git a/src/style/theme/default.scss b/src/style/theme/default.scss
index 96b6c897f..c5ff85570 100644
--- a/src/style/theme/default.scss
+++ b/src/style/theme/default.scss
@@ -113,6 +113,9 @@ $zindex-action-sheet: 1010;
 $zindex-picker: 1010;
 $zindex-toast: 1090;
 
+/* border */
+$border: 1px solid #e5e5e5;
+
 /**
  * CSS cubic-bezier timing functions
  * http://bourbon.io/docs/#timing-functions