Bootstrap - แบบฟอร์ม

ในบทนี้เราจะศึกษาวิธีสร้างแบบฟอร์มอย่างง่ายดายโดยใช้ Bootstrap Bootstrap ช่วยให้ง่ายขึ้นด้วยมาร์กอัป HTML แบบง่ายและคลาสเพิ่มเติมสำหรับรูปแบบรูปแบบต่างๆ ในบทนี้เราจะศึกษาวิธีสร้างแบบฟอร์มอย่างง่ายดายโดยใช้ Bootstrap

เค้าโครงแบบฟอร์ม

Bootstrap ให้คุณมีเค้าโครงรูปแบบต่อไปนี้ -

• แบบฟอร์มแนวตั้ง (ค่าเริ่มต้น)
• แบบฟอร์มในบรรทัด
• รูปแบบแนวนอน

แบบฟอร์มแนวตั้งหรือพื้นฐาน

โครงสร้างรูปแบบพื้นฐานมาพร้อมกับ Bootstrap; การควบคุมแบบฟอร์มแต่ละรายการจะได้รับสไตล์สากลบางอย่างโดยอัตโนมัติ ในการสร้างแบบฟอร์มพื้นฐานให้ทำดังต่อไปนี้ -

• เพิ่มฟอร์มบทบาทให้กับองค์ประกอบ <form> หลัก

• ฉลากห่อและการควบคุมใน <div> กับชั้น.form กลุ่ม สิ่งนี้จำเป็นสำหรับการเว้นระยะห่างที่เหมาะสม

• เพิ่มคลาสของ. form-controlให้กับองค์ประกอบ <input>, <textarea> และ <select> ที่เป็นข้อความทั้งหมด

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

แบบฟอร์มอินไลน์

ในการสร้างฟอร์มที่องค์ประกอบทั้งหมดอยู่ในบรรทัดจัดชิดซ้ายและป้ายกำกับอยู่ข้างๆให้เพิ่มคลาส. form-inlineลงในแท็ก <form>

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

• โดยค่าเริ่มต้นอินพุตเลือกและพื้นที่ข้อความมีความกว้าง 100% ใน Bootstrap คุณต้องตั้งค่าความกว้างบนตัวควบคุมฟอร์มเมื่อใช้แบบฟอร์มอินไลน์

• การใช้คลาส. sr-onlyคุณสามารถซ่อนเลเบลของแบบฟอร์มอินไลน์ได้

แบบฟอร์มแนวนอน

รูปแบบแนวนอนแตกต่างจากรูปแบบอื่น ๆ ไม่เพียง แต่ในปริมาณมาร์กอัปเท่านั้น แต่ยังรวมถึงการนำเสนอแบบฟอร์มด้วย ในการสร้างฟอร์มที่ใช้เค้าโครงแนวนอนให้ทำดังต่อไปนี้ -

• เพิ่มคลาสของ. form-horizontalให้กับองค์ประกอบ <form> พาเรนต์

• ฉลากห่อและการควบคุมใน <div> กับชั้น.form กลุ่ม

• เพิ่มคลาสของ . control-labelลงในเลเบล

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

การควบคุมแบบฟอร์มที่รองรับ

Bootstrap รองรับการควบคุมรูปแบบที่พบบ่อยที่สุดโดยส่วนใหญ่ป้อนข้อมูลพื้นที่ข้อความช่องทำเครื่องหมายวิทยุและเลือก

อินพุต

ช่องข้อความฟอร์มที่พบบ่อยที่สุดคือช่องป้อนข้อมูล นี่คือที่ที่ผู้ใช้จะป้อนข้อมูลฟอร์มที่จำเป็นส่วนใหญ่ เงินทุนให้การสนับสนุนทุกรูปแบบการใส่ HTML5 พื้นเมือง: ข้อความรหัสผ่าน, วันที่และเวลาวันที่และเวลาท้องถิ่นวันเดือนเวลาสัปดาห์จำนวนอีเมล URL ค้นหาโทร,และสี จำเป็นต้องมีการประกาศประเภทที่เหมาะสมเพื่อให้อินพุตมีสไตล์อย่างสมบูรณ์

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

textarea ใช้เมื่อคุณต้องการอินพุตหลายบรรทัด เปลี่ยนแอตทริบิวต์ของแถวตามความจำเป็น (แถวน้อยลง = กล่องเล็กลงแถวมากขึ้น = กล่องใหญ่ขึ้น)

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

กล่องกาเครื่องหมายและปุ่มวิทยุ

ช่องทำเครื่องหมายและปุ่มตัวเลือกเหมาะอย่างยิ่งเมื่อคุณต้องการให้ผู้ใช้เลือกจากรายการตัวเลือกที่ตั้งไว้ล่วงหน้า

• เมื่อสร้างแบบฟอร์มให้ใช้ช่องทำเครื่องหมายหากคุณต้องการให้ผู้ใช้เลือกตัวเลือกจำนวนเท่าใดก็ได้จากรายการ ใช้วิทยุหากคุณต้องการ จำกัด ผู้ใช้ให้เลือกเพียงรายการเดียว

• ใช้. checkbox-inlineหรือ. radio-inline class กับชุดของช่องทำเครื่องหมายหรือวิทยุสำหรับการควบคุมจะปรากฏในบรรทัดเดียวกัน

ตัวอย่างต่อไปนี้แสดงทั้งประเภท (ค่าเริ่มต้นและแบบอินไลน์) -

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

เลือก

การเลือกใช้เมื่อคุณต้องการอนุญาตให้ผู้ใช้เลือกจากตัวเลือกต่างๆ แต่โดยค่าเริ่มต้นจะอนุญาตเพียงตัวเดียว

• ใช้ <select> สำหรับตัวเลือกรายการที่ผู้ใช้คุ้นเคยเช่นสถานะหรือตัวเลข

• ใช้multiple = "multiple"เพื่อให้ผู้ใช้เลือกมากกว่าหนึ่งตัวเลือก

ตัวอย่างต่อไปนี้แสดงให้เห็นทั้ง (เลือกและหลายประเภท) -

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

การควบคุมแบบคงที่

ใช้คลาส. form-control-staticบน <p> เมื่อคุณต้องการวางข้อความธรรมดาถัดจากป้ายกำกับฟอร์มภายในฟอร์มแนวนอน

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

สถานะการควบคุมแบบฟอร์ม

นอกเหนือจากสถานะ: focus (กล่าวคือผู้ใช้คลิกเข้าไปในอินพุตหรือแท็บ) แล้ว Bootstrap ยังเสนอสไตล์สำหรับอินพุตที่ปิดใช้งานและคลาสสำหรับการตรวจสอบแบบ

อินพุตโฟกัส

เมื่อได้รับการป้อนข้อมูล: เน้นเค้าร่างของท่านจะถูกลบออกและกล่องเงาถูกนำไปใช้

ปิดการใช้งาน lnputs

หากคุณต้องการปิดการใช้งานอินพุตเพียงแค่เพิ่มแอตทริบิวต์ที่ปิดใช้งานจะไม่เพียงปิดการใช้งานเท่านั้น นอกจากนี้ยังจะเปลี่ยนรูปแบบและเคอร์เซอร์ของเมาส์เมื่อเคอร์เซอร์วางเมาส์เหนือองค์ประกอบ

ปิดใช้งาน Fieldsets

เพิ่มแอตทริบิวต์ที่ปิดใช้งานไปยัง <fieldset> เพื่อปิดใช้งานการควบคุมทั้งหมดภายใน <fieldset> พร้อมกัน

สถานะการตรวจสอบ

Bootstrap ประกอบด้วยรูปแบบการตรวจสอบข้อผิดพลาดคำเตือนและข้อความแสดงความสำเร็จ หากต้องการใช้เพียงแค่เพิ่มคลาสที่เหมาะสม ( .has-warning, .has-error หรือ .has-success ) ให้กับองค์ประกอบหลัก

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสถานะการควบคุมฟอร์มทั้งหมด -

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

ขนาดควบคุมฟอร์ม

คุณสามารถกำหนดความสูงและความกว้างของฟอร์มโดยใช้คลาสเช่น. input-lgและ. col-lg- *ตามลำดับ ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสิ่งนี้ -

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

ข้อความช่วยเหลือ

ตัวควบคุมฟอร์ม Bootstrap สามารถมีข้อความวิธีใช้ระดับบล็อกที่ไหลไปพร้อมกับอินพุต ในการเพิ่มบล็อกเนื้อหาแบบเต็มความกว้างให้ใช้. help-blockหลัง <input> ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสิ่งนี้ -

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>