Sélectionner une page


Amorcer est le framework Web frontal le plus populaire et probablement le plus complet qui rend cela possible développeur pour accélérer la création d’un site Web ou d’une application Web.

Dans cet article, j’ai rassemblé 5 formulaires Web prêts à l’emploi pour vos projets Bootstrap. Il est temps de gagner du temps!

Règles générales pour votre formulaire bootstrap

Comme le plus populaire Cadre CSS Avec Bootstrap, la création de formulaires HTML devient plus facile et plus rapide.

La première chose à noter est que Bootstrap fournit trois mises en page différentes par défaut. Ces mises en page sont:

  • Forme verticale
  • Formulaire en ligne
  • Forme horizontale

Ces trois mises en page peuvent être visualisées et testées Site Web de Bootstraps.

Avant de présenter les exemples de formulaire Bootstrap, suivez quelques règles simples:

  • <input>, <textarea>, et <select> Les articles doivent tous avoir ces .form-control Classe CSS ajoutée. Cette classe est utilisée pour styliser les éléments du formulaire. Inclut des styles pour l’apparence générale, l’état de la mise au point, la taille, etc.
  • Pour un espacement optimal, assurez-vous d’inclure des contrôles de formulaire et des étiquettes <div class="form-group">

Voilà pour la théorie. Nous pouvons maintenant passer à la pratique et revoir les formulaires bootstrap.

Formulaire d’inscription vertical

Forme verticale Bootstrap

Un modèle de formulaire très simple qui peut être facilement étendu et adapté à presque tous les besoins. Utilisez-le comme point de départ pour presque tous les types de formulaires simples, tels que: B. Formulaires d’inscription, formulaires de contact, etc.

 <form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Formulaire en ligne

Forme en ligne Bootstrap

Les formulaires en ligne sont largement utilisés, en particulier pour les formulaires d’inscription. Jetez un œil au code ci-dessous. Avez-vous remarqué un changement par rapport au formulaire précédent? En fait, la seule différence entre ce code et le précédent est le .form-inline Classe ajoutée à form Élément HTML.

 <form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

→ Source: Écoles W3

Formulaire de contact

Formulaire de contact Bootstrap

Les formulaires de contact sont probablement les formes les plus populaires de tous les temps, car presque tous les sites Web en contiennent au moins un. Voici un modèle de qualité pour tous vos besoins en matière de formulaire de contact, plus un peu de CSS pour le rendre meilleur. Notez également que cet exemple fait une utilisation intéressante de Glyphicons Bootstraps.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="well well-sm">
                <form class="form-horizontal" method="post">
                    <fieldset>
                        <legend class="text-center header">Contact us</legend>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
                            <div class="col-md-8">
                                <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
                            <div class="col-md-8">
                                <textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

CSS associé:

.header {
    color: #36A0FF;
    font-size: 27px;
    padding: 10px;
}

.bigicon {
    font-size: 35px;
    color: #36A0FF;
}

→ Source: PreBootstrap

Formulaire d’adresse

Formulaire d'adresse Bootstrap

Voici un formulaire assez complet qui contient essentiellement tout ce dont vous avez besoin pour obtenir une adresse postale d’un client (américain). Utilisez-le tel quel ou personnalisez-le selon vos besoins!

