Tad 教材網 - 線上書籍

:::

\[1102\] PHP全端開發
================

1. 我們用BootStrap4的水平表單來製作表單外觀：<https://bootstrap.hexschool.com/docs/4.2/components/forms/#horizontal-form>
2. 根據 `$op` 值，我們建立 `templates/op_tad_signup_actions_create.tpl` 檔案 
  ```markup
  <h2 class="my">活動設定</h2>
  <form action="index.php" method="post" id="myForm" enctype="multipart/form-data" class="form-horizontal">
  
      中間欄位部份
  
      <div class="bar">
          <{$token_form}>
          <input type="hidden" name="uid" value="<{$uid}>">
          <input type="hidden" name="op" value="<{$next_op}>">
          <button type="submit" class="btn btn-primary">
              <i class="fa fa-save" aria-hidden="true"></i> <{$smarty.const._TAD_SAVE}>
          </button>
      </div>
  </form>
  
  ```
3. BootStrap3+BootStrap4水平表單欄位的整合性寫法 
  ```markup
  <div class="form-group row">
      <label class="col-sm-2 control-label col-form-label text-md-right">
          標題
      </label>
      <div class="col-sm-10">
          表單欄位
      </div>
  </div>
  ```
4. 活動標題（文字輸入框） 
  ```markup
  <div class="form-group row">
      <label class="col-sm-2 control-label col-form-label text-md-right">
          活動標題
      </label>
      <div class="col-sm-10">
          <input type="text" name="title" id="title" class="form-control validate[required]" value="<{$title}>" placeholder="請輸入活動標題">
      </div>
  </div>
  ```
5. 活動說明（大量文字框） 
  ```markup
  <div class="form-group row">
      <label class="col-sm-2 control-label col-form-label text-md-right">
          活動說明
      </label>
      <div class="col-sm-10">
          <textarea name="detail" id="detail" class="form-control validate[required]" placeholder="請輸入活動說明"><{$detail}>

``` 6. 活動日期、截止日期（日期類型的文字輸入框） ```markup

報名截止日期

活動日期

``` 7. 報名人數（數字類型的文字輸入框） ```markup

報名人數

``` 8. 表單欄位設定 ```markup

欄位設定

``` 9. 是否啟用（單選） ```markup

是否啟用

checked<{/if}>> 是

checked<{/if}>> 否

``` 10. 幾個日期欄位希望可以有日曆可以選，所以加載 tadtools 中的 My97DatePicker 小月曆工具，上方先 `use `之 ```php use XoopsModules\Tadtools\My97DatePicker; ``` 函式中只要產出其語法即可（會自動將相關 js 及 css 放到``中） ```php My97DatePicker::render(); ``` 11. 小月曆可參考：[https://www.tad0616.net/modules/tad\_book3/page.php?tbsn=15&tbdsn=368](https://www.tad0616.net/modules/tad_book3/page.php?tbsn=15&tbdsn=368) 12. 由於發布活動會紀錄使用者編號 `uid`，所以需由PHP取得後送至樣板 ```php $uid = $xoopsUser->uid(); $xoopsTpl->assign('uid', $uid); ``` 當然也可以儲存時再自動取uid，作法各有優缺點。 [![](https://www.tad0616.net/uploads/tad_book3/image/48/to_github.png)](https://github.com/tadlearn/tad_signup/commit/bbf066bea2f1020bf7737a2f4e075860564ecff3)

:::