Form

method : what http protocol(GET/POST)

action: defines the action to be performed when the form is submitted. Usually, this is a url or endpoint of which to process the form

autocomplete: autocomplete form

novalidate: don’t validate form on submit

<form method="POST" action="/signup" autocomplete="on" novalidate>

</form>

Input text

<form method="POST" action="/signup"  autocomplete="on" novalidate> 
        <div class="form-group">
            <label for="exampleInputName">Name</label>
            <input type="text" class="form-control" id="exampleInputName" aria-describedby="nameHelp" value="Folau">
            <small id="nameHelp" class="form-text text-muted">Name</small>
        </div>
</form>

Input radio

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
    MALE
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
    FEMALE
    </label>
</div>

Input checkbox

 <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
    Red
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
    Blue
    </label>
</div>

Textarea

<div class="form-group">
    <label for="aboutMe">About Me</label>
    <textarea class="form-control" id="aboutMe" rows="3"></textarea>
</div>

Select or Dropdown

<div class="form-group">
    <label for="language">Language</label>
    <select class="form-control" id="language">
    <option value="eng">English</option>
    <option value="ton">Tongan</option>
    </select>
</div>

Date

You can use the min and max attributes to add restrictions to dates.

<div class="form-group">
    <label for="exampleInputName">DOB</label>
    <input type="date" class="form-control" id="exampleInputName" aria-describedby="nameHelp">
    <small id="nameHelp" class="form-text text-muted">Name</small>
</div>
<div class="form-group"> 
     <label for="exampleInputName">Start</label> 
     <input type="date" class="form-control" max="1979-12-31"> 
     <small id="nameHelp" class="form-text text-muted">Name</small> 
</div>
<div class="form-group"> 
     <label for="exampleInputName">Start</label> 
     <input type="date" class="form-control" min="2000-10-31"> 
     <small id="nameHelp" class="form-text text-muted">Name</small> 
</div>

Time

<div class="form-group">
    <label for="exampleInputName">Time</label>
    <input type="time" class="form-control" >
    <small id="nameHelp" class="form-text text-muted">time</small>
</div>

Color

<div class="form-group">
    <label for="exampleInputName">Favorite Color</label>
    <input type="color" class="form-control" value="#ff0000">
    <small id="nameHelp" class="form-text text-muted">favorite color</small>
</div>