Form controls表单属性控制

Form controls

Give textual（文本性） form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states（获取的焦点状态）, and more.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm. 利用这样的类来设置高度

        <input class="form-control form-control-lg" 
        type="text" placeholder=".form-control-lg" >
        
        <input class="form-control" type="text" 
        placeholder="Default input">
        
        <input class="form-control form-control-sm" 
        type="text" placeholder=".form-control-sm">

Disabled & Readonly

Add the disabled boolean attribute on an input to give it a grayed out（灰暗） appearance（外观）, remove pointer events, and prevent（阻止） focusing.

• &#x20;disabled boolean attribute可以让一个input框变灰并且无法被选定

• &#x20;readonly boolean attribute不会让input失去选中状态但是无法触发事件，无法写入

        <input class="form-control" type="text" 
        placeholder="Disabled input" disabled>
        
        <input class="form-control" type="text" 
        value="Disabled readonly input"  readonly>

Plain text

• .form-control-plaintext

it will remove the default form field styling 会取消掉input框的边缘线

        <div class="mb-3 row">
            <label for="Email" class="col-sm-2 col-form-label">
            Email</label>
            
            <div class="col-sm-10">
              <input type="text" class="form-control-plaintext" 
              id="Email" value="email@example.com" readonly>
            </div>
        </div>

Color

Set the type="color" and add .form-control-color to the <input>.

因为不同的浏览器可能对于type：color的input框会设置不同的高度，bootstrap规定了固定的大小

• .form-control-color

        <label for="colors" class="form-label">Color picker</label>
        <input type="color" class="form-control form-control-color" 
        id="colors" value="#563d7c">

Datalists

Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>.

有些时候，我们需要提供给用户一些默认的可期待的选项，而这时我们希望在用户点击input框时，有跳出的内容以供用户选择，当然用户也可以手动输入，而这些选择就是属于datalist的内容

• 在input的list属性标注<datalist>的id得到绑定

• <option>的value属性被作为展开的选项

• 但是这种datalist的style在各个浏览器是不同的

        <label for="DataList" class="form-label">Datalist example</label>
        <input class="form-control" list="datalistOptions" id="DataList" placeholder="Type to search...">
        <datalist id="datalistOptions">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
        </datalist>