440 lines
14 KiB
Plaintext
440 lines
14 KiB
Plaintext
# Forms
|
|
# Form Controls - Bootstrap 4
|
|
snippet form
|
|
<form>
|
|
<fieldset class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="${10:Enter email}">
|
|
<small class="text-muted">We'll never share your email with anyone else.</small>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="${10:Password}">
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="${1:exampleSelect1}">Example select</label>
|
|
<select class="form-control" id="e${1:xampleSelect}1">
|
|
<option>1${2:</o}ption>
|
|
<option>${2:2}</option>
|
|
<option>${2:3}</option>
|
|
<option>${2:4}</option>
|
|
<option>${2:5}</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="${1:exampleSelect2}">Example multiple select</label>
|
|
<select multiple class="form-control" id="${1:exampleSelect2}">
|
|
<option>${2:1}</option>
|
|
<option>${2:2}</option>
|
|
<option>${2:3}</option>
|
|
<option>${2:4}</option>
|
|
<option>${2:5}</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="exampleTextarea">Example textarea</label>
|
|
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" class="form-control-file" id="exampleInputFile">
|
|
<small class="text-muted">This is some placeholder b${10:lock-level help text for the above input. It's a bit lighter and easily wraps to a new line.</smal}l>
|
|
</fieldset>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
|
Option one is this and that—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>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Check me out
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
endsnippet
|
|
|
|
# Form group - Bootstrap 4
|
|
snippet formgr
|
|
<form>
|
|
<fieldset class="form-group">
|
|
<label for="formGroupExampleInput">Example label</label>
|
|
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="${10:Example input}">
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="formGroupExampleInput2">Another label</label>
|
|
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="${10:Another input}">
|
|
</fieldset>
|
|
</form>
|
|
endsnippet
|
|
|
|
# Form inline - Bootstrap 4
|
|
snippet formin
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label for="${1:exampleInputName2}">Name</label>
|
|
<input type="text" class="form-control" id="${1:exampleInputName2}" placeholder="${10:Jane Doe}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="${2:exampleInputEmail2}">Email</label>
|
|
<input type="email" class="form-control" id="${2:exampleInputEmail2}" placeholder="${10:jane.doe@example.com}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Send invitation</button>
|
|
</form>
|
|
endsnippet
|
|
|
|
# Form hidden label - Bootstrap 4
|
|
snippet formhl
|
|
<div class="form-group">
|
|
<label class="sr-only" for="${1:exampleInputEmail3}">Email address</label>
|
|
<input type="email" class="form-control" id="${1:exampleInputEmail3}" placeholder="${10:Enter email}">
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form w/ Grid - Bootstrap 4
|
|
snippet formgrid
|
|
<form>
|
|
<div class="form-group row">
|
|
<label for="${1:inputEmail3}" class="col-sm-2 form-control-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control" id="${1:inputEmail3}" placeholder="${10:Email}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="${4:inputPassword3}" class="col-sm-2 form-control-label">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="${4:inputPassword3}" placeholder="${10:Password}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2">Radios</label>
|
|
<div class="col-sm-10">
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="gridRadios" id="${5:gridRadios1}" value="${6:option1}" checked>
|
|
${7:Option one is this and that—be sure to include why it's great}
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="gridRadios" id="${5:gridRadios2}" value="${6:option2}">
|
|
${7:Option two can be something else and selecting it will deselect option one}
|
|
</label>
|
|
</div>
|
|
<div class="radio disabled">
|
|
<label>
|
|
<input type="radio" name="gridRadios" id="${5:gridRadios3}" value="${6:option3}" disabled>
|
|
${7:Option three is disabled}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2">Checkbox</label>
|
|
<div class="col-sm-10">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Check me out
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<button type="submit" class="btn btn-secondary">Sign in</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
endsnippet
|
|
|
|
# Form Checkbox - Bootstrap 4
|
|
snippet formcb
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" value="">
|
|
${1:Option one is this and that—be sure to include why it's great}
|
|
</label>
|
|
</div>
|
|
<div class="checkbox disabled">
|
|
<label>
|
|
<input type="checkbox" value="" disabled>
|
|
${1:Option two is disabled}
|
|
</label>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Checkbox inline - Bootstrap 4
|
|
snippet formcbin
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" id="${1:inlineCheckbox1}" value="${2:option1}"> ${3:1}
|
|
</label>
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" id="${1:inlineCheckbox2}" value="${2:option2}"> ${3:2}
|
|
</label>
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" id="${1:inlineCheckbox3}" value="${2:option3}"> ${3:3}
|
|
</label>
|
|
endsnippet
|
|
|
|
# Form Checkbox w/o label - Bootstrap 4
|
|
snippet formcbwola
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="${1:blankCheckbox}" value="${2:option1}">
|
|
</label>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Radio - Bootstrap 4
|
|
snippet formra
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="${1:exampleRadios}" id="${2:exampleRadios1}" value="${3:option1}" checked>
|
|
${4:Option one is this and that—be sure to include why it's great}
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="${1:exampleRadios}" id="${2:exampleRadios2}" value="${3:option2}">
|
|
${4:Option two can be something else and selecting it will deselect option one}
|
|
</label>
|
|
</div>
|
|
<div class="radio disabled">
|
|
<label>
|
|
<input type="radio" name="${1:exampleRadios}" id="${2:exampleRadios3}" value="${3:option3}" disabled>
|
|
${4:Option three is disabled}
|
|
</label>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Radio inline - Bootstrap 4
|
|
snippet formrain
|
|
<label class="radio-inline">
|
|
<input type="radio" name="${1:inlineRadioOptions}" id="${2:inlineRadio1}" value="${3:option1}"> ${3:1}
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="${1:inlineRadioOptions}" id="${2:inlineRadio2}" value="${3:option2}"> ${3:2}
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="${1:inlineRadioOptions}" id="${2:inlineRadio3}" value="${3:option3}"> ${3:3}
|
|
</label>
|
|
endsnippet
|
|
|
|
# Form Radio w/o label - Bootstrap 4
|
|
snippet formrawola
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="${1:blankRadio}" id="${2:blankRadio1}" value="option1">
|
|
</label>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Static Controls - Bootstrap 4
|
|
snippet formsc
|
|
<form class="form-horizontal">
|
|
<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="${1:inputPassword}" class="col-sm-2 control-label">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="${1:inputPassword}" placeholder="${10:Password}">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
endsnippet
|
|
|
|
# Form Static Controls inline - Bootstrap 4
|
|
snippet formscin
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label class="sr-only">Email</label>
|
|
<p class="form-control-static">email@example.com</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="${1:inputPassword2}" class="sr-only">Password</label>
|
|
<input type="password" class="form-control" id="${1:inputPassword2}" placeholder="${10:Password}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Confirm identity</button>
|
|
</form>
|
|
endsnippet
|
|
|
|
# Form disabled state - Bootstrap 4
|
|
snippet formdis
|
|
<form>
|
|
<fieldset disabled>
|
|
<div class="form-group">
|
|
<label for="disabledTextInput">Disabled input</label>
|
|
<input type="text" id="disabledTextInput" class="form-control" placeholder="${10:Disabled input}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="disabledSelect">Disabled select menu</label>
|
|
<select id="disabledSelect" class="form-control">
|
|
<option>${1: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>
|
|
endsnippet
|
|
|
|
# Form Readonly - Bootstrap 4
|
|
snippet formreo
|
|
<input class="form-control" type="text" placeholder="${10:Readonly input here…" readonl}y>
|
|
endsnippet
|
|
|
|
# Form input sizing - Bootstrap 4
|
|
snippet formiptsz
|
|
<input class="form-control form-control-lg" type="text" placeholder="${10:.input-lg}">
|
|
<input class="form-control" type="text" placeholder="${10:Default input}">
|
|
<input class="form-control form-control-sm" type="text" placeholder="${10:.input-sm}">
|
|
endsnippet
|
|
|
|
# Form select sizing - Bootstrap 4
|
|
snippet formsltsz
|
|
<select class="form-control form-control-lg"></select>
|
|
<select class="form-control"></select>
|
|
<select class="form-control form-control-sm"></select>
|
|
endsnippet
|
|
|
|
# Form column sizing - Bootstrap 4
|
|
snippet formcolsz
|
|
<div class="row">
|
|
<div class="col-xs-2">
|
|
<input type="text" class="form-control" placeholder="${10:.col-xs-2}">
|
|
</div>
|
|
<div class="col-xs-3">
|
|
<input type="text" class="form-control" placeholder="${10:.col-xs-3}">
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<input type="text" class="form-control" placeholder="${10:.col-xs-4}">
|
|
</div>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Help text - Bootstrap 4
|
|
snippet formht
|
|
<small class="text-muted">
|
|
Some inline text with a small tag looks like this.
|
|
</small>
|
|
endsnippet
|
|
|
|
# Form Validation - Bootstrap 4
|
|
snippet formval
|
|
<div class="form-group has-success">
|
|
<label class="control-label" for="inputSuccess1">Input with success</label>
|
|
<input type="text" class="form-control form-control-success" 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 form-control-warning" 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 form-control-error" id="inputError1">
|
|
</div>
|
|
<div class="has-success">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="checkboxSuccess" value="option1">
|
|
Checkbox with success
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="has-warning">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="checkboxWarning" value="option1">
|
|
Checkbox with warning
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="has-error">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="checkboxError" value="option1">
|
|
Checkbox with error
|
|
</label>
|
|
</div>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Custom checkbox - Bootstrap 4
|
|
snippet formctmcb
|
|
<label class="c-input c-checkbox">
|
|
<input type="checkbox">
|
|
<span class="c-indicator"></span>
|
|
Check this custom checkbox
|
|
</label>
|
|
endsnippet
|
|
|
|
# Form Custom radio - Bootstrap 4
|
|
snippet formctmra
|
|
<label class="c-input c-radio">
|
|
<input id="radio1" name="radio" type="radio">
|
|
<span class="c-indicator"></span>
|
|
Toggle this custom radio
|
|
</label>
|
|
<label class="c-input c-radio">
|
|
<input id="radio2" name="radio" type="radio">
|
|
<span class="c-indicator"></span>
|
|
Or toggle this other custom radio
|
|
</label>
|
|
endsnippet
|
|
|
|
# Form Custom radio stacked - Bootstrap 4
|
|
snippet formctmras
|
|
<div class="c-inputs-stacked">
|
|
<label class="c-input c-radio">
|
|
<input id="radioStacked1" name="radio-stacked" type="radio">
|
|
<span class="c-indicator"></span>
|
|
Toggle this custom radio
|
|
</label>
|
|
<label class="c-input c-radio">
|
|
<input id="radioStacked2" name="radio-stacked" type="radio">
|
|
<span class="c-indicator"></span>
|
|
Or toggle this other custom radio
|
|
</label>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Form Custom select menu - Bootstrap 4
|
|
snippet formctmsm
|
|
<select class="c-select">
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
endsnippet
|
|
|
|
# Form Custom File browser - Bootstrap 4
|
|
snippet formctmfb
|
|
<label class="file">
|
|
<input type="file" id="file">
|
|
<span class="file-custom"></span>
|
|
</label>
|
|
endsnippet
|
|
|