 |
| form ilustration |
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:
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>Save template lalu berlaih ke opsi "compose" untuk melanjutkan menulis normal.
* {
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>
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....