Menu
  1. World
    • All
    • World
      More
    1. Lifestyle
      • All
      • Arts
      • Fashion
      • Health
      • Photography
      • Recipes
      • Travel
      • Cars
      • Business
        More

        No content

        A problem occurred while loading content.

        Previous Next
      1. Fashion
        Previous Next
      2. Sport
      3. Music

        No content

        A problem occurred while loading content.

        Previous Next
      4. Events
        Previous Next
      5. Forum
      6. Maps
      7. Features
      User Menu Search
      Close

      FORMS

      Basic example

      Example block-level help text here.

      <form role="form">
      <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
      <label>
      <input type="checkbox"> Check me out
      </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
      </form>

      Inline form

      @
      <form class="form-inline" role="form">
      <div class="form-group">
      <label class="sr-only" for="exampleInputEmail2">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
      </div>
      <div class="form-group">
      <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
      </div>
      </div>
      <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
      </div>
      <div class="checkbox">
      <label>
      <input type="checkbox"> Remember me
      </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
      </form>

      Horizontal form

      <form class="form-horizontal" role="form">
      <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
      </div>
      <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
      </div>
      <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
      <label>
      <input type="checkbox"> Remember me
      </label>
      </div>
      </div>
      </div>
      <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
      </div>
      </div>
      </form>

      Supported controls

      Inputs

      <input type="text" class="form-control" placeholder="Text input">

      Textarea

      <textarea class="form-control" rows="3"></textarea>

      Checkboxes and radios


      <div class="checkbox">
      <label>
      <input type="checkbox" value="">
      Option one is this and that&mdash;be sure to include why it's great
      </label>
      </div>
      <div class="checkbox disabled">
      <label>
      <input type="checkbox" value="" disabled>
      Option two is disabled
      </label>
      </div>
      
      <div class="radio">
      <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
      </label>
      </div>
      <div class="radio">
      <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
      </label>
      </div>
      <div class="radio disabled">
      <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
      </label>
      </div>

      Inline checkboxes and radios


      <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
      </label>
      <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
      </label>
      <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
      </label>
      
      <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
      </label>
      <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
      </label>
      <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
      </label>

      Selects


      <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select>
      
      <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select>

      Static control

      email@example.com

      <form class="form-horizontal" role="form">
      <div class="form-group">
      <label class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
      </div>
      </div>
      <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
      </div>
      </div>
      </form>

      Disabled inputs

      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

      Disabled fieldsets

      <form role="form">
      <fieldset disabled>
      <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      </div>
      <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
      <option>Disabled select</option>
      </select>
      </div>
      <div class="checkbox">
      <label>
      <input type="checkbox"> Can't check this
      </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
      </form>

      Readonly inputs

      <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

      Validation states

      <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess1">
      </div>
      <div class="form-group has-warning">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
      </div>
      <div class="form-group has-error">
      <label class="control-label" for="inputError1">Input with error</label>
      <input type="text" class="form-control" id="inputError1">
      </div>

      With optional icons

      <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-error has-feedback">
      <label class="control-label" for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>

      Optional icons in horizontal and inline forms

      <form class="form-horizontal" role="form">
      <div class="form-group has-success has-feedback">
      <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
      <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      </div>
      </form>

      Optional icons with hidden .sr-only labels

      <div class="form-group has-success has-feedback">
      <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
      <input type="text" class="form-control" id="inputSuccess5">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>

      Control sizing

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

      Horizontal form group sizes

      <form class="form-horizontal" role="form">
      <div class="form-group form-group-lg">
      <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
      <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
      </div>
      </div>
      <div class="form-group form-group-sm">
      <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
      <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
      </div>
      </div>
      </form>

      Column sizing

      <div class="row">
      <div class="col-xs-2">
      <input type="text" class="form-control" placeholder=".col-xs-2">
      </div>
      <div class="col-xs-3">
      <input type="text" class="form-control" placeholder=".col-xs-3">
      </div>
      <div class="col-xs-4">
      <input type="text" class="form-control" placeholder=".col-xs-4">
      </div>
      </div>

      Help text

      A block of help text that breaks onto a new line and may extend beyond one line.
      <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      Terms Of UsePrivacy StatementCopyright 2024 NewsMagazine DNN/DotNetNuke/EVOQ theme Demo by EasyDNNsolutions.com
      Back To Top