BS5 Form Controls

Text input

<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your name">

Textarea

<label class="form-label" for="notes">Notes</label>
<textarea class="form-control" id="notes" rows="4"></textarea>

Email and password

<input type="email" class="form-control" placeholder="name@example.com">
<input type="password" class="form-control" placeholder="Password">

Readonly and disabled

<input type="text" class="form-control" value="Readonly value" readonly>
<input type="text" class="form-control" value="Disabled value" disabled>

Input sizes

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

File input

<label class="form-label" for="file">Upload</label>
<input class="form-control" type="file" id="file">

Help text

<input type="text" class="form-control" id="username">
<div class="form-text">Use 6-20 characters.</div>

Best practices

• Use correct input types (email, number, password) for better UX
• Use placeholders as hints, not as label replacements
• Prefer readonly when value should be selectable