วิธีใส่ Form Login Boostrap

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีใส่ Form Login Boostrap

วิธีใส่ Form Login Boostrap

โพสต์ โดย tai14 » 23/08/2018 6:02 pm

ในหน้าเว็บไซต์ส่วนใหญ่จะมีหน้า Login เป็นหน้าแรกของ เว็บไซต์ เป็นหน้าที่ใช้ตรวจสอบการเข้าใช้งานของหน้าเว็บ โดยแบ่ง Form Login เป็นสองรูปแบบ คือ Form Login แบบแนวยาวและแบบแนวตั้ง การนำเอา Bootstrap มาใช้เป็น Form LogIn จะทำให้สวยงามมากขึ้นและรวดเร็วในการใช้งานไม่ต้องเขียนโค้ดขึ้นมาเอง

วิธีนำ Form Login ไปใช้งานคือ นำโค้ดไปวางในส่วนของ <body> โดยสามารถเปลี่ยนชื่อของช่องรับ Username , Password , ชื่อช่องเลือกให้ Remember me และ ชื่อปุ่มได้

Form Login แบบเรียงตามแนวยาว

โค้ด: เลือกทั้งหมด

 
<form class="form-inline">
            <input type="text" class="input-small" placeholder="Username">         
            <input type="password" class="input-small" placeholder="Password">     
            <label class="checkbox">                                                                   
                <input type="checkbox"> Remember me                                 
            </label>
            <button type="LogIn" class="btn">LogIn</button>                         
</form>   

Screenshot_276.jpg
Screenshot_276.jpg (8.07 KiB) เปิดดู 1470 ครั้ง



Form Login แบบเรียงตามแนวตั้ง

โค้ด: เลือกทั้งหมด

<form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                    <button type="submit" class="btn">Sign in</button>
                </div>
            </div>
        </form>

Screenshot_275.jpg
Screenshot_275.jpg (10.42 KiB) เปิดดู 1470 ครั้ง

ข้างบน