ในหน้าเว็บไซต์ส่วนใหญ่จะมีหน้า
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 (8.07 KiB) Viewed 4215 times
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 (10.42 KiB) Viewed 4215 times
ในหน้าเว็บไซต์ส่วนใหญ่จะมีหน้า [url=https://www.mindphp.com/vdo-tutorial-php7/6410-php7-login-cookie.html]Login[/url] เป็นหน้าแรกของ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/156-website.htmll]เว็บไซต์[/url] เป็นหน้าที่ใช้ตรวจสอบการเข้าใช้งานของหน้าเว็บ โดยแบ่ง Form Login เป็นสองรูปแบบ คือ Form Login แบบแนวยาวและแบบแนวตั้ง การนำเอา [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]Bootstrap[/url] มาใช้เป็น Form LogIn จะทำให้สวยงามมากขึ้นและรวดเร็วในการใช้งานไม่ต้องเขียนโค้ดขึ้นมาเอง
วิธีนำ Form Login ไปใช้งานคือ นำโค้ดไปวางในส่วนของ <body> โดยสามารถเปลี่ยนชื่อของช่องรับ Username , Password , ชื่อช่องเลือกให้ Remember me และ ชื่อปุ่มได้
[b]Form Login แบบเรียงตามแนวยาว[/b]
[code]
<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>
[/code]
[attachment=0]Screenshot_276.jpg[/attachment]
[b]Form Login แบบเรียงตามแนวตั้ง[/b]
[code]
<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>
[/code]
[attachment=1]Screenshot_275.jpg[/attachment]