<form>

	<div class="form-group"> <!-- Full Name -->
		<label for="full_name_id" class="control-label">Full Name</label>
		<input type="text" class="form-control" id="full_name_id" name="full_name" placeholder="John Deer">
	</div>	

	<div class="form-group"> <!-- Street 1 -->
		<label for="street1_id" class="control-label">Street Address 1</label>
		<input type="text" class="form-control" id="street1_id" name="street1" placeholder="Street address, P.O. box, company name, c/o">
	</div>					
							
	<div class="form-group"> <!-- Street 2 -->
		<label for="street2_id" class="control-label">Street Address 2</label>
		<input type="text" class="form-control" id="street2_id" name="street2" placeholder="Apartment, suite, unit, building, floor, etc.">
	</div>	

	<div class="form-group"> <!-- City-->
		<label for="city_id" class="control-label">City</label>
		<input type="text" class="form-control" id="city_id" name="city" placeholder="Smallville">
	</div>									
							
	<div class="form-group"> <!-- State Button -->
		<label for="state_id" class="control-label">State</label>
		<select class="form-control" id="state_id">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District Of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>					
	</div>
	
	<div class="form-group"> <!-- Zip Code-->
		<label for="zip_id" class="control-label">Zip Code</label>
		<input type="text" class="form-control" id="zip_id" name="zip" placeholder="#####">
	</div>		
	
	<div class="form-group"> <!-- Submit Button -->
		<button type="submit" class="btn btn-primary">Buy!</button>
	</div>     
	
</form>			

→ Source: Formden.com

Formulaire de carte de crédit

Formulaires et modèles Bootstrap prêts à l'emploi pour vos projets 1

Voici un autre formulaire utile que les visiteurs peuvent utiliser pour fournir leur numéro de carte de crédit. Veuillez noter qu’il ne s’agit que de l’interface HTML. Les formulaires de carte de crédit nécessitent une vérification sérieuse dans le back-end.

<form action="https://catswhocode.com/bootstrap-forms/#" class="credit-card-div">
<div class="panel panel-default" >
 <div class="panel-heading">
     
      <div class="row ">
              <div class="col-md-12">
                  <input type="text" class="form-control" placeholder="Enter Card Number" />
              </div>
          </div>
     <div class="row ">
              <div class="col-md-3 col-sm-3 col-xs-3">
                  <span class="help-block text-muted small-font" > Expiry Month</span>
                  <input type="text" class="form-control" placeholder="MM" />
              </div>
         <div class="col-md-3 col-sm-3 col-xs-3">
                  <span class="help-block text-muted small-font" >  Expiry Year</span>
                  <input type="text" class="form-control" placeholder="YY" />
              </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
                  <span class="help-block text-muted small-font" >  CCV</span>
                  <input type="text" class="form-control" placeholder="CCV" />
              </div>
         <div class="col-md-3 col-sm-3 col-xs-3">
<img src="https://catswhocode.com/bootstrap-forms/assets/img/1.png" class="img-rounded" />
         </div>
          </div>
     <div class="row ">
              <div class="col-md-12 pad-adjust">

                  <input type="text" class="form-control" placeholder="Name On The Card" />
              </div>
          </div>
     <div class="row">
<div class="col-md-12 pad-adjust">
    <div class="checkbox">
    <label>
      <input type="checkbox" checked class="text-muted"> Save details for fast payments <a href="https://catswhocode.com/bootstrap-forms/#"> learn how ?</a>
    </label>
  </div>
</div>
     </div>
       <div class="row ">
            <div class="col-md-6 col-sm-6 col-xs-6 pad-adjust">
                 <input type="submit"  class="btn btn-danger" value="CANCEL" />
              </div>
              <div class="col-md-6 col-sm-6 col-xs-6 pad-adjust">
                  <input type="submit"  class="btn btn-warning btn-block" value="PAY NOW" />
              </div>
          </div>
     
                   </div>
              </div>
</form>

Code CSS associé:

<style>
.credit-card-div  span { padding-top:10px; }
.credit-card-div img { padding-top:30px; }
.credit-card-div .small-font { font-size:9px; }
.credit-card-div .pad-adjust { padding-top:10px; }
</style>

Formulaire d’inscription élégant

Forme bootstrap élégante

Concluons ce tour d’horizon avec un formulaire élégant et moderne pour l’édition des enregistrements. Cette forme soignée et adaptable convient à tout type de site Web.

