22. 表單

一、基本表單語法

1. 在 Visual Studio Code 中輸入b4-form-grid按 Enter 可以快速產生一整組表單語法。

   <div class="container">
       <form>
           <div class="form-group row">
               <label for="inputName" class="col-sm-1-12 col-form-label"></label>
               <div class="col-sm-1-12">
                   <input type="text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week" class="form-control" name="inputName" id="inputName" placeholder="">
               </div>
           </div>
           <fieldset class="form-group row">
               <legend class="col-form-legend col-sm-1-12">Group name</legend>
               <div class="col-sm-1-12">
                   
               </div>
           </fieldset>
           <div class="form-group row">
               <div class="offset-sm-2 col-sm-10">
                   <button type="submit" class="btn btn-primary">Action</button>
               </div>
           </div>
       </form>
   </div>

2. 在一般的HTML中<fieldset>和<legend>是有其獨特用途和外觀的，但在 BS4 的表單中，<fieldset>等同<div>，<legend>等同<label>，因此，擇一即可，效果是一樣的。
3. 此表單無法直接用，必須修改後才能使用，例如：

   <form>
       <div class="form-group row">
           <label for="name" class="col-sm-2 col-form-label">姓名</label>
           <div class="col-sm-10">
               <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">
           </div>
       </div>
       <div class="form-group row">
           <div class="offset-sm-2 col-sm-10">
               <button type="submit" class="btn btn-primary">送出</button>
           </div>
       </div>
   </form>