Text Input

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

Use in main forms (like create new sales order, purchase order, quote, etc..)

<div class="form-group form-group-md">
    <label for="exampleCustomer">Customer Name</label>
    <input type="text" class="form-control form-control-md" id="exampleCustomer" aria-describedby="customerHelp" placeholder="Enter email">
    <small id="customerHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>

Use in main forms (like create new sales order, purchase order, quote, etc..)

<div class="form-group form-group-inline form-group-md">
  <div class="form-row">
    <div class="col-4 col-form-label-md">
    <label for="exampleCustomerInline">Customer Name</label>
  </div>
  <div class="col-8">
    <input type="text" class="form-control form-control-md" id="exampleCustomerInline" placeholder="Enter customer name">
  </div></div></div>

<div class="form-group form-group-inline form-group-md">
  <div class="form-row">
    <div class="col-4 col-form-label-md">
    <label for="exampleCustomerInline">Customer Name</label>
  </div>
  <div class="col-8">
    <input type="text" class="form-control form-control-md" id="exampleCustomerInline" placeholder="Enter customer name">
  </div></div></div>

<div class="form-group form-group-inline form-group-md">
    <label for="searchField">Date</label>
    <input type="text" class="form-control form-date" id="dateField" placeholder="Choose date..">
  </div>
  <div class="form-group form-group-inline form-group-md">
    <label for="searchField">Browser Date</label>
    <input type="date" class="form-control form-date" id="dateField" placeholder="Choose date..">
  </div>
  </div>

Input number, onclick: select all the text

<input type="text" onClick="this.setSelectionRange(0, this.value.length)" class="form-control text-right" placeholder="Enter quantity">

<input type="email" class="form-control" id="exampleInputEmail1"
  aria-describedby="emailHelp" placeholder="Enter email">

<input type="number" class="form-control" id="exampleInputNumber"
  aria-describedby="numberHelp" placeholder="Enter number" max="100" min="2" step="3">

<div class="form-group"> <label for="exampleInputEmail2">Email address</label>  <input type="email" class="form-control" id="exampleInputEmail2"  aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div>

<div class="form-group form-group-inline">
  <div class="form-row">
    <div class="col-4 col-form-label">
    <label for="exampleInputInline">Email address</label>
  </div>
  <div class="col-8">
    <input type="email" class="form-control" id="exampleInputInline" placeholder="Enter email">
  </div></div>

<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

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

  <input class="form-control" type="text" placeholder="Readonly input here…" value="This is readonly input" readonly>
  <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
   <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
   

  <input class="form-control" type="text" placeholder="Readonly input here…" value="This is readonly input" disabled>
  <input class="form-control" type="text" placeholder="Readonly input here…" disabled>
   <input type="text" disabled class="form-control-plaintext" id="staticEmail" value="email@example.com">
   <div class="form-group form-group-disabled"> <label class="form-label-disabled" for="exampleInputEmail2">Email address</label>  <input type="email" class="form-control" id="exampleInputEmail2"  aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div>
   

<form class="was-validated">
  <div class="form-group">
    <label for="ErrorInput1">Input Label</label>
  <input class="form-control" id="ErrorInput1" type="text" placeholder="Error input here…" value="" required>
</div>
<div class="form-group"><div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" value="" id="invalidCheck" required>
  <label class="custom-control-label" for="invalidCheck">
    Invalid checkbox
  </label>
</div></div>
</form>

<input class="form-control" type="text" placeholder="Error input here…" required>
    <div class="invalid-feedback">Please fill in this form</div>
&#x3C;div class=&#x22;custom-control custom-checkbox&#x22;&#x3E;&#x3C;input class=&#x22;custom-control-input&#x22; type=&#x22;checkbox&#x22; value=&#x22;&#x22; id=&#x22;invalidCheck&#x22; required&#x3E;
      &#x3C;label class=&#x22;custom-control-label&#x22; for=&#x22;invalidCheck&#x22;&#x3E;Invalid checkbox&#x3C;/label&#x3E;
      &#x3C;div class=&#x22;invalid-feedback&#x22;&#x3E;You must check this before submitting.&#x3C;/div&#x3E;
    &#x3C;/div&#x3E;

<input class="form-control" type="text" placeholder="Valid input form" value="Input value valid">
    <div class="valid-feedback">Input values is valid</div>