Bootstrap-Formulare

Die HTML-Formulare stellen einen Dokumentabschnitt dar, der zum Sammeln einiger Daten des Website-Besuchers erforderlich ist. Zum Beispiel: Name, E-Mail, Kreditkarte usw. Das Formular enthält interaktive Steuerelemente wie Textfelder, Textbereichsfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw., die dazu dienen, Informationen vom Benutzer zu erhalten. Das manuelle Gestalten dieser Steuerelemente mithilfe von CSS kann ein schwieriger Prozess sein. Der Bootstrap vereinfacht das Styling dieser Formularsteuerelemente.

Bootstrap bietet drei Arten von Formularlayouts:

  • Vertikale Form
  • Horizontale Form
  • Inline-Formular
  • Lesen Sie auch:

    • Bootstrap-Typografie
    • Bootstrap-Grid-System
    • Bootstrap-CSS

    Vertikales Formularlayout

    Das vertikale Formularlayout wird auch als Standardformularlayout von Bootstrap bezeichnet. Da es sich um das Standard-Formularlayout handelt, müssen wir es nicht angeben .form-vertikal Klasse. Wir können Stile zu Formularsteuerelementen hinzufügen, ohne eine Basisklasse anzugeben Element. Für das grundlegende Formularlayout sind keine zusätzlichen Hilfsklassen erforderlich. Nachfolgend ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Vertical Form Layout Example</h2>
    <form>
       <div  >
          <label>Name</label>
          <input type="text"   placeholder="Enter Name">
       </div>
       <div  >
          <label>Email</label>
          <input type="text"   placeholder="Enter Email Address">
       </div>
       <div  >
          <label>Password</label>
          <input type="password"   placeholder="Enter Password">
       </div>
       <button type="submit"  >Submit</button>
    </form>
    </div>
    </body>
    </html>
     

    Das obige Skript erläutert das grundlegende vertikale Formularlayout in Bootstrap. Wir packen die Formularsteuerelemente und Beschriftungen in das ein

    mit Klasse .Gruppe formen. Es wird verwendet, um Platz zwischen Formularsteuerelementen auf einer Webseite zu schaffen. Die Formularsteuerelemente werden mit linksbündigen Beschriftungen oben definiert.

    • Führen Sie eine Demo zum vertikalen Formularlayout aus

    Bootstrap-Bild in vertikaler Form

    Inline-Formularlayout

    Die Inline-Formularelemente werden linksbündig an ihren Beschriftungen ausgerichtet, dh die Elemente werden mithilfe der Bootstrap-Klasse nebeneinander platziert .form-inline zum Element. Um Beschriftung und Eingabe in derselben Zeile zu haben, könnten wir dieses Inline-Formularlayout verwenden. Dieses Formularlayout kann nur verwendet werden, wenn die Ansichtsfenster mindestens 768 Pixel breit sind. Nachfolgend ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Inline Form Layout Example</h2>
    <form  >
       <div  >
          <label  >Name</label>
          <input type="text"   placeholder="Enter Name">
       </div>
       <div  >
          <label  >Email</label>
          <input type="text"   placeholder="Enter Email Address">
       </div>
       <div  >
          <label  >Password</label>
          <input type="password"   placeholder="Enter Password">
       </div>
       <div  >
          <label><input type="checkbox">Remember Me</label>
       </div>
       <button type="submit"  >Login</button>
    </form>
    </div>
    </body>
    </html>
    

    Das obige Skript definiert Formularelemente nebeneinander, indem es verwendet .form-inline Klasse. Wir nutzen die Klasse Nur .sr um Beschriftungen auszublenden, die für Bildschirmleseprogramme verwendet werden. Wenn wir nicht für jedes Eingabeelement Beschriftungen verwenden, werden die Bildschirmleser Probleme mit dem Formular haben. Wir können diese Beschriftungen also ausblenden, indem wir verwenden Nur .sr Klasse.

    • Führen Sie eine Demo zum Inline-Formularlayout aus

    Bootstrap-Inline-Formularbild

    Horizontales Formularlayout

    Das horizontale Formularlayout wird verwendet, um Formularelemente in horizontaler Form zu gruppieren, in der Beschriftungen rechtsbündig ausgerichtet und mithilfe der Bootstrap-Klasse nach links verschoben werden .form-horizontal zum Element. Nachfolgend ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Horizontal Form Layout Example</h2>
    <form  >
       <div  >
          <label  >Name</label>
          <div  >
          <input type="text"   placeholder="Enter Name">
          </div>
       </div>
       <div  >
          <label  >Email</label>
          <div  >
          <input type="text"   placeholder="Enter Email Address">
          </div>
       </div>
       <div  >
          <label  >Password</label>
            <div  >
          <input type="password"   placeholder="Enter Password">
          </div>
       </div>
       <div  >
          <div  >
             <div  >
                <label><input type="checkbox">Remember Me</label>
             </div>
          </div>
       </div>
       <div  >
          <div  >
             <button type="submit"  >Login</button>
          </div>
       </div>
    </form>
    </div>
    </body>
    </html>
    

    Das obige Skript zeigt die Formularelemente mithilfe der Klasse horizontal an .form-horizontal auf der Webseite. Der .control-label Die Klasse wird verwendet, um Formularsteuerelemente für eine ordnungsgemäße Ausrichtung einzuschließen, die dem hinzugefügt wird Element.

    • Führen Sie ein horizontales Formularlayout aus

    Bootstrap-Bild in horizontaler Form

    Unterstützte Steuerelemente

    Bootstrap unterstützt einige gängige Formularsteuerelemente wie Eingabe, Textbereich, Kontrollkästchen, Radio und Auswahl.

      • Der Eingang Das Element ist ein allgemeines Textfeld, in das wir die wichtigen Daten eingeben. Es verfügt über mehrere Eingabetypen für Formulare wie Datum, E-Mail, Monat, Nummer, Suche, URL, Bereich usw. Der Bootstrap bietet .input-lg, .input-sm Klassen, um größere und kleinere Eingabetypen zu erstellen.
      • Der Textbereich Definiert die Eingabesteuerung für mehrzeiligen Text. Es kann eine unbegrenzte Anzahl von Zeichen enthalten und die Größe des Textbereichs kann durch Spalten- und Zeilenattribute angegeben werden.
      • Der Kontrollkästchen sind eine Liste von Optionen, bei denen der Benutzer eine beliebige Anzahl von Optionen auswählen kann, was bedeutet, dass der Benutzer mehr als eine Option auswählen kann. Der Radio Schaltflächen enthalten eine Liste von Optionen, die sich gegenseitig ausschließen, und der Benutzer kann nur eine Option in einer Optionsfeldgruppe auswählen. Wenn wir sowohl Kontrollkästchen als auch Optionsfelder in derselben Zeile anzeigen möchten, können wir dies nutzen .checkbox-inline Und .radio-inline Klassen.
      • Der wählen wird verwendet, um Optionen aus der Dropdown-Liste auszuwählen, wobei jede Option durch ein Optionselement definiert wird. Das Select-Element muss mindestens ein Optionselement enthalten. Wenn wir mehr als eine Option auswählen möchten, verwenden Sie .mehrere Klasse.

    Betrachten Sie das folgende Beispiel mit Formularsteuerelementen:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Form Controls Example</h2>
    <form>
       <h2>Input Types</h2>
       <div  >
          <label>Larger Input</label>
             <input type="text"   placeholder="Enter Text">
        </div>
        <div  >
    	   <label>Smaller Input</label>
    	      <input type="text"   placeholder="Enter Text">
        </div>
    
        <h2>Text Area</h2>
        <div  >
    	      <textarea   rows="3" placeholder="This is textarea"></textarea>
    	</div>
    
    	<h2>Default Checkbox and Radio buttons</h2>
    	<div  >
    	   <label><input type="checkbox">Cricket</label>
        </div>
        <div  >
    	   <label><input type="checkbox">Football</label>
    	</div>
        <div  >
    	   <label><input type="radio" name="myradio" value="option1" checked>First Option</label>
    	</div>
    	<div  >
    	   <label><input type="radio" name="myradio" value="option2">Second Option</label>
        </div>
    
        <h2>Inline Checkbox and Radio buttons</h2>
        <div  >
    		<label><input type="checkbox">Cricket</label>
    	</div>
    	<div  >
    		<label><input type="checkbox">Football</label>
    	</div>
    	<div  >
    		<label><input type="radio" name="myradio1" value="option1" checked>First Option</label>
    	</div>
    	<div  >
    		<label><input type="radio" name="myradio1" value="option2">Second Option</label>
    	</div>
        <h2>Select Control Type</h2>
        <div  >
           <label>Select List</label>
              <select  >
                 <option>myval 1</option>
    			 <option>myval 2</option>
    			 <option>myval 3</option>
    			 <option>myval 4</option>
    			 <option>myval 5</option>
              </select>
           <label>Select List</label>
    	      <select multiple  >
    	         <option>myval 1</option>
    	   		 <option>myval 2</option>
    	   		 <option>myval 3</option>
    	   		 <option>myval 4</option>
    	   		 <option>myval 5</option>
              </select>
       </div>
    </form>
    </body>
    </html>
    
    • Führen Sie die Demo der unterstützten Steuerelemente aus

    Bild der von Bootstrap unterstützten Steuerelemente

    Statische Kontrolle

    Wenn wir den Wert auf einer Webseite nicht ändern oder einfachen Text, der nicht geändert oder geändert werden kann, nicht in eine Formularbeschriftung einfügen möchten, verwenden wir Bootstrap .form-control-static Klasse. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Static Control Example</h2>
    <form  >
       <div  >
          <label>Name</label>
          <p  >Mahantesh</p>
       </div>
       <div  >
          <label>Email</label>
          <p  >[email protected]</p>
       </div>
       <div  >
          <label>Password</label>
          <input type="password"   placeholder="Enter Password">
       </div>
       <button type="submit"  >Submit</button>
    </form>
    </div>
    </body>
    </html>
    
    • Führen Sie die Demo zur statischen Steuerung aus

    Statisches Bootstrap-Kontrollbild

    Formularkontrollzustände

    Eingabefokus

    Bootstrap impliziert spezielle Stile für Eingabefelder, wenn diese fokussiert oder deaktiviert werden. Wenn es :focus empfängt, wendet es stattdessen einen Box-Schatten an.
    Deaktivierte Eingänge

    Wir können die Eingabe deaktivieren, indem wir sie einfach anwenden deaktiviert Attribut für eine Eingabe und lässt die Eingabe auch etwas anders aussehen.
    Deaktivierte Feldsätze

    Wir können alle Steuerelemente deaktivieren, die sich unter Fieldset befinden, indem wir verwenden deaktiviert zuschreiben .
    Validierungszustände

    Bootstrap bietet verschiedene Möglichkeiten zum Gestalten von Eingabesteuerelementen für unterschiedliche Validierungszustände. Es enthält Stile für Fehler, Warnung und Erfolg bei der Validierung eines Formulars.

    Nachfolgend ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Form Control States Example</h2>
       <div  >
          <label>Focused</label>
    	        <input type="text"   placeholder="This is focused...">
       </div>
       <div  >
       <label>Name</label>
             <input type="text"   placeholder="It is disabled..." disabled>
       </div>
       <fieldset disabled>
       <div  >
             <label>Disabled Select Menu</label>
             <select  >
               <option>This is disabled select</option>
             </select>
        </div>
        </fieldset>
       <div  >
           <label>Name</label>
           <input type="text"   placeholder="Success!!!">
           <span  >Name is available</span>
       </div>
       <div  >
              <label>Password</label>
               <input type="password"   placeholder="Warning!!!">
              <span  >Password is too weak</span>
       </div>
       <div  >
              <label>Email</label>
              <input type="email"   placeholder="Error!!!">
              <span  >Enter valid email address</span>
       </div>
    </div>
    </body>
    </head>
    
    • Führen Sie die Demo „Formular-Kontrollzustände“ aus

    Statusbild des Bootstrap-Formular-Steuerelements

    Hilfstext

    Es hilft dem Benutzer, Daten korrekt in ein Formular einzugeben. Es enthält Hilfetext auf Blockebene mit den Eingaben. Wir können Inhalte auf Blockebene hinzufügen, indem wir verwenden .help-block Klasse nach dem Eingabeelement. Nachfolgend ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
       <link rel="stylesheet" type="text/css" href="myclass.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
       <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Help Text Example</h2>
       <form>
          <input type="text"  >
             <span  >Your name is not available!!!</span>
       </form>
    </div>
    </body>
    </html>
    
    • Führen Sie die Hilfetext-Demo aus

    Bootstrap-Hilfetextbild

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen