فرم ها

فرم پایه


<form>  <label>Name</label>  <input type="text" placeholder="Your name">  <label>Email address</label>  <input type="email" placeholder="Enter your email" required>  <label>Message</label>  <textarea name="message" placeholder="Message" required></textarea>  <button type="submit" class="button button-md button-dark">Submit</button>
</form>

استایل فرم 2


<form class="form-style-2">  <input type="text" placeholder="Name">  <input type="email" placeholder="Enter your email" required>  <textarea name="message" placeholder="Message" required></textarea>
</form>

استایل فرم 3


<form class="form-style-3">  <input type="text" placeholder="Your name">  <input type="email" placeholder="Enter your email" required>  <textarea name="message" placeholder="Message" required></textarea>
</form>

استایل فرم 4


<form class="form-style-4">  <input type="text" placeholder="Your name">  <input type="email" placeholder="Enter your email" required>  <textarea name="message" placeholder="Message" required></textarea>
</form>

استایل فرم 5


<form class="form-style-5">  <input type="text" placeholder="Your name">  <input type="email" placeholder="Enter your email" required>  <textarea name="message" placeholder="Message" required></textarea>
</form>

فرم - ردیف


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

فرم - اندازه


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

منوی انتخاب


<select class="custom-select w-100 custom-select-lg">  <option selected>Select menu</option>  <option value="1">One</option>  <option value="2">Two</option>  <option value="3">Three</option>
</select>
<select class="custom-select w-100">  <option selected>Select menu</option>  <option value="1">One</option>  <option value="2">Two</option>  <option value="3">Three</option>
</select>
<select class="custom-select w-100 custom-select-sm">  <option selected>Select menu</option>  <option value="1">One</option>  <option value="2">Two</option>  <option value="3">Three</option>
</select>

چک باکس


<div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">  <label class="form-check-label" for="defaultCheck1">    Default checkbox  </label>
</div>
<div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>  <label class="form-check-label" for="defaultCheck2">    Disabled checkbox  </label>
</div>

رادیو


<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">    Default radio  </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">    Second default radio  </label>
</div>
<div class="form-check disabled">  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>  <label class="form-check-label" for="exampleRadios3">    Disabled radio  </label>
</div>

اینجا را کلیک کنید برای یادگیری بیشتر در مورد فرم های بوت استرپ.