调用模板时，模板中的表单无法提交

Question

情况是这样的，我做了一个简单的表单模板

<template name='form1'>
  <form bindsubmit='formsubmit'>
    <input name='name'></input>
    <button form-type='submit'>提交</button>
  </form>
</template>

然后在调用这个模板时发现“提交”按钮无效。

不太理解的是，我在页面中如果不采用调用temlate的方式，提交按钮就正常。
请教了

Answer 1

不应该是<input type='submit'>吗？<button form-type>哪来的？

Answer 2

原因找到了，是因为我在css中多了一个view图层，影响了button的点击。

Answer 3

请问具体情况是怎么样的.
我没太明白。也遇到了按钮失效，现在不知道该怎么办

wxml

<view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">企业名称</view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style='text-align:right' placeholder="请输入" auto-focus/>
      </view>
    </view>
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">联系电话</view>
      </view>
      <view class="placeholderCon">
        <input type="number" maxlength="11" class="placeholder" placeholder-style='text-align:right' placeholder="请输入" auto-focus/>
      </view>
    </view>
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">车型</view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style='text-align:right' placeholder="请输入" auto-focus/>
      </view>
    </view>
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">发动机</view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style='text-align:right' placeholder="请输入" auto-focus/>
      </view>
    </view>

    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">出售主题</view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style='text-align:right' placeholder="请输入" auto-focus/>
      </view>
    </view>

    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">出售价格</view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" type="number" placeholder-style='text-align:right' placeholder="请输入" auto-focus/>
      </view>
    </view>
    <view class="itemContainerDetail">
      <view class="iconAndTextDetail">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">出售内容</view>
      </view>
    </view>
    <view class="itemContainerDetailDetail">
      <view class="DetailDetail">
        <textarea class="placeholderDetail" placeholder-style='text-align:right' placeholder="请输入" name="detail" />
      </view>
    </view>
    <view class="btn-area">
      <button class="sub_but" formType="submit">发布特卖</button>
    </view>
  </form>
</view>

wxss

.icons {
  width: 30rpx;
  height: 30rpx;
  padding: 15rpx 15rpx 15rpx 15rpx;
}

.grayCon {
  background-color: #fff;
}

 .itemContainer {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 10rpx 25rpx;
} 
.itemContainerDetail {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  /* border-bottom: 1rpx solid #e5e5e5; */
  padding: 10rpx 25rpx;
}
.itemContainerDetailDetail{
  display: flex;
  background-color: #fff;
  /* justify-content: space-between; */
  border-bottom: 1rpx solid #e5e5e5;
  padding: 10rpx 25rpx;
  border-radius: 13rpx;
}
 .DetailDetail{
  padding: 30rpx;
} 

.icon_text {
  padding: 15rpx;
  font-size: 33rpx;
}

.iconAndText {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.iconAndTextDetail{
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}
 .placeholderCon{
  display: flex;
  flex-direction: row;
  width: 480rpx;
  align-items: center;
} 
.placeholder {
  font-size: 33rpx;
  width: 480rpx;
}
.placeholderDetail {
  font-size: 33rpx;
  width: 650rpx;
}
.sub_but{
  margin-top: 20rpx;
  width: 80%;
  color: #fff;
  background-color:red;
}

js

  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },