November 22, 2019

CARA MEMBUAT FORM RESPONSIF MELALUI METODE PENULISAN HTML BLOGGER

form
form ilustration
Terkadang kita harus membuat form isian untuk untuk kebutuhan blogging khusus, misalnya dengan tujuan meminta orang mendaftarkan diri mereka bergabung dengan komunitas bisnis kita. Percayalah kepada saya, kalian membutuhkan sebuah bentuk form untuk itu. Namun tidak mudah membuatnya di halaman blogger karena blogger bukan stylesheet seperti aplikasi perkantoran Microsoft Office Excel.

Form yang saya buat ini sangat responsif, namun tombol "submit" belum saya aktifkan karena tujuannya hanya untuk memberikan contoh dan cara membuat suatu form, submit baru berfungsi jika kita telah menambahkan kode PHPnya, itu akan saya jelaskan pada tutorial yang berbeda. Perhatikan bentuk form responsif yang telah saya buat di bawah ini:
Cobalah menuliskan nama, memilih kota dan menuliskan riwayat hidup kalian di dalam form ajakan diatas. Dan bagaimana menerapkannya?

Jika kalian mengikuti tutorial Anissa sebelumnya, kalian akan mengerti bagaimana caranya memanfaatkan opsi penulisan konten melalui opsi "compose" dan opsi "HTML" Kalian dapat menuliskan penjelasan normal memalui opsi "compose" dan menjalankan kode kode HTML, CSS dan JavaScript melalui opsi "HTML". Kode koden yang harus kalian tuliskan ke opsi "HTML"  adalah sebagai berikut:
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #0000FF;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #FF0000;
}
.container {
border-radius: 5px;
background-color: #f0f0f0;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Form Responsif</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Nama anda..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Nama akhiran anda..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Pilih salah satu Kota:</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Batam</option>
<option value="canada">Tanjung Pinang</option>
<option value="usa">Jawa</option>
<option value="usa">Maluku</option>
<option value="usa">Tembilahan</option>
<option value="usa">Sungai luar</option>
<option value="usa">Belantaraya</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Riwayat singkat</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Silahkan tuliskan riwayat singkat.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
Save template lalu berlaih ke opsi "compose" untuk melanjutkan menulis normal.
Dengan berlatih, mencoba menulis dan menjalankan kode kode HTML, saya sangat percaya kalian akan memahami bagaimana ia bekerja dengan begitu indah di halaman sebuah web...

Saya ingin sekali membuatkan tutorial cara menulis melalui opsi "compose dan HTML" dalam bentuk video untuk melengkapi tutorial tulisan ini. Akan tetapi keterbatasan waktu memaksa saya harus menunggu momen yang tepat....

I am a student of Senior High School (SMA) I am living in Bandar Lampung, Selalu tertarik dengan HTML, sedang belajar Javascript, python dan C++