:::

22. 表單

一、基本表單語法

  1. 在 Visual Studio Code 中輸入b4-form-gridEnter 可以快速產生一整組表單語法。
    <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>

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D32%26tbdsn%3D970

計數器

今天: 5353
昨天: 1825182518251825
總計: 7576094757609475760947576094757609475760947576094