Form Login sederhana menggunakan html css
Banyak orang berfikir bahwa belajar menggunakan HTML dan CSS itu sangat sulit, padahal kalau kita mau memperhatikan sebentar saja dalam strukturnya maka mungkin kita akan berfikir bahwa ternyata gitu cara menggunakan HTML dan CSS.
Untuk itu hari ini saya sekedar ingin berbagi pengalaman bagaimana belajar html dan css dengan mudah. sebenarnya kita hanya perlu tau apa saja sih komponen atau tag-tag dalam html dan css???.
dan disini saya ingin berbagi tutorial cara mudah membuat form login sederhana menggunakan html dan css sebagai permulaan dalam belajar html dan css.
baik langsung saja kita praktek bagaimana membuat tampilan form login sederhana dengan html dan css sebagai layoutnya.
pertama kita buat dulu file htmlnya menggunakan editor yang kita punya seperti notepad,sublime, notepad++, netbeans dll.
kemudian buka file yang kita buat tadi menggunakan editor kesayangan kita, disini saya contohkan memakai editor sublime text.
seperti itulah kira-kira tampilan sublime text. Nah di dalam file yang kita buat tadi ketikkan script berikut untuk membuat form login sederhana menggunakan html, script berikut belum mencangkup css atau belum dilengkapi dengan layout css jadi layoutnya masih default.
lalu buka file tadi dengan browser yang anda punya (browser kesayangan anda tentunya)
mengenai script form login sederhana menggunakan html bisa dilihat di bawah :
Nah itu adalah script form login menggunakan html tentunya sangat sederhana lanjut bagaimana mengatur layout form tersebut menggunakan css???
kita praktekkan disini langkah pertama jika ingin menggunakan css kita tentukan dulu
apakah cssnya mau di internal atau didalam file html atau mau menggunakan css yang eksternal atau diluar file html
karena postingan ini berjudul membuat form login sederhana menggunakan html dan css maka kita pakai css yang internal saja
untuk file css yang diluar file html bisa lihat postingan saya yang lain
silahkan perhatikan script berikut :
Untuk itu hari ini saya sekedar ingin berbagi pengalaman bagaimana belajar html dan css dengan mudah. sebenarnya kita hanya perlu tau apa saja sih komponen atau tag-tag dalam html dan css???.
dan disini saya ingin berbagi tutorial cara mudah membuat form login sederhana menggunakan html dan css sebagai permulaan dalam belajar html dan css.
baik langsung saja kita praktek bagaimana membuat tampilan form login sederhana dengan html dan css sebagai layoutnya.
pertama kita buat dulu file htmlnya menggunakan editor yang kita punya seperti notepad,sublime, notepad++, netbeans dll.
kemudian buka file yang kita buat tadi menggunakan editor kesayangan kita, disini saya contohkan memakai editor sublime text.
seperti itulah kira-kira tampilan sublime text. Nah di dalam file yang kita buat tadi ketikkan script berikut untuk membuat form login sederhana menggunakan html, script berikut belum mencangkup css atau belum dilengkapi dengan layout css jadi layoutnya masih default.
lalu buka file tadi dengan browser yang anda punya (browser kesayangan anda tentunya)
mengenai script form login sederhana menggunakan html bisa dilihat di bawah :
<!DOCTYPE html>
<html>
<head>
<title>Memperindah tampilan Web menggunakan css</title>
</head>
<body> <form method="GET" action="formku.html">
<div>
<h2>Form Login</h2>
</div>
<div>
<label>Username</label>
<label>:</label>
<input type="text" name="user">
</div>
<div>
<label>Password</label>
<label>:</label>
<input type="password" name="pass">
</div>
<div>
<input type="submit" name="login" value="Login">
</div>
</form>
</body>
</html>
Nah itu adalah script form login menggunakan html tentunya sangat sederhana lanjut bagaimana mengatur layout form tersebut menggunakan css???
kita praktekkan disini langkah pertama jika ingin menggunakan css kita tentukan dulu
apakah cssnya mau di internal atau didalam file html atau mau menggunakan css yang eksternal atau diluar file html
karena postingan ini berjudul membuat form login sederhana menggunakan html dan css maka kita pakai css yang internal saja
untuk file css yang diluar file html bisa lihat postingan saya yang lain
silahkan perhatikan script berikut :
<!DOCTYPE html>
<html>
<head>
<title>Memperindah tampilan Web menggunakan css</title>
</head>
<body> <form method="GET" action="formku.htm style="width: 300px; margin: auto;text-align: center;background-color: #abcdef;padding-top: 10px;padding-bottom: 10px;">
<div>css yang saya maksud di internal adalah (style=" %%%" ) yang ada di setiap tag dalam file html tersebut "sudah saya kasih warna kuning pada scriptnya".
<h2>Form Login</h2>
</div>
<div style="margin:20px;padding: 5px;">
<label style="float: left;">Username</label>
<input style="float: right;" type="text" name="user">
<label style="float: right;">:</label>
</div>
<div style="clear: both;margin:20px;padding: 5px;">
<label style="float: left;">Password</label>
<input style="float: right;" type="password" name="pass">
<label style="float: right;">:</label>
</div>
<div style="clear: both;margin:20px;padding: 5px;">
<input style="float: right;" type="submit" name="login" value="Login">
</div>
</form>
</body>
</html>
nah sekarang bisa anda praktekkan di PC anda masing-masing tentang bagaimana membuat form login sederhana menggunakan html dan css.
semoga postingan ini beranfaat bagi kita semua. dan tetap semangat ....
sekian dulu postingan saya kali ini, kita bejumpa lagi dipostingan saya yang lain
daaahhh...
jika ada pertanyaan , kritik atau saran terkait postingan ini silahkan tinggalkan komentar agar menjadi refrensi saya untuk berbenah..
semoga bermanfaat...
No comments:
Post a Comment
pertanyaan atau masukan
komentar tak tunggu...