Cara membuat form html dan css

Web Design

Table of Contents Show

Membuat Desain Form Login Dengan CSS
Membuat Desain Form Login Dengan CSS
Bagaimana cara membuat form pada web di HTML?
Apa itu form pada HTML?
Langkah langkah membuat form login?
Atribut apa saja yang di gunakan membuat form dalam document HTML?

By
24 September 2018
Web Design

Membuat Desain Form Login Dengan CSS – halaman form login adalah sebuah halaman yang di akses oleh user ketika ingin mengakses halaman khusus seperti dashboard admin.

Ada beberapa teman-teman pembaca tutorial di malasngoding.com yang mengirim pesan ke saya melalui instagram untuk dibuatkan contoh desain dan cara mendesain halaman login yang mudah dan simple.

Oleh karena itu, pada Tutorial Membuat Desain Form Login Dengan CSS ini akan kita akan belajar :

Desain halaman login
Desain element form html
Desain tombol login
Dan lainnya, silahkan teman-teman simak saja ya 🙂

Langsung saja kita mulai cara membuat form login dan desain form login sederhana dengan CSS.

Di contoh kasus ini saya membuat form nya dalam file HTML. teman-teman bisa menerapkan ke project PHP teman-teman atau menyesuaikan.

Di sini saya membuat file HTML dengan nama index.html. atau bebas terserah teman-teman.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat Desain Form Login Dengan CSS- www.malasngoding.com</title>

</head>

<body>

<h2>Membuat Desain Form Login Dengan CSS<br/>www.malasngoding.com</h2>

<pclass="tulisan_login">Silahkan login</p>

<form>

<label>Username</label>

<label>Password</label>

<br/>

<aclass="link"href="https://www.malasngoding.com">kembali</a>

</center>

</form>

</div>

</body>

</html>

Akan saya jelaskan dulu tentang file atau syntax HTML di atas, saya yakin teman-teman sudah membaca dan mempelajari semua tutorial HTML dasar dari malasngoding.com.

jika belum silahkan teman-teman baca dulu tutorial HTML dasar untuk pemula dari malasngoding.com.

Agar tidak rancu dalam mengikuti tutorial ini, sehingga teman-teman bisa lebih mudah memahami pembahasan Membuat Desain Form Login Dengan CSS ini.

di sini kita membuat form di dalam element <div> .. </div> yang kita beri class “kotak_login”.

<pclass="tulisan_login">Silahkan login</p>

<form>

<label>Username</label>

<label>Password</label>

<br/>

<aclass="link"href="https://www.malasngoding.com">kembali</a>

</center>

</form>

</div>

pada form login yang kita buat di atas, kita juga membuat element <p></p> yang bertuliskan “silahkan login”. dan masing-masing form sudah kita berikan class. silahkan teman-teman baca lagi tutorial sebelumnya tentang class HTML di malasngoding.com.

kemudian tinggal kita buat file CSS nya, seperti yang sudah kita buat pada file HTML di atasm bahwa CSS nya kita akan menulisnya dengan External CSS.

Buat sebuah file CSS dengan nama style.css

style.css

body{

font-family:sans-serif;

background:#d5f0f3;

}

h2{

text-align:center;

/*ketebalan font*/

font-weight:300;

}

.tulisan_login{

text-align:center;

/*membuat semua huruf menjadi kapital*/

text-transform:uppercase;

}

.kotak_login{

width:350px;

background:white;

/*meletakkan form ke tengah*/

margin:80pxauto;

padding:30px20px;

}

label{

font-size:11pt;

}

.form_login{

/*membuat lebar form penuh*/

box-sizing:border-box;

width:100%;

padding:10px;

font-size:11pt;

margin-bottom:20px;

}

.tombol_login{

background:#46de4b;

color:white;

font-size:11pt;

width:100%;

border:none;

border-radius:3px;

padding:10px20px;

}

.link{

color:#232323;

text-decoration:none;

font-size:10pt;

}

syntax css di atas adalah syntax css sederhana yang juga sudah saya jelaskan pada tutorial CSS bahasa indonesia lengkap di malasngoding.com.

Sekarang yuk kita lihat hasilnya, silahkan teman-teman buka index.html nya di browser.

Membuat Desain Form Login Dengan CSS

Silahkan teman-teman download atau lihat demonya pada link berikut.

DEMO

DOWNLOAD

Sekian tutorial Membuat Desain Form Login Dengan CSS. semoga dapat bermanfaat. selanjutnya kita akan belajar membuat desain material untuk form login dengan css.

Terima kasih, sampai jumpa di tutorial selanjutnya.

Incoming search terms:

form login css
coding login html
membuat form login html
css login
membuat tampilan login
From pendataran html css
cara membuat form login html
Cara membuat Desain Form dalam CSS
cara membuat form login dengan html dan css
membuat form login html dan css

Tags: cara buat form login, cara buat html, cara membuat form login html, cara membuat form pendaftaran dengan html, cara membuat form pendaftaran dengan html dan css, contoh desain web html sederhana, contoh desain web menggunakan dreamweaver, contoh desain web menggunakan html dan css, contoh form html, contoh html, contoh web dinamis, contoh web html, contoh web html dan css, contoh web html keren, contoh web sederhana dengan html, contoh web sederhana dengan html dan css

Bagaimana cara membuat form pada web di HTML?

Untuk membuat form menggunakan bahasa HTML dapat mengunakan element HTML yaitu <form> … </form>. Dalam element form tersebut, harus ditambahkan element lain sesuai dengan jenis inputan yang dipakai yaitu element <input>, <label>, <textarea>, <select>, dan <button>.

Apa itu form pada HTML?

Di antara fitur penting dari HTML adalah: tag form. Yaitu sebuah tag yang kita gunakan untuk mengkoleksi inputan dari user, konsep ini sama seperti konsep formulir di dunia nyata. Umumnya, sebuah website selalu memiliki fitur form, contoh paling umum yang sering kita temui adalah: form login.

Cara Membuat Form Login yang Menarik dengan HTML.

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html form login Anda. ... .

2. Buat Kepala Halaman Form Login. ... .

3. Beri Judul Halaman Form Login. ... .

3. Sisipkan File CSS. ... .

4. Buat Badan Form Login. ... .

Buat Layout Form Login. ... .

6. Beri Judul Form Login. ... .

7. Buat Kotak Form Login..

Atribut apa saja yang di gunakan membuat form dalam document HTML?

Atribut Type. Atribut type memiliki banyak sekali nilai, namun karena ini pembahasan mengenai form maka akan saya informasikan nilai-nilai yang sering digunakan untuk membuat form, antara lain: ... .

Atribut Value. ... .

Atribut placeholder. ... .

Atribut Required. ... .

Tag <textarea> HTML. ... .

Tag <select> HTML..