วิธีใส่ Form Login Boostrap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

tai14
PHP Super Member
PHP Super Member
โพสต์: 224
ลงทะเบียนเมื่อ: 06/08/2018 10:25 am

วิธีใส่ 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) เปิดดู 150 ครั้ง



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) เปิดดู 150 ครั้ง

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน