4.forms

• form

<form>
	<!-- text field groups -->
	<div class="form-group">
	    <label for="name">Name</label>
	    <input class="form-control" type="text" id="name" placeholder="Enter name">
	</div>
	<div class="form-group">
	    <label for="email">Email address</label>
	    <input class="form-control form-control-lg" type="email" id="email" placeholder="Enter email">
	    <small class="form-text text-muted">Your email will not ever shared</small>
	</div>
	<div class="form-group">
	    <label for="company">Company</label>
	    <input class="form-control form-control-sm" type="text" id="company" placeholder="Enter company name">
	</div>
	<div class="form-group">
	    <label for="password">Password</label>
	    <input class="form-control" type="password" id="password" placeholder="Password" readonly>
	</div>

	<!-- select -->
	<div class="form-group">
	    <label for="gender">Gender</label>
	    <select class="form-control" id="gender">
	        <option>Male</option>
	        <option>Female</option>
	    </select>
	</div>

	<!-- textrarea -->
	<div class="form-group">
	    <label for="message">Message</label>
	    <textarea class="form-control" id="message" rows="3"></textarea>
	</div>

	<!-- file input -->
	<div class="form-group">
	    <label for="file">File input</label>
	    <input class="form-control-file" type="file" id="file">
	    <small class="form-text text-muted" id="fileHelp">Max 3mb size</small>
	</div>

	<!-- custom file input -->
	<div class="custom-file">
	    <input class="custom-file-input" type="file" id="myfile">
	    <label class="custom-file-label" for="myfile">Choose file</label>
	</div>

	<!-- range -->
	<div class="form-group">
	    <label for="membership">Membership Level</label>
	    <input class="custom-range" min="1" max="5" step="1" value="1" type="range">
	</div>

	<button class="btn btn-primary btn-block">Submit</button>
</form>

• inline form

<form class="form-inline">
    <input class="form-control mr-2" type="text" id="username" placeholder="Enter username">
    <input class="form-control mr-2" type="text" id="password" placeholder="Password">
    <div class="form-checkbox mr-2">
        <label class="form-checkbox-label">
            <input class="form-checkbox-input" type="checkbox"> Remember me
        </label>
    </div>

    <button class="btn btn-light" type="submit">Submit</button>
</form>

• form row

<form>
    <div class="form-row">
        <div class="col">
            <input class="form-control" type="text" placeholder="First name">
        </div>
        <div class="col">
            <input class="form-control" type="text" placeholder="Last name">
        </div>
    </div>
</form>

• validation

<div class="form-group">
    <label for="username">Username</label>
    <input class="form-control is-valid" type="text" id="username">
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input class="form-control is-invalid" type="text" id="password">
    <div class="invalid-feedback">
        Password not strong enough
    </div>
</div>
<div class="form-group">
    <label for="password2">Confirm Password</label>
    <input class="form-control is-invalid" type="text" id="password2">
    <div class="invalid-feedback">
        Password does not match
    </div>
</div>