A Textbox is a control that allows users to enter input or edit a text value.
<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default Textbox</label>
<div class="col-lg-8">
<div class="a-input-group">
<input class="a-input" type="text" placeholder="Enter Name" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Textbox RTL</label>
<div class="col-lg-8">
<div class="a-input-group a-rtl">
<input class="a-input" type="text" placeholder="Enter Name" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Password Textbox</label>
<div class="col-lg-8">
<div class="a-input-group">
<input class="a-input" type="password" placeholder="Password" value="password" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Email Textbox</label>
<div class="col-lg-8">
<div class="a-input-group">
<input class="a-input" type="email" placeholder="Email Address" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Disabled Textbox</label>
<div class="col-lg-8">
<div class="a-input-group a-disabled">
<input class="a-input" placeholder="Disabled" value="Disabled" disabled />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Readonly Textbox</label>
<div class="col-lg-8">
<div class="a-input-group">
<input class="a-input" placeholder="Readonly" value="Readonly" readonly />
</div>
</div>
</div>
</div><div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Small</label>
<div class="col-lg-8">
<div class="a-input-group a-small">
<input class="a-input" type="text" placeholder="Small" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Normal</label>
<div class="col-lg-8">
<div class="a-input-group">
<input class="a-input" type="text" placeholder="Normal" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Bigger</label>
<div class="col-lg-8">
<div class="a-input-group a-bigger">
<input class="a-input" type="text" placeholder="Bigger" />
</div>
</div>
</div>
</div>/* Floating Label */
new ac.inputs.TextBox(
{
placeholder: "First Name",
floatLabelType: "Auto"
},
"#cntlFloatingLabel"
);
/* Floating Label RTL */
new ac.inputs.TextBox(
{
placeholder: "First Name",
floatLabelType: "Auto",
enableRtl: true
},
"#cntlFloatingLabelRtl"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Floating Label</label>
<div class="col-lg-8">
<input id="cntlFloatingLabel" />
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Floating Label RTL</label>
<div class="col-lg-8">
<input id="cntlFloatingLabelRtl" />
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Floating Label Input Group</label>
<div class="col-lg-8">
<div class="a-float-input a-input-group">
<input type="text" required />
<span class="a-float-line"></span>
<label class="a-float-text">User List</label>
<span class="a-input-group-icon a-spin-down"></span>
</div>
</div>
</div>
</div><div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Success</label>
<div class="col-lg-8">
<div class="a-input-group a-success">
<input class="a-input" type="text" placeholder="Success" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Warning</label>
<div class="col-lg-8">
<div class="a-input-group a-warning">
<input class="a-input" type="text" placeholder="Warning" />
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Error</label>
<div class="col-lg-8">
<div class="a-input-group a-error">
<input class="a-input" type="text" placeholder="Error" />
</div>
</div>
</div>
</div>