Cara Membuat Dua Kolom Sejajar Dengan CSS

1
CARA MEMBUAT DUA KOLOM SEJAJAR DENGAN CSS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Dua kolom berdampingan</h2>
<div class="row">
<div class="column" style="background-color:#F0F8FF;">
<h2>Singularity 1</h2>
<p>............</p>
</div>
<div class="column" style="background-color:#FFF0F5;">
<h2>Singularity 2</h2>
<p>.............</p>
</div>
</div>
</body>
</html>
<style>
*{
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */

.column {
float: left;
width: 50%;
padding: 10px;
height: 500px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */

.row:after {
2
content: "";
display: table;
clear: both;
}
</style>
Trik Membuat Checkbox Sejajar Dengan Teks
<html>
<head>
</head>
<body>
<h2>Sebelum Make Over</h2>
<input type="checkbox" name="basketname" id="basketid"><label
for="basketid">Basket</label><br/>
<input type="checkbox" name="basename" id="baseid"><label for="baseid">Base
Ball</label>
<h2>Setelah Make Over</h2>
<input type="checkbox" name="bolaname" id="bolaid" class="makeover"><label
for="bolaid">Sepak Bola</label><br/>
<input type="checkbox" name="voliname" id="voliid" class="makeover"><label
for="voliid">Voli</label>
</article>
</body>
</html>
css
.makeover{
vertical-align: middle;
margin-top: -1px;
}
body{
line-height: 30px;
width: 300px;
margin:auto;
background: #CCC;
}
HTML Form
February 9, 2020 by Achmad Yusron Arif
Form atau formulir adalah fungsi di HTML untuk mengisi sesuatu.

Misalkan kita meminta data biodata setiap siswa, maka kita buat
formulir untuk setiap siswa.
Daftar Isi
 Element Form
 Membuat Input Field
3
o Input type
o Input name
o Input placeholder
o Input required
o Input disabled
 Membuat textarea form
 Membuat button form
 Membuat legend dan fieldset
 Praktik Membuat Form
Dulu, form dibuat manual di kertas. Dengan format misal:
Nama:
Tanggal Lahir:
Cita-cita:
Sekarang, kita biasa buat form tersebut secara online dengan
menggunakan kode HTML. Menjadi seperti ini:
Nama:
Tanggal Lahir:
Cita-cita:
Jelek kan? Ya iya, kan itu baru yang paling dasarnya hehe.
Ada banyak elemen dan atribut untuk membuat form, kita bahas
pelan-pelan yak.
Element Form
Untuk membuat form kita butuh sintag <form>..</form>.
Element ini memiliki beberapa atribut, yang paling penting adalah:
 action adalah
cara menentukan aksi / data akan dikirim /
diproses kemana setelah user mengisi formulir
 method adalah cara dalam mengirimkan data
Contoh, kita buat form kemudian kalau diklik akan mengarah ke
halaman proses.php, maka ditulis <form action="proses.php">.
Untuk dua atribut diatas, akan dibahas lebih detail kalau sudah
masuk ke bahasa pemrograman PHP.
Kalau masih HTML dasar, belum saatnya. Yang penting di seri
belajar HTML ini, kamu bener-bener paham dulu tentang HTML.
4
Membuat Input Field

Kalau kita ngisi form, pasti ada kolom-kolom yang harus diisi kan?
Nah itu yang dinamakan field.
Pertama adalah input, ditulis dengan kode <input>.
Ada banyak atribut dalam input, yaitu:
Input type
Ada banyak tipe atau jenis input, yaitu:
1. Text
Dinotasikan dengan type="text", yaitu form input untuk mengisi

data teks, bisa huruf dan angka. Contoh: <input type="text"> maka
hasilnya:
2. Email
Ditulis dengan type="email" yaitu form input yang bisa diisi hanya

dengan format teks email yang benar yaitu email@abc.def.
Contoh <input type="email">, maka hasilnya:
Sekilas emang seperti sama dengan tipe text, tapi ketika
digunakan web browser akan memberikan peringatan bahwa itu
khusus untuk email.
Atau jika dibuka di smartphone, keyboardmu akan berubah format
menjadi untuk ngisi email.
3. Number
Ditulis type="number" yaitu khusus untuk mengisi angka saja.

Biasanya dipakai untuk menuliskan nomor hp. Contoh: <input
type="number">
4. Checkbox
Ditulis dengan kode type="checkbox", biasanya dikombinasikan

dengan kode <label> untuk ngasih tahu, itu kita ngecentang
tentang apaan.
Contoh kode:
<label>
<input type="checkbox">
5
Saya setuju dengan aturannya
</input>
</label>
Hasilnya yaitu:
Saya setuju dengan aturannya

5. Radio
Radio disini bukan untuk dengerin siaran radio ya. Berbeda

dengan checkbox yang memungkinkan user mencentang opsi lebih
dari 1.
Kalau radio mewajibkan user milih jawaban hanya 1. Contohnya
untuk memilih jenis kelamin, ya kalau tidak cowok ya cewek kan?
Masak milih keduanya.
Untuk menulisnya dua input itu harus diberi name yang sama.
Contoh:
<label>
<input type="radio" name="kelamin">Laki-laki
</label>
<label>
<input type="radio" name="kelamin">Perempuan
</label>
Maka outputnya menjadi:
Laki-laki Perempuan
6. Password
Ini digunakan untuk membuat input password, jadi nanti karakter

yang diketikkan jadi bulet lingkaran item. Contoh: <input
type=”password”>
7. File
Digunakan untuk mengupload file baik gambar atau yang lain.

Ditulis dengan <input type="file">
6
8. Menu Dropdown
Menu ini juga salah satau yang terpenting, biasanya digunakan

untuk memilih satu opsi dengan banyak pilihan. Contohnya untuk
form agama:

Untuk membuatnya dibutuhkan kode <select>..</select> itu adalah
nama fieldnya. Kalau dropdown diatas nama select adalah
agama. Sedangkan option ditulis dengan <option
value="islam">Islam</option>.
Penerapannya menjadi:
<select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Konghucu">Konghucu</option>
<option value="Penghayat Kepercayaan">Penghayat Kepercayaan</option>
</select>
9. Type yang lainnya…
Diatas itu yang paling umum digunakan, dan masih ada yang lain
lagi terutama update di HTML 5. Saya tulis di tabel saja ya:
type=" " Keterangan
button Untuk membuat tombol
image Untuk membuat tombol gambar
color Untuk memilih warna
date Untuk memasukkan tanggal

7
type=" " Keterangan
datetime-local Untuk memasukkan tanggal dan waktu
month Untuk memasukkan bulan dan tahun
url Untuk memasukkan alamat situs / URL
week Untuk memasukkan tanggal dengan minggu dalam setahun
search Untuk membuat fitur pencarian
tel Untuk memasukkan format nomor telepon
Tabel: Atribut dan value untuk input
Input name
Adalah identifikator dari suatu value atau isi data dari field yang
diinputkan. Data dari name inilah yang akan dibaca oleh server.
Misal kita ingin buat field hobi, maka identifikasi name sebagai
berikut <input type="text" name="hobi">.
Jadi, setiap field harus diberi name supaya server bisa membaca
data yang dimasukkan.
Input placeholder
Adalah keterangan dari suatu field, misal kita ingin
buat field email maka kodenya <input type="email" placeholder="email
kamu">.
Input required
Adalah identifikasi untuk membuat field tersebut wajib diisi. Misal
buat input nama yang harus diisi, kodenya: <input type="text"
required>
Input disabled
Untuk menonaktifkan inputan, maksudnya ada fieldnya tapi tidak
bisa diisi. Lah terus buat apa dong? Biasanya dipakai
dalam form edit data, jika ada beberapa data yang tidak bisa
diganti.
8
Contoh field nama ayah tidak bisa diganti, karena tidak mungkin

ayah kandung kita ganti. <input type="text" disabled placeholder="nama
bapak">
Membuat textarea form

Textarea hampir sama seperti input, yang membedakan adalah
cakupan karakter dan penggunaannya.
Teks area biasa digunakan untuk form edit konten,
atau field mendeskripsikan tentang diri sendiri.
Textarea itu multiline sedangkan input itu single line
Didefinisikan dengan tag <textarea>..</textarea>.
Berikut atribut dan valuenya (cara menggunakan: atribut="value"):

Atritbut Value Keterangan
Mendefinisikan variabel yang dibaca oleh

name bebas terserah kamu
server
Bisa mengisi formulir otomatis, jika di browser

autocomplete on dan off sudah menyimpan data yang sama
sebelumnya
minlength angka Minimal karakter yang diinputkan
maxlength angka Maksimal karakter yang diinputkan
cols angka Jumlah kolom (ukuran)
rows angka Jumlah baris (ukuran)
Teks otomatis akan turun kebawah jika

wrap hard dan soft
panjangnya sudah melebihi ukuran teks area
disabled – Menonaktifkan
required – Harus diisi

9
Atritbut Value Keterangan
Ketika form dibuka, maka field pertama yang

autofocus –
diisi adalah ini
readonly – Teks area hanya bisa dibaca
Mengizinkan browser untuk mengecek

spellcheck –
gramatikal penulisan
Membuat button form

Untuk membuat tombol dalam form kita butuh element <button>.
Ada dua tipe button yaitu:
 submit yaitu ketika diklik akan mengirimkan value dari name data
yang dikirim
 reset yaitu ketika diklik akan menghapus semua data yang
telah diisi di formulir
Contoh, saya ingin buat tombol dengan tulisan kirim sekarang.
Maka kodenya <button>kirim sekarang</button>.
kirim sekarang
Membuat legend dan fieldset

Terakhir adalah membuat legend dan fieldset.
Legend atau legenda disini adalah keterangan dari suatu field,
seperti legenda dalam suatu peta.
Sedangkan fieldset itu untuk mendefinisikan / merapikan ini
tuh field apa. Biar tidak bingung, lihat contoh kode berikut:
<form>
<fieldset>
<legend>Masukkan email kamu</legend>
<input tyle="email" placeholder="your email"/>
<button type="submit">OK</button>
</fieldshet>
10
</form>
Hasilnya akan menjadi:
Masukkan email kamu OK
Praktik Membuat Form

Saya rasa sudah paham yak? Jika belum paham, baca pelan-
pelan ya.
<form>
<fieldset>
<legend>Data Siswa</legend>
<table width="100%">
<tr><td width="40%">
<label>Nama Lengkap</label>
</td><td> :<input type="text" name="nama_lengkap"></td></tr>
<tr><td width="40%"><label>Nama Panggilan</label></td><td> :<input type="text"

name="nama_panggilan"></td></tr>
<tr><td width="40%">Jenis Kelamin</td><td> :<label><input type="radio"

name="kelamin">Laki-laki</label><br><label><input type="radio"
name="kelamin">Perempuan</label></td></tr>
<tr><td width="40%">Tempat Tanggal Lahir</td><td> :<input type="text"

name="ttl"></td></tr>
<tr><td width="40%">Agama</td><td> :
<select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
11
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Konghucu">Konghucu</option>
<option value="Penghayat Kepercayaan">Penghayat Kepercayaan</option>
</select>
</td></tr>
<tr><td width="40%">Berat Badan</td><td> :<input type="number"

name="berat_badan"></td></tr>
<tr><td width="40%">Tinggi Badan</td><td> :<input type="number"

name="tinggi_badan"></td></tr>
<tr><td width="40%">Golongan Darah</td><td> :
<label><input type="radio" name="gol_dar">O</label>
<label><input type="radio" name="gol_dar">A</label>
<label><input type="radio" name="gol_dar">B</label>
<label><input type="radio" name="gol_dar">AB</label>
</td></tr>
</table>
</fieldset>
<fieldset>
<legend>Kontak Siswa</legend>
<table>
<tr><td width="40%">Alamat Rumah</td><td> :<textarea></textarea></td></tr>
<tr><td width="40%">Email</td><td> :<input type="Email" name="email"></td></tr>
<tr><td width="40%">No. HP</td><td> :<input type="number" name="no_hp"></td></tr>
</table>
</fieldset>
12
<button type="submit">Kirim</button>
</form>
Kode diatas akan menghasilkan form input seperti dibawah:

Data Siswa
Nama Lengkap :
Nama Panggilan :
: Laki-laki
Jenis Kelamin
Perempuan
Tempat Tanggal Lahir :
Agama :
Berat Badan :
Tinggi Badan :
Golongan Darah : O A B AB
Kontak Siswa
Alamat Rumah
Email :
No. HP :
Kirim
Tampilannya akan berbeda jika kamu mencobanya sendiri,
kenapa?
13
Karena, desain form diatas sudah terkonversi dengan style CSS

yang ada di web saya ini. Untuk versi tanpa style CSS akan
menjadi seperti ini:
Tampilan Default Formulir

Form html diatas saya kombinasikan dengan kode html
tabel supaya tampilannya lebih rapi.
Jika masih ada pertanyaan tanya ya.

Cara Membuat Dua Kolom Sejajar Dengan CSS

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Membuat Dua Kolom Sejajar Dengan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

1

CARA MEMBUAT DUA KOLOM SEJAJAR DENGAN CSS

<h2>Dua kolom berdampingan</h2>

/* Create two equal columns that floats next to each other */

/* Clear floats after the columns */

Trik Membuat Checkbox Sejajar Dengan Teks

Form atau formulir adalah fungsi di HTML untuk mengisi sesuatu.

Membuat Input Field

Dinotasikan dengan type="text", yaitu form input untuk mengisi

Ditulis dengan type="email" yaitu form input yang bisa diisi hanya

Ditulis type="number" yaitu khusus untuk mengisi angka saja.

Ditulis dengan kode type="checkbox", biasanya dikombinasikan

Saya setuju dengan aturannya

Saya setuju dengan aturannya

Radio disini bukan untuk dengerin siaran radio ya. Berbeda

<input type="radio" name="kelamin">Laki-laki

<input type="radio" name="kelamin">Perempuan

Ini digunakan untuk membuat input password, jadi nanti karakter

Digunakan untuk mengupload file baik gambar atau yang lain.

Menu ini juga salah satau yang terpenting, biasanya digunakan

<option value="Penghayat Kepercayaan">Penghayat Kepercayaan</option>

button Untuk membuat tombol

image Untuk membuat tombol gambar

color Untuk memilih warna

date Untuk memasukkan tanggal

type=" " Keterangan

datetime-local Untuk memasukkan tanggal dan waktu

month Untuk memasukkan bulan dan tahun

url Untuk memasukkan alamat situs / URL

week Untuk memasukkan tanggal dengan minggu dalam setahun

search Untuk membuat fitur pencarian

tel Untuk memasukkan format nomor telepon

Tabel: Atribut dan value untuk input

Contoh field nama ayah tidak bisa diganti, karena tidak mungkin

Membuat textarea form

Berikut atribut dan valuenya (cara menggunakan: atribut="value"):

Mendefinisikan variabel yang dibaca oleh

Bisa mengisi formulir otomatis, jika di browser

minlength angka Minimal karakter yang diinputkan

maxlength angka Maksimal karakter yang diinputkan

cols angka Jumlah kolom (ukuran)

rows angka Jumlah baris (ukuran)

Teks otomatis akan turun kebawah jika

required – Harus diisi

Atritbut Value Keterangan

Ketika form dibuka, maka field pertama yang

readonly – Teks area hanya bisa dibaca

Mengizinkan browser untuk mengecek

Membuat button form

Membuat legend dan fieldset

<legend>Masukkan email kamu</legend>

<input tyle="email" placeholder="your email"/>

Hasilnya akan menjadi:

Masukkan email kamu OK

Praktik Membuat Form

</td><td> :<input type="text" name="nama_lengkap"></td></tr>

<tr><td width="40%"><label>Nama Panggilan</label></td><td> :<input type="text"

<tr><td width="40%">Jenis Kelamin</td><td> :<label><input type="radio"

<tr><td width="40%">Tempat Tanggal Lahir</td><td> :<input type="text"

<option value="Penghayat Kepercayaan">Penghayat Kepercayaan</option>

<tr><td width="40%">Berat Badan</td><td> :<input type="number"

<tr><td width="40%">Tinggi Badan</td><td> :<input type="number"