ตัวอย่าง Form Login โดยใช้ SemanticUI

| HTML SemanticUI | 73 | 53 วันที่แล้ว
สวัสดีคับ บทความนี้ผมมาแชร์โค้ดของ Form Login โดยใช้ SemanticUI คับ

ซึ่ง Login Form นั้นถ้าเราทำเว็บบ่อย ๆ ก็จะได้ใช้บ่อยเหมือนกัน

ผมเลยเอาโค้ดมาเผื่อใครจะนำไปใช้

โค้ดตัวอย่างตามด้านล่างเลยคับ

<div class="ui hidden divider"></div>
<h2 class="ui center aligned header">
    <div>
        <i class="ui user icon"></i> Log-in to Your Account
    </div>
</h2>
<div class="ui text container segment">
    <form id="inputForm" class="ui form" [formGroup]="inputForm">
        <div class="field">
            <div class="ui left icon input"><i class="user icon"></i>
                <input type="text" formControlName="bookedsellemail" placeholder="E-Mail" maxlength="100" />
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input"><i class="lock icon"></i>
                <input type="password" formControlName="bookedsellpassword" placeholder="Password" minlength="4" />
            </div>
        </div>
        <button class="ui fluid large primary submit button" [disabled]="disabledLogin()" (click)="submitLoginForm()">เข้าสู่ระบบ</button>
    </form>
    <div class="ui hidden divider"></div>
    <label>ยังไม่ได้ลงทะเบียนใช่ไหม? <a routerLink="/register">ลงทะเบียน</a> ตอนนี้เลย</label><br />
    <label>ไม่สามารถเข้าสู่ระบบได้? ไปที่หน้า <a routerLink="/forgot-password">ไม่สามารถลงทะเบียนได้</a> เพื่อ reset รหัสผ่านใหม่</label>
</div>
เมื่อนำโค้ดไปรัน จะได้หน้าตาประมาณนี้คับ ปล. 1. จากโค้ดตัวอย่างผมเอาโค้ด captcha ออกนะคับ 2. ส่วนของ action อาจจะติด angular ไปนะคับ
comments

[1]
AGI
58 D
[1]
Adobe-PDF
1162 D
[1]
Android
1053 D
[2]
Angular
36 D
[40]
Animal
1146 D
[1]
Apache
1162 D
[1]
[4]
[2]
[1]
[10]
CMS-Joomla
1163 D
[2]
CMS-SMF
1163 D
[1]
[4]
[1]
[3]
[1]
Database
1162 D
[4]
[1]
DeAI
23 D
[1]
DeData
23 D
[1]
DeFi
23 D
[2]
Docker
53 D
[2]
[1]
Forex
20 D
[1]
Fruit
1147 D
[1]
General
44 D
[2]
Git
949 D
[6]
HTML
53 D
[1]
Health
48 D
[1]
Housework
1151 D
[2]
IT
1143 D
[2]
Imacro
1163 D
[20]
Java
25 D
[1]
Java-Web
1053 D
[2]
[2]
MQL5
975 D
[3]
MakeMoney
948 D
[18]
[1]
[1]
Maven
947 D
[5]
[1]
Mobile
1160 D
[2]
NGINX
36 D
[2]
NodeJs
53 D
[1]
Oracle
53 D
[3]
Physics
944 D
[4]
PugJS
949 D
[2]
React
958 D
[132]
Science
1145 D
[2]
[5]
Spring
36 D
[12]
[7]
[2]
[1]
[4]
Ubuntu
1113 D
[1]
WebLogic
1144 D
[4]