ionic-02 UI组件

最新推荐文章于 2020-10-26 11:07:24 发布

Java功程师

最新推荐文章于 2020-10-26 11:07:24 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic

本文链接：https://blog.youkuaiyun.com/qq_37664102/article/details/106367868

ionic 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一个包含多种表单元素及其事件处理的HTML表单示例，包括输入框、日期选择器、下拉菜单及按钮等，展示了如何通过oninput和onsubmit事件进行实时数据处理和表单提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form onsubmit="processForm(event)">
  <!-- <form> -->
    <ion-list lines="full" class="ion-no-margin ion-no-padding">
      <ion-item>
        <ion-label>当光照过小，开关延时<ion-text color="danger">*</ion-text></ion-label>
        <ion-input required type="number" oninput="handleFirstNameValue(event)"></ion-input>
        <ion-label>秒</ion-label>
      </ion-item>

      <ion-item>
        <ion-label>当光照过大，开关延时<ion-text color="danger">*</ion-text></ion-label>
        <ion-input required type="number" oninput="handleLastNameValue(event)"></ion-input>
        <ion-label>秒</ion-label>
      </ion-item>
      
      <ion-item>
        <ion-label>开始时间:</ion-label>
        <ion-datetime display-format="h:mm A" picker-format="h:mm A"></ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label>结束时间:</ion-label>
        <ion-datetime display-format="h:mm A" picker-format="h:mm A"></ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label>大气光照:</ion-label>
        <ion-input required type="number"></ion-input>
        <ion-label>lux</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>外网/内网</ion-label>
        <ion-select placeholder="请选择">
          <ion-select-option value="f">外网</ion-select-option>
          <ion-select-option value="m">内网</ion-select-option>
        </ion-select>
      </ion-item>   
      
        
       
    </ion-list>
    
    <ion-row>
      <ion-col>
        <ion-button expand="full" >加入</ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="full">删除</ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        
          <ion-button expand="full" type="submit" >提交</ion-button>
       
      </ion-col>
      
    </ion-row>
    
  </form>