<div class="container">
  <div class="col-md-6 mx-auto text-center">
	 <div class="header-title">
		<h1 class="wv-heading--title">
		   Check out — it’s free!
		</h1>
		<h2 class="wv-heading--subtitle">
		   Lorem ipsum dolor sit amet! Neque porro quisquam est qui do dolor amet, adipisci velit...
		</h2>
	 </div>
  </div>
  <div class="row">
	 <div class="col-md-4 mx-auto">
		<div class="myform form ">
		   <form action="" method="post" name="login">
			  <div class="form-group">
				 <input type="text" name="name"  class="form-control my-input" id="name" placeholder="Name">
			  </div>
			  <div class="form-group">
				 <input type="email" name="email"  class="form-control my-input" id="email" placeholder="Email">
			  </div>
			  <div class="form-group">
				 <input type="number" min="0" name="phone" id="phone"  class="form-control my-input" placeholder="Phone">
			  </div>
			  <div class="text-center ">
				 <button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
			  </div>
			  <div class="col-md-12 ">
				 <div class="login-or">
					<hr class="hr-or">
					<span class="span-or">or</span>
				 </div>
			  </div>
			  <div class="form-group">
				 <a class="btn btn-block g-button" href="https://catswhocode.com/bootstrap-forms/#">
				 <i class="fa fa-google"></i> Sign up with Google
				 </a>
			  </div>
			  <p class="small mt-3">By signing up, you are indicating that you have read and agree to the <a href="https://catswhocode.com/bootstrap-forms/#" class="ps-hero__content__link">Terms of Use</a> and <a href="https://catswhocode.com/bootstrap-forms/#">Privacy Policy</a>.
			  </p>
		   </form>
		</div>
	 </div>
  </div>
</div>

Voici le CSS associé qui fournit un style supplémentaire au formulaire:

.send-button{
	background: #54C7C3;
	width:100%;
	font-weight: 600;
	color:#fff;
	padding: 8px 25px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}
.g-button{
	color: #fff !important;
	border: 1px solid #EA4335;
	background: #ea4335 !important;
	width:100%;
	font-weight: 600;
	color:#fff;
	padding: 8px 25px;
}
.my-input{
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	cursor: text;
	padding: 8px 10px;
	transition: border .1s linear;
}
.header-title{
	margin: 5rem 0;
}
h1{
	font-size: 31px;
	line-height: 40px;
	font-weight: 600;
	color:#4c5357;
}
h2{
	color: #5e8396;
	font-size: 21px;
	line-height: 32px;
	font-weight: 400;
}
.login-or {
	position: relative;
	color: #aaa;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.span-or {
	display: block;
	position: absolute;
	left: 50%;
	top: -2px;
	margin-left: -25px;
	background-color: #fff;
	width: 50px;
	text-align: center;
}
.hr-or {
	height: 1px;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}
@media screen and (max-width:480px){
	h1{ font-size: 26px; }
	h2{ font-size: 20px; }
} 

Questions fréquemment posées sur les formulaires Bootstrap

Questions fréquemment posées sur les formulaires Bootstrap

Qu’est-ce qu’un groupe de formulaires Bootstrap?

le .form-group La classe est utilisée pour ajouter une structure à un formulaire dans Bootstrap. Il fournit une classe flexible qui encourage le regroupement approprié des étiquettes, des contrôles, du texte d’aide facultatif et des messages de révision de formulaire.

Comment créer un formulaire horizontal dans Bootstrap?

Ajoutez juste ça .form-horizontal Classe à la vôtre <form> L’élément et la classe d’étiquettes .control-label Classe à la vôtre <label> Éléments.

Quel est le paramètre par défaut pour un formulaire dans Bootstrap?

Bootstrap définit le Forme verticale en tant que norme. Veuillez consulter les exemples ci-dessus pour voir les classes CSS qui doivent être ajoutées pour créer un formulaire en ligne ou horizontal.

Comment ajouter Bootstrap à mon projet?

Vous devez ajouter le CSS bootstrap au <head> Section de votre document HTML. Veuillez contacter le Documentation pour plus d’informations.



Source link

Recent Posts