Cara menggunakan dynamic class css

I'm a computer science engineer specializing in web design and development with an eye for detail. I have over three years of experience with React and also fiddle with Ruby on Rails and Elixir.

Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.

Table of Contents Show

Create a Website from Scratch
A "Layout Draft"
Side Content
Main Content
First Step - Basic HTML Page
Berikut Tahapannya :

Create a Website from Scratch

A "Layout Draft"

It can be wise to draw a layout draft of the page design before creating a website:

Side Content

Some text some text..

Main Content

Some text some text..

First Step - Basic HTML Page

HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page.

Pada kesempatan kali ini saya akan menjelaskan cara membuat input textbox dynamic dengan jquery. Perlu teman-teman ketahui sebelumnya, input textbox dynamic adalah input textbox yang dapat ditambahkan otomatis tanpa adanya keterbatasan jumlah yang ingin dibuat. Dan biasanya cara tersebut digunakan bukan cuma untuk input textbox saja, melainkan untuk form serta komponen-komponen form html lainnya, namun pada penjelasan yang saya jelaskan disini untuk input textbox, dan untuk penggunaan form serta komponen-komponen lainnya bisa teman-teman kembangkan lagi dari contoh yang saya berikan disini, dan pada dasarnya untuk penggunaan komponen-komponen lainnya sama seperti cara yang saya jelaskan disini.

Mungkin sebagian dari teman-teman sudah pernah membuatnya dengan PHP, namun pada contoh disini menggunakan jQuery yang menurut saya lebih efisien dan simple jika dilihat dari sisi User Interface. meskipun dengan kode PHP bisa dibuat, namun biasanya membutuhkan banyak logical untuk membuatnya dan jika teman-teman membuatnya menggunakan jQuery kodenya pun tidak terlalu rumit, lebih ringkas dan hasilnya lebih efisien. Untuk membuatnya teman-teman dapat mengikuti tahapan dibawah ini.

Berikut Tahapannya :

Sebelumnya teman-teman buat terlebih dahulu satu buah file dengan nama index.html
Jika sudah, ketikan kode seperti berikut :

index.html

XHTML

<!DOCTYPE html>

<head>

<title>Cara Membuat Form Input Textbox Dynamic Dengan jQuery</title>

</head>

<style>

.tambah{

margin-left:5px;

}

</style>

<body>

<h1 class="text-center">Form Input Textbox Dynamic Dengan jQuery</h1><hr>

</div>

</body>

$(function(){

$(document).on('click', '.tambah', function(e)

{

e.preventDefault();

var kolom = $('.col-md-12:first'),

formGroup = $(this).parents('.form-group:first'),

inputTextbox = $(formGroup.clone()).appendTo(kolom);

inputTextbox.find('input').val('');

kolom.find('.baru:not(:last) .tambah').removeClass('tambah').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<i class="fa fa-minus"></i>');