每日一bootstrap 表单

快来打我* 2022-08-21 04:58 159阅读 0赞

这一篇来到复习一下bootstrap的表单，表单还是比较重要的一部分，学好表单还是很重要的。

表单有几点还是要注意的，一个是label虽然在网页上没什么太多效果，但对于鼠标用户非常友好，label可以使我们点击label设置的文字自动就使光标出现在控件上。试一试就懂了。  
在是，最好使用form-group将控件和label包裹在一起，这样整体的布局更好看。

form-control自动使表单表单宽度为100%

<div class="container">
                <div class="row col-md-6">
                    <form>
                      <div class="form-group">
                        <label for="email">Email address</label>
                        <input type="email" class="form-control" id="Email" placeholder="Email">
                      </div>
                      <div class="form-group">
                        <label for="Password">Password</label>
                        <input type="password" class="form-control" id="Password" placeholder="Password">
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
            </div>

![这里写图片描述][20160316203910787]

<form class="form-horizontal">
      <div class="form-group">
        <label for="Email2" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="Email2" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="Password2" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="Password2" placeholder="Password">
        </div>
      </div>
    </form>

![这里写图片描述][20160316204057836]

我们还可以给表单加上校验颜色，我们经常会通过AJAX来判断用户输入的是否符合要求，我们就可以使用bootstrap提供的校验状态

<div class="form-group has-success">
        <label class="control-label" for="inputSuccess">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess">
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning">Input with warning</label>
         <input type="text" class="form-control" id="inputWarning">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError">Input with error</label>
        <input type="text" class="form-control" id="inputError">
    </div>

![这里写图片描述][20160316205348762]

[20160316203910787]: /images/20220731/8410dc27e31b485ba0af8ee7d7027eec.png
[20160316204057836]: /images/20220731/f645c98005d34725a3f7e4753c38e8f6.png
[20160316205348762]: /images/20220731/59e26a235ab04e1c8e0ca45c6a3a4fa5